Chapter 04. HTML & CSS 필수 기초 (2)

이 포스트는 SW마에스트로 자기주도학습으로 패스트캠퍼스의 웹 프론트엔드 올인원 패키지 Online을 수강하면서 작성한 노트입니다.

3. 컨텐츠 구분 태그

• h1~h6
  • 6단계의 문서 제목을 구현함
    • 큰 주제(h1) —> 작은 주제(h6)
  • 제목 폰트 크기를 줄이기 위해 사용하지 말 것. font-size 속성을 사용해야 함
  • 제목 단계를 건너뛰는 것을 피할 것. h1, h2, … 순차적으로 기입하기
  • h1은 한 페이지에 하나만 사용하기
• header
  • 로고, 메뉴
  • 하위 요소로 사용할 수 없음
• footer
  • 주소, 사업자
  • 하위 요소로 사용할 수 없음
• main
  • 문서의 핵심 컨텐츠를 설정 (블록 요소)
  • 한 문서 내에서 한 번만 사용
  • IE 지원 X
• article
  • 독립적으로 구분되거나 재사용 가능한 영역을 설정함
• section
  • 문서의 일반적인 영역을 설정함
  • article을 담을 수 있음
    • 반대로, article이 section을 담을 수도 있음
• aside
  • 문서의 별도 콘텐츠를 설정
  • 광고, 기타 링크
• nav(Navigation)
  • 다른 페이지 링크를 제공하는 영역을 설정
  • 메뉴(Home, About, Contact), 목차, 색인
• address
  • body, article, footer 등에서 1개 이상의 연락처 정보를 제공하기 위해 사용

    <address>
        <a href="mailto:ff152@gist.ac.kr">ff152@gist.ac.kr</a><br>
        <a href="tel:+13115552368">(311) 555-2368</a>
    </address>
  

4. 문자 컨텐츠

• li: list item (list item – block element에 속함)
  • 단독 사용 불가
  • ol 또는 ul의 자식이어야 함
  • value="7": 이하 항목의 순서를 7부터 다시 지정
• ol: ordered list (block)
  • li만 자식으로 사용 가능
  • type="a/A/i/I/1": 번호 유형 선택
  • reversed="reversed" or reversed: 번호를 역순으로 표시
  • started="2": 번호 2부터 시작
• ul: unordered list (block)
  • li만 자식으로 사용 가능
• dt(definition term): 용어(key) (block 요소)
• dd(definition details): 설명(value) (block 요소)
• dl(description list): 용어와 설명의 집합 (block 요소)
  • dd, dt만을 포함해야 함
  • styling의 한계 -> ul, li를 이용

    <dl>
        <dt>Coffee</dt>
        <dd>Coffee is a brewed drink</dd>
        <dt>Milk</dt>
        <dd>Milk is a nutrient-rich, ...</dd>
    </dl>
  
    <ul>
        <li>
            <dfn>Coffee</dfn>
            <p>Coffee is a brewed drink</p>
        </li>
        <li>
            <dfn>Coffee</dfn>
            <p>Coffee is a brewed drink</p>
        </li>
    </ul>
  

• <p></p>(Paragraph): 하나의 문단을 설정 (block 요소)
• <hr />(Horizontal Rule): 문단의 분리를 위해 사용 (block 요소)
  • 수평선으로 표시됨
    • block 요소이므로, 상하좌우에 모두 선이 표시됨
      • border: 2px -> 실제로는 4px이 출력됨
    • border: none; border-top(or border-bottom): dashed 2px; 이용
  • 수평선을 그리기 위해서가 아닌 의미적 관점으로만 사용해야 함
• pre(Preformatted Text): 서식이 미리 지정된 텍스트를 설정 (block 요소)
  • 텍스트의 공백과 줄바꿈을 그대로 출력할 수 있음
    • 텍스트의 처음과 끝부분에 태그를 바로 붙여주어야 정확하게 출력됨
  • 기본적으로 Monospace 계열의 글꼴로 출력됨

    Monospace 계열의 글꼴은 각 글자의 너비가 동일함

• blockquote(Block Quotation): 인용문 설정

    <blockquote cite="인용된 위치(URL)">
    인용문
    </blockquote>
  

5. 인라인 텍스트

• a (inline)
  • 속성
    • download: 리소스 다운 용도로 사용되는 요소인지
    • href: 링크 URL
      • HTML5로 넘어오면서 필수 속성에서 선택 속성으로 변경됨 (생략 가능)
    • hreflang: 링크 URL 페이지 언어
    • rel: 현재 문서와 링크의 관계 (license, prec, next, …)
    • target: 링크 URL의 표시 위치
      • _self: 현재 탭에 새로운 페이지를 띄움 (default)
      • _blank: 새로운 탭에 새로운 페이지를 띄움
  • type: 링크 URL의 MIME 타입 (주로 생략)
  • 모양을 입혀 버튼으로 사용할 경우 display: block;으로 변경해 주어야 함
  • 같은 페이지 내에서 이동하기

      <ul>
          <li><a href="#title1">제목1</a></li>
          <li><a href="#title2">제목2</a></li>
      </ul>
      <h2 id="title1">제목1</h2>
      <h2 id="title2">제목2</h2>
      <h2 id="title3">제목3</h2>
    

• 2019 14