안녕하세요~ 뉴핀입니다.
2022.08.12 - [Programming/WEB] - [HTML5.0] 시맨틱(semantic)하다는 것에 대하여... - 3편. HTML 태그
저번 시간까지 해서 여러분들과 함께 시맨틱 웹과 시맨틱 태그에 대해 이론적으로 알아봤었는데요. 오늘부터는 각 태그들을 직접 다루며 실습을 통해 알아가 보도록 하겠습니다. 덤으로 실무적인 지식도 전달해드릴까 합니다.
오늘은 시맨틱 웹 실습, 그 첫 번째 주인공은 바로 "header"입니다.
<header></header>
1. header는 '머리'입니다.
앞서 알아본 바에 의하면 시맨틱 웹에는 시맨틱 태그가 주를 이루게 됩니다. 시맨틱 태그 중 하나인 'header'의 사전적 의미부터 알아봅시다.
1. header의 사전적 의미
header [ˈhedə(r)]
명사
1. 헤딩
2. 헤더(컴퓨터에서 출력될 때 각 페이지 맨 윗부분에 자동으로 붙는 부분) (→footer)
출처: 네이버 영한사전
그렇군요! header 태그는 웹페이지에 헤딩을 꽂아 넣는...
아닙니다.
header tag는 웹페이지에서 보이는 가장 상위의 것으로 main콘텐츠 다음으로 유저들이 자주 찾는 요소입니다. 그만큼 UX적으로 중요한 element(= tag)입니다.
2. header의 주요 내용
여러분들이 생각하시기에 "header"에는 어떤 내용이 들어갈 것 같나요? 아래에 예시 사진들이 있습니다.
배경이 파란 것은 focusing 되어서 그렇습니다.
"header"는 브랜딩을 위한 로고와 함께 웹페이지 전체에 대한 global navigation(전역 내비게이션)을 제공합니다. 대부분의 "header"는 Global Navigation Bar (GNB)라고 불리는 어느 페이지로 이동하든 늘 존재하는 navigation들을 포함하고 있습니다.
## TIP. 개발자 도구 활용하기
사진에 나온 방법은 웹 브라우저에서 제공하는 'devtools' 혹은 'inspect'라고 불리는 기능을 이용한 것입니다. 사용방법은
1. devtools는 웹페이지가 focusing 된 상태에서 "control(Mac: fn) + F12" 혹은 "Window(Mac: command) + Shift + c"키를 누르시면 확인하실 수 있습니다. 혹은
2. 웹페이지 위에서 마우스 우클릭 후, 팝업 되는 "context menu"에서 'inspect' 혹은 '검사'라고 되어있는 항목을 클릭하시면 됩니다.
devtools는 프런트엔드 개발자라면 떼려야 뗄 수 없는 동반자이기에 web surfing 하실 때마다 켜보시는 것을 추천합니다.
3. 실습
<!-- 가장 근본적인 html 뼈대입니다. -->
<!--
실습에 사용된 <head></head>와 <body></body> 태그는 html웹페이지의 기본 구성입니다.
보이지 않는 내면(head)과 눈에 보이는 외면(body)이라고 생각하시면 쉽습니다.
<header>와 <head>는 다릅니다.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>헤더</header>
</body>
</html>사용하고 계신 "코드에디터(visual studio code, atom, sublime text 등등...)" 혹은 "텍스트 편집기(= 메모장)"를 켜시고, 위의 코드를 '복사', '붙여 넣기'하신 후 파일 이름을 "index.html"로 해서 저장해주세요.
이후에 header 사이에 제목(<h1>)과 간단한 hyper text(<a>)를 적어보도록 하겠습니다. hyper text가 어떤 것인지는 다들 알고 계시죠? 모르시는 분이 계시다면 3편에서 배우실 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 아래를 바꿔 주세요 -->
<header>
<h1>hello world</h1>
<a href="https://nufyn.tistory.com/">뉴핀 블로그</a>
</header>
</body>
</html>header는 주로 레이아웃을 잡는 'wrapper'로 많이 쓰입니다. 저번 편에서 보여드렸던 layout 구조와 동일하게 스타일을 넣어볼게요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- style태그는 html에 design을 담당하는 전용태그입니다. 주로 head 태그안에서 씁니다. -->
<style>
header {
width: 100%;
height: 60px;
background-color: #dedede;
}
</style>
</head>
<body>
<header>
<h1>hello world</h1>
<a href="https://nufyn.tistory.com/">뉴핀 블로그</a>
</header>
</body>
</html>
아마도 여러분들께서 상상했던 모습과는 많이 다를 것입니다. 방금 알려드렸던 'inspect'를 켜서 확인하신 분들은 아셨겠지만 이때까지 제가 알려드렸던 지식으로는 저번 편의 layout처럼 만들기는 힘들 것으로 예상이 되는데요. 지금 당장의 목표는 header tag의 의미를 알아보고 그것에 맞게 내용을 쓰는 것이지만 여러분들의 불편을 해소해드리기 위하여 제가 스타일 코드를 가져왔습니다.
head,
body {
padding: 0;
margin: 0;
}
header {
position: relative;
top: 0;
left: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 60px;
padding-left: 20px;
padding-right: 20px;
background-color: #dedede;
box-sizing: border-box;
}
header h1 {
display: inline-block;
width: auto;
margin-top: 0;
margin-bottom: 0;
}
header a {
text-decoration: none;
display: inline-block;
}낯선 친구들이 많이 실 텐데요. 잘 활용하셔서 마음에 드는 구성을 만들어 보시길 바랍니다.
생각해볼 것
1. header라는 이름의 의미
- 맨 위에 있어서 '머리'인가?
- 웹페이지의 얼굴은 어디일까?
2. header내에 들어가는 주요 내용들
- global navigation이 header안에 있는 이유는?
3. header에 알맞은 UX(user experience)란?
- 많은 사람들이 일반적으로 접하는 화면은 어떤 모양일까?
- 항상 맨 위에 있어야 할까?
4. 'header'가 있다면......?!
- '몸통'도 있지 않을까?
- '발'도 있지 않을까?
이상으로, 시맨틱 웹 4편! header에 대해 알아보았습니다. 저 같은 경우는 모든 프로젝트에 header와 main 태그는 꼭 작성합니다. 그만큼 중요한 태그라고 생각하기 때문인데요. 여러분들도 layout을 작성하실 때, header라는 wrapper의 소중함을 꼭 아셨으면 합니다.
더 궁금한 점이 있다면 댓글 남겨주세요!!
감사합니다.
'Programming > WEB' 카테고리의 다른 글
| 크롬 확장프로그램 만들기 (1) (0) | 2022.11.28 |
|---|---|
| [HTML5.0] 시맨틱(semantic)하다는 것에 대하여... - 5편. <Main> (0) | 2022.11.07 |
| [HTML5.0]시맨틱(semantic)하다는 것에 대하여... - 3편. HTML태그 (1) | 2022.09.26 |
| [HTML5.0]시맨틱(semantic)하다는 것에 대하여... - 2편. 시맨틱 웹 (0) | 2022.08.08 |
| [HTML5.0]시맨틱(sementic)하다는 것에 대하여... - 1편. 시맨틱 태그 (0) | 2022.07.25 |
댓글