HTML tag의 종류 (semantic 한 태그다. 의미를 가지고있다.)
태그는 그 의미에 맞춰서 사용해야 합니다.
- 링크
- 이미지
- 목록
- 제목
anchor 태그, img 태그, ul/li (순서가 없는 목록) 태그, heading 태그, p 태그 등이 자주 사용됩니다.
그 밖에 가장 많이 사용하는 div태그가 있습니다.
div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용합니다.
많은 태그를 모두 외울 필요는 없으며, 필요한 태그를 찾아서 적절한 의미에 맞는 태그를 사용하는 것이 중요합니다.
태그 이름 치고 탭 하면 나옴! 자동으로
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<h1>반갑습니다.</h1>
여기 여러분들이 좋아하는 과일이 있어요
<ul>
<li ><a href="www.apple.com">사과</a></li>
<li>바나나</li>
<li>메론</li>
<li>귤</li>
</ul>
</div>
</body>
</html>계층적인 구조
레이아웃을 위한 태그
레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 사용됩니다.
- header
- section
- nav
- footer
- aside
html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 됩니다.
지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성됩니다.
본문영역은 div로 감싸주는 경우가 많고
그 감싼 div에 id값을 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
header
</header>
<div id = "container">
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>sports</li>
</ul>
</nav>
<aside><ul><li>로그아웃</li>
<li>오늘의날씨</li>
<li>운세</li></ul></aside>
</div>
<footer>footer</footer>
</body>
</html>또 footer 나 header도 그냥 div태그에 클래스로 이름을 header, footer이렇게 줌
모바일에서는 태그를 사용함.
아침에 이어서 해보도록 하겠다.
'✍2021,2022 > WEB' 카테고리의 다른 글
| 네이버 부스트코스 (6) (0) | 2022.02.13 |
|---|---|
| 네이버 부스트코스 (5) (0) | 2022.02.11 |
| 네이버 부스트코스 백엔드 (0) | 2022.02.08 |
| 네이버 부스트코스 풀스택 학습일지(2) (0) | 2022.02.06 |
| 네이버 부스트코스 풀스택 학습일지 (1) (0) | 2022.02.06 |
HTML tag의 종류 (semantic 한 태그다. 의미를 가지고있다.)
태그는 그 의미에 맞춰서 사용해야 합니다.
- 링크
- 이미지
- 목록
- 제목
anchor 태그, img 태그, ul/li (순서가 없는 목록) 태그, heading 태그, p 태그 등이 자주 사용됩니다.
그 밖에 가장 많이 사용하는 div태그가 있습니다.
div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용합니다.
많은 태그를 모두 외울 필요는 없으며, 필요한 태그를 찾아서 적절한 의미에 맞는 태그를 사용하는 것이 중요합니다.
태그 이름 치고 탭 하면 나옴! 자동으로
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<h1>반갑습니다.</h1>
여기 여러분들이 좋아하는 과일이 있어요
<ul>
<li ><a href="www.apple.com">사과</a></li>
<li>바나나</li>
<li>메론</li>
<li>귤</li>
</ul>
</div>
</body>
</html>계층적인 구조
레이아웃을 위한 태그
레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 사용됩니다.
- header
- section
- nav
- footer
- aside
html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 됩니다.
지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성됩니다.
본문영역은 div로 감싸주는 경우가 많고
그 감싼 div에 id값을 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
header
</header>
<div id = "container">
<nav>
<ul>
<li>home</li>
<li>news</li>
<li>sports</li>
</ul>
</nav>
<aside><ul><li>로그아웃</li>
<li>오늘의날씨</li>
<li>운세</li></ul></aside>
</div>
<footer>footer</footer>
</body>
</html>또 footer 나 header도 그냥 div태그에 클래스로 이름을 header, footer이렇게 줌
모바일에서는 태그를 사용함.
아침에 이어서 해보도록 하겠다.
'✍2021,2022 > WEB' 카테고리의 다른 글
| 네이버 부스트코스 (6) (0) | 2022.02.13 |
|---|---|
| 네이버 부스트코스 (5) (0) | 2022.02.11 |
| 네이버 부스트코스 백엔드 (0) | 2022.02.08 |
| 네이버 부스트코스 풀스택 학습일지(2) (0) | 2022.02.06 |
| 네이버 부스트코스 풀스택 학습일지 (1) (0) | 2022.02.06 |
