HTML은 무엇인가?
HTML이란 HyperText Markup Language의 약어이다.
HTML은 말 그대로 마크업 랭귀지이기 때문에 개발자들 사이에서는 개발 언어로 쳐주지도 않지만, 웹 개발에 있어서 가장 기본이 되는 언어라고 생각한다. CSS, Java Script와 같이 웹 개발에서는 필수 언어이다.
HTML의 구조
<p> Hello World! </p>
HTML의 가장 기본이 되는 구조이고, 이 것만 정확히 이해하면 반은 왔다고 할 수 있을 것 같다. <p>는 opening tag, </p>는 closing tag라고 불린다. 그리고 그 사이에 들어가는 Hello World! 는 content이다. 이를 총 합쳐서 우리는 element라고 부른다.
HTML의 다양한 태그들
<body> </body>
바디 태그는 웹 페이지에 있어서 가장 중요한 태그 중 하나라고 할 수 있다. 바디 태그 안에 들어오는 content들이 웹 페이지에 표시되기 때문이다.
<body>
<p> Hello World! </p>
</body>
이렇게 코드를 쓴다면 내가 실행하는 웹페이지에서는 Hello World!라는 글자가 보일 것이다!
이 경우에 우리는 p 태그를 자식 요소(child element)라고 부르고 body 태그라는 부모 요소(parent element)에 중첩(nested ) 되었다고 표현한다. 이런 중첩은 2번, 3번 그 이상도 더 할 수 있다. 그리고 그러한 자식과 부모의 관계를 계층(hierarchy)이라는 단어를 사용해 표현한다. 자식 요소는 부모 요소의 스타일이나 성질을 물려받을 수 있기 때문이 이런 계층을 이해하는 것은 중요하다.
그리고 이렇게 부모 요소에 자식 요소를 중첩할 때는 들여 쓰기(indentation)이 필수다!
Headings
헤딩은 말 그대로 제목을 나타내는 태그인데 <h></h>로 표시한다. 헤딩에는 6가지의 종류가 있는데
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
이렇게 1-6까지로 표현하고 1이 가장 메인이 되는 제목이고 숫자가 커질수록 점점 소제목이 된다고 생각하면 된다.
통상적으로 한 웹 페이지당 <h1>은 오직 1개만 있는 것을 권고한다.
<div> </div>
div 태그는 divsion의 약자이고 html에서 활발히 쓰이는 태그 중 하나이다. container라고도 표현하며 하나의 웹 페이지를 각각의 세션으로 구분해주는 역할이라고 생각하면 된다. 즉, 여러 요소들을 하나로 그룹화하는데 유용하다. 이는 후에 CSS를 활용해 스타일을 줄 때, 한 번에 스타일을 줄 수 있어서 편리하다.
속성(Attributes)
속성은 오프닝 태그 안에 쓰는 것으로 정보를 부여하는 것부터 스타일을 바꾸는 등 여러 쓰임새가 있다. 수많은 속성이 있지만 가장 많이 쓰이는 것은 id이다. id는 요소에 말 그대로 identity를 부여하는 것이다. id를 쓰는 데는 여러 이유가 있지만 지금은 한 요소를 다른 것들과 구분하는 목적으로 알아보도록 하자.
<div id="introduction">
<h1> Introduction </h1>
</div>
여기서 id는 속성의 이름(name)이고 "introduction"은 속성의 값(value)이다.
이렇게 함으로써 위의 div 태그는 다른 div 태그들과는 다른 introduction이라는 아이디를 가진 div태그가 된 것이다.
'공부 > 프로그래밍 공부' 카테고리의 다른 글
| 웹 개발을 위한 필수 언어 - HTML (2) (0) | 2023.01.03 |
|---|
