HTML이란 HyperText Markup Language 하이퍼텍스트 마크업 언어의 약자로 웹사이트를 제작하는데 사용하는 프로그래밍 언어 중 하나이다. HTML에는 약 120개 이상의 태그가 존재하는데, 태그마다 고유 역할과 특징이 있다.
HTML 요소란 무엇인가
CONTENTS
웹의 구조를 다루는 HTML를 MDN 사이트를 토대로 가장 기본적인 사항과 중요한 포인트 위주로 정리한다.
1. HTML 태그 구조
HTML 태그는 열린 태그와 닫힌 태그, 속성, 속성값으로 구성한다.
<열린 태그 속성="속성값";> 콘텐츠 </닫힌태그>
명령어를 담는 태그는 엘리먼트, 요소라고도 불리는데, 다음 7가지 기본 규칙은 알고 있어야 한다.
- 요소는 중첩되어야 한다. <p> </p>
- 요소 및 속성 이름은 소문자여야 한다.
- 요소는 항상 닫아야 한다. 빈 요소도 '/'로 닫아 주어야 한다.
- 속성값에는 인용부토를 붙여야 한다. <a href="index.html">첫페이지</a>
- 속성은 속성값과 함께 써야 한다.
- 특수문자는 Entity Name 또는 Entity code를 사용한다.
- 주석처리는 <!-- 주석 내용 --> 이렇게 표시한다.
2. 블럭요소와 인라인요소
HTML 태그는 두 가지 요소가 존재하는데, Block 요소와 Inline 요소로 이 차이를 반드시 알아야 한다.
우선 대부분 태그는 블럭요소이므로 인라인요소만 따로 외우는 게 편하다.
블럭요소와 인라인요소 차이점은 크게 3가지이다.
- 줄 바꿈 현상 유무
- width와 height 속성 적용 유무
- margin-top(bottom) 속성 적용 유무
블럭요소는 HTML 태그의 대부분을 차지한다. h1, div, ul, p, li, dt, dd 등이 대표적이다. 블럭요소는 줄 바꿈이 일어나고 줄 전체를 자기 땅으로 인식하는 블럭 성향을 지닌다.
인라인요소는 a, img, span, strong, input, select, textarea 정도만 외우면 될 만큼 많지 않다. 블럭요소와 달리 줄 바꿈이 일어나지 않고, 줄에서 콘텐츠가 있는 부분만 자기 땅으로 인식한다.
블럭요소는 블럭요소와 인라인요소를 포함할 수 있지만, 인라인요소는 블럭요소를 포함할 수 없다.
1) 줄 바꿈 현상 유무
블럭요소는 줄 바꿈을 적용한다.
인라인 요소는 줄 바꿈을 적용하지 않는다.
위와 같이 블럭요소는 전체줄(가로)를 자기 땅으로 인식하여 배경 색상이 줄 전체에 적용됐다. 하지만 인라인요소는 컨텐츠가 있는 데까지만 자기 땅으로 인식하므로 배경 색상이 콘텐츠가 있는 곳까지만 적용됐음을 알 수 있다.
2) width와 height 속성 유무
블럭요소는 줄 바꿈을 적용한다.
인라인 요소는 줄 바꿈을 적용하지 않는다.
위는 블럭요소와 인라인요소에 동일하게 넓이를 반으로 줄이고(width=50%), 높이는 100px를 주었다. 하지만 보다시피 블럭요소에는 넓이와 높이가 적용이 되는데, 인라인 요소는 넓이와 높이가 적용되지 않는다.
3) margin, padding 속성 유무
인라인 요소는 margin-bottom:100px 적용하지 않는다.
인라인 요소는 margin-left:100px 적용한다.
인라인 요소는 padding-right:100px 적용한다.
인라인 요소는 padding-bottom:30px 적용한다.
블럭요소는 마진과 패딩이 전부 적용하므로 위에서 다루지 않았다. 대신 인라인 요소에 마진과 패딩을 적용하면 기본적으로 인라인 요소도 모든 패딩은 적용된다. 하지만 마진은 자기 땅 외부에 영향을 주는 요소이므로 margin-top과 margin-bottom은 적용하지 않음을 알 수 있다. 콘텐츠가 가로줄 일부인 자기 땅에는 영향을 주므로 margin-left와 margin-right는 적용받음을 알 수 있다.
즉, 인라인 요소는 자신의 콘텐츠가 있는 부분만을 자기 영역으로 인식하므로 영역 내에서 공간을 주는 패딩은 적용되며, 또한 가로줄 일부를 지니고 있으므로 가로 줄 영역에 영향을 주는 margin-left와 margin-right가 적용됨을 알 수 있다.
하지만 자신의 콘텐츠가 놓여있지 않는 세로 줄 영역에는 영향을 줄 수 없으로므 margin-top과 margin-bottom은 적용되지 않는다.
'웹' Related Articles
