HTML 기초(3) header, footer, main, button 태그

HTML 기초(3)

---

오늘은 저번 시간에 이어서 HTML body 태그에서  사용되는 태그들을 몇 가지 더 소개해드리겠습니다.

 

(1)

<header>

header 태그는 보통 상단에 위치할 텍스트나 이미지를 작성할 때 사용되는 태그입니다.

보통 header 태그에는 웹페이지의 로고, 다른 페이지로 이동하는 링크를 넣을 수 있고

글을 작성한다면 글의 제목이 위치할 수 있습니다.

header 태그를 사용하는 이유는 코드를 작성할 때 구분하기 좋아서 추후에 수정할 때도 가독성이 좋고

코드를 깔끔하게 정리할 수 있어서 많이 사용되는 태그입니다.

 

(2)

<footer>

footer 태그는 웹페이지에서 아래쪽에 회사의 주소나 연락처, 공지사항 등의 정보를

나타낼 수 있는 영역을 담당하는 태그로 footer 태그를 사용하는 이유는

웹페이지를 구성할 때 푸터의 영역은 반드시 들어가는 영역이기 때문에 사용하시면 좋고

위에 header 태그와 마찬가지로 깔끔하게 태그를 정리할 수 있어 가독성이 좋고

추후에 수정할 때 정말 유용하기 때문에 많이 사용합니다.

 

(3)

<main>

다음은 main 태그인데 main 태그는 콘텐츠의 메인을 담당하는 영역을 구성할 때 사용하는 태그입니다.

이 태그도 위에 header 태그와 footer 태그와 마찬가지로 가독성이 좋고 깔끔하게 정리할 수 있어 많이 사용합니다.

 

(4)

<button>

마지막으로 button 태그입니다. 이 태그는 말 처럼 버튼을 담당하는 태그입니다.

이 태그는 기본 버튼의 형태이지만 CSS를 사용하여 버튼을 디자인하여 사용할 수 있습니다.

 

---

 

기초 적용 코드

 

결과 웹페이지

마지막으로 HTML 기초를 배운 코드를 사용하여 CSS 코드를 이용하여 간단한 웹페이지를 만들어 보았습니다.

오늘은 HTML 태그를 어떻게 사용하는지에 대해 간단한 예시로 보여드렸습니다.

다음에 CSS 강의를 진행하면서 결과 웹페이지를 만드는 방법에 대해 진행해보겠습니다.

 

오늘은 HTML에서 사용하는 유용한 태그들에 대해서 알려드렸습니다.

제가 언급한 태그 이외에도 다양한 태그가 존재하기 때문에

꼭 언급한 태그만 있다고 생각하시면 안 될 것 같습니다.

다음 주제는 HTML의 class 속성과 id 속성에 대해 알려드리겠습니다.

 오늘도 고생하셨습니다.

 

감사합니다!