HTML에서 가장 기본이 되는 요소는 엘리먼트 또는 태그라고 불린다. 더불어 HTML은 프로그래밍 언어가 아니라 마크업 언어로 취급한다. 마크업(MarkUp)이란 명령어인 태그를 시작 < > 과 끝 < / >으로 표현한 요소들을 이용하여 웹 문서를 작성하는 것을 지칭한다. 바로 이를 가능하게 하는 게 HTML이다.
블럭 요소와 인라인 요소를 알면 HTML을 아는 셈이다
Contents
요소(element)란 무엇인가?
간단히 HTML 요소, 또는 태그 또는 엘리먼트라 불리는 요소는 명령어를 담은 태그 표현이라고 생각하면 된다. 요소에서 가장 기본이 되는 7가지 규칙을 다음에서 확인할 수 있다.
1) 요소는 중첩되어야 한다.
2) 요소 및 속성 이름은 소문자를 사용한다.
3) 요소는 항상 닫아야 한다.
4) 속성값에는 인용부호를 붙여야 한다.
5) 속성은 속성값과 함꼐 써야 한다.
6) 특수문자는 Entity Name 또는 Entity Code를 사용한다.
7) 주석처리는 <!-- --> 를 사용한다.
블럭 요소와 인라인 요소
블럭 요소는 줄 전체를 자기 크기로 가지므로 줄 바꿈이 일어난다.
인라인 요소는 자기 영역만큼만 크기를 가지므로 줄 바꿈이 일어나지 않는다.
인라인 요소는 블럭 요소를 포함할 수 없다.
대부분 태그는 블럭 요소에 해당한다. 따라서 인라인 요소만 외우는 편이 적절하다.
인라인 요소 - a, img, span, strong, input, select, textarea 등
블럭 요소 - ul, li. dt, dd, div, h1, p 등
나는 블럭요소이므로 줄 전체가 내 땅이다.
나는 인라인 요소이므로 내가 포함한 영역만 내 땅이다.
위와 같이 블럭요소는 줄 전체를 자기 크기로 가지므로 색상이 한 줄 전체에 들어갔다. 더불어 블럭요소는 넓이, 높이를 줄 수 있다.
하지만 인라인요소는 글자가 들어간 자기 영역만큼만 크기를 가지므로 글자 있는 곳까지만 색상이 들어갔다. 인라인 요소에는 넓이, 높이를 줄 수 없다.
인라인 요소 중 <img> 태그는 크기, 높이, 마진, 패딩도 적용 가능한 인라인-블록 요소 성향을 지닌다.
인라인, 블럭요소는 CSS에서 display 속성을 활용해 바꿀 수 있다.
