HTML 시작하기 (2)

 

안녕하세요, 마늘입니다.

오늘은 HTML의 header와 footer등등을 알아보려고 합니다.

빨리 요약하기 위해 설명은 간략하게 하겠습니다.

 

0. 시맨틱(semantic) 태그 

'의미론'적인 태그, HTML을 한줄로 요약하는 단어, 모든 태그에는 각자의 뜻이 있다!

태그를 총칭하는 것은 아니다.

 

1. <header>

헤더, 주로 맨 위쪽이나 왼쪽에 있는 부분을 의미, 검색창 / 사이트 메뉴를 삽입.

여러 곳에 삽입 가능.

네이버의 헤더

2. <nav>

웹 문서에서 문서로 연결해주는 링크, 말 그대로 하이퍼링크.

주로 네비게이션을 만들 때 사용하게 된다.

위치에 영향을 받지 않기에 header, footer, sidebar 등등에 포함할수도 있고 독립적인 사용도 가능

 

3. <main>

웹 문서에 공통되지 않은 내가 뭘 넣을지 고민하는 곳.

실제 내용으로 구성되며 한번만 사용 가능함.

 

4.<article>

어원처럼 보여주고 싶은 내용을 담고 있음.

블로그의 글, 기사의 뉴스 등등 독립된 웹 콘텐츠 형식을 말함.

복수 사용 가능, 안에 <section> 태그 삽입 가능

 

5.<section>

<article>와 비슷해보이지만, 콘텐츠를 묶는 구역으로도 사용됨.

 

6.<aside>

본문 내용을 제외하고 사이드바를 만들고 싶을 때 사용하는 태그.

 

7. <footer>

맨 아래쪽에 푸터 영역을 만듬.

<header>. <section>, <article> 등등 다양한 태그 삽입 가능.

Stack Overflow의 footer

8. <div>

div = division의 축약, 어원 '나누다' 처럼 시맨틱 태그가 나오기 이전에 사용하던 태그.

지금도 id / class 속성을 사용해서 문서 구조와 스타일을 만들 때 사용된다. (곧 다룰 예정)

 

HTML이 보기에는 어려워 보이지만, 사실상 수많은 태그를 조합한 것에 지나지 않는다는 것을 기억합시다.

머리를 쓰는 게 아닌 단순히 태그를 만지는 것이기에, 충분히 익숙해지면 쉽게 사용할 수 있을 겁니다 :)

다음 시간에는 텍스트 입력법에 대해 알아보도록 하겠습니다. 마늘이었습니다.

 

 

 

 

 

 

그리고 스스로 갱생하는 마음으로 1주 1글은 적어보도록 하겠습니다.

항상 기다려주시는 2명의 구독자분들께 감사드리고, 기껏 한달만에 쓰는 글이 이렇게 짧아서 죄송합니다.

기껏해야 공부하고 메모하는건데 항상 느리게 올려서 스스로 죄책감이 좀 들었습니다.

앞으로는 최대한 빠르게 다음 글을 가지고 오겠습니다 :)