HTML 정의 및 특징

<HTML이란?>
Hyper Text Markup Language
사용자의 의도대로 링크를 따라가는 형태의 문서를 작성하여 브라우저에 보여주는 마크업 언어이다.

 

<HTML의 특징>
· < >를 사용하여 표기하고 < / >를 사용하여 닫는다.
· < > 안의 내용은 element 라고 한다.
· 필수적으로 head와 body를 포함한다.
   head element > title element에

   속한 텍스트 노드는 브라우저의 탭에 표기된다.
· body에 속한 내용들은 브라우저에 표시된다.

 

<엘리먼트(태그)별 속성의 특징>
· 블록 속성 : 한줄을 차지하여 다음줄로 넘어감
· 인라인 속성 : 옆으로 붙는다. 줄바꿈X (단, 공간이 있을때만)

 

 

<주요 엘리먼트 종류와 속성>
· h : 블록 속성

  주로 제목을 작성할때 사용

  h1~h6 까지 있으며 각각 font-size가 지정

  h1이 가장 크고 h6이 가장 작다.

· ul , li : 블록 속성

  한쌍으로 같이 사용

  li 영역에 텍스트는 리스트 형식으로 랜더링된다.

  li 엘리먼트는 ul 엘리먼트의 자식 엘리먼트로 사용된다.

· div : 블록 속성

  영역을 설정하는 엘리먼트

· a : 인라인 속성

  엘리먼트 영역을 클릭하면 href 속성에 할당된 속성값으로 이동한다.

· span : 인라인 속성

  영역을 설정하는 엘리먼트

· i : 인라인 속성

  텍스트에서 어떤 이유로 주위와 구분해야 하는 부분

· button : 인라인 속성

  클릭 가능한 버튼을 나타냄

 

· input : 인라인 속성

  input의 속성인 type의 기본값은 text이다. 입력창에 텍스트가 입력된다.

  다른 type으로는

  input type="password" 는 비밀번호를 나타낸다.

  input type="radio"는 체크박스를 만든다. 체크박스로 여러 선택지를 만들 수 있다.

· img : 인라인 속성

  문서에 이미지를 넣는다.

  src 특성은 필수, 포함하고자 하는 이미지로의 경로를 지정한다.

 

<엘리먼트 속성 표기 예시>
<a href =" ">
  a : 엘리먼트
      href : 속성
              " " : 속성값

★★★엘리먼트(태그)가 갖고있는 속성이 무엇인가 아는게 중요
           ex) input 엘리먼트에는 type 속성

 

 

<id, class 공통 특징>
· HTML에 무조건 가능한 속성

· 특별한 역할은 없지만 이름을 부여함

  기능 차이는 없음

 

<id>
· id는 문서에서 유일한 값으로 설정

  (큰틀의 하나만 쓸때)

 

<class>

· 그룹을 만들기 위해 사용

  (여러개 묶어서 사용할때)

<div id="홍길동" class="8반">1</div>
<div id="김땡땡" class="8반">2</div>
<div id="경땡땡" class="8반">3</div>
<div id="훈땡땡" class="8반">4</div>