촬리의늘솔길

네이버 부스트코스 풀스택 (4) 본문

✍~2022/WEB

네이버 부스트코스 풀스택 (4)

리촬리 2022. 2. 9. 01:46

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이렇게 줌

모바일에서는 태그를 사용함.

 

아침에 이어서 해보도록 하겠다.

728x90

'✍~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
'✍~2022/WEB' Related Articles more