tag의 종류

의미에 맞춰 사용해야 한다.

링크, 이미지, 목록, 제목

html tag list

div : 특정 영역을 정의한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		 <!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>
Colored by Color Scripter		 cs

 

화면을 구성하는것 = layout

footer - 최신 모바일 환경에서 쓴다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>
 cs

 

  1. 간단한 웹페이지를 만든다고 가정하고, 상단 영역, 네비게이션 영역, 하단 영역을 layout tag를 사용해서 구성해보면 좋습니다.
  2. 여러 웹사이트들이 어떻게 layout태그를 사용하고 있는지 살펴보세요- PC 웹 사이트에서 브라우저 버전에 따른 호환성 이슈로 인해 div태그의 클래스명으로 레이아웃을 정의한다.
    ex) <div class="footer"> </div>
    - 모바일에서는  호환되는 브라우저버전이 많기 때문에 <header>, <footer> 태그를 직접 사용한다.

 

HTML layout tag

'Web' 카테고리의 다른 글

Web08 :: class 와 id  (0) 2019.01.04
Web07 :: HTML 구조설계  (0) 2019.01.04
Web05 :: WAS  (0) 2019.01.03
Web04 :: browser에서의 웹 개발  (0) 2018.12.31
Web03 :: browser의 동작  (0) 2018.12.31

티스토리툴바