[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 4회차 미션

10600 단어 패스트캠퍼스패스트캠퍼스

< main >

  • 문서 <body> 의 주요 컨텐츠 영역을 나타냄
  • 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠
  • 문서에 하나만 존재해야 함
  • IE 지원 X
  • block 요소

< article >

  • 독립적으로 구분되거나 재사용 가능한 영역을 설정 (매거진 / 신문 기사 / 블로그 등)
  • 일반적으로 <h1> ~ <h6> 을 포함하여 식별
  • 작성일자와 시간을 <time> 의 datetime 속성으로 작성함
  • block 요소
<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    <article class="day-forecast">
        <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>

< section >

  • 문서의 일반적인 영역을 설정

  • 일반적으로 <h1> ~ <h6> 을 포함하여 식별 (제목을 포함해서 의미를 가짐)

  • <section> 안에 <article>, <article> 안에 <section> 가능

  • 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 <article>요소가 더 좋은 선택

  • block 요소

<h1>How to Fish</h1>
<section>
    <h2>Introduction</h2>
    <p>People have been catching fish for food since before recorded history…</p>
</section>

< aside >

  • 문서의 별도 컨텐츠를 설정
  • 별도 컨텐츠 : 광고, 기타 링크 등 사이드바(side bar)
  • block 요소

< nav >

  • 다른 페이지 링크를 제공하는 영역을 설정
  • 메뉴, Home, About, Contact(연락), 목차, 색인 등을 설정
  • block 요소

영역을 나타내는 요소는 모두 block 요소!

<nav>
    <ul>
        <li>HOME</li>
        <li>AbOUT</li>
    </ul>
</nav>

< address >

  • <body, <article>, <footer> 등에서 연락처 정보를 제공하기 위한 태그
  • block 요소
<address>
  <a href="mailto:[email protected]">[email protected]</a><br> 
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

< div >

  • 본질적으로 아무것도 나타내지 않는, 의미가 없는 컨텐츠 영역을 설정
  • 꾸미는 목적으로 많이 사용
  • block 요소

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM

프로그래머스 | Lv.2_연습문제_Part.1_JS
[JS] 버튼 클릭으로 특정문장 hide/show

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage