FrontEnd

[Front-End] HTML & CSS 4.

예린_dev 2022. 3. 20. 11:23

3. HTML5 Markup Elements

3-1. 포맷팅 요소

  • 포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있다.
  • 예를 들면, <b>와 <strong>은 모두 텍스트를 굵게 표현하지만, <strong> 요소는 텍스트를 강조

3-2. 목록형 요소 - 개요

  • 목록 tag는 하나 이상의 하위 tag를 포함
  • 목록 tag는 각 항목을 들여쓰기로 표현
  • 번호 또는 심볼을 이용해서 목록을 표현
    • <ul>/ 번호 없는 목록을 표시
    • <ol>/ 번호 있는 목록을 표시
    • <li>/ 목록 항목<ul>이나 <ol>tag 하위에서 사용

3-3. table - HTML table 모델

  • HTML table 모델은 데이터를 행과 열의 셀에 표시
  • 행 그룹요소인 <thread>, <tbody>, <tfoot> 요소를 사용하여 행들을 그룹화
  • <colgroup>과 <col> 요소는 열 그룹을 위한 추가적인 구조정보를 제공
  • table의 셀은 머리글(<th>)이나 데이터(<td>)를 가질 수 있음
  • <table>, <tr>, <td> tag에는 table에 스타일을 적용하는 다양한 속성들이 있다.
  • frame 속성은 table의 특정 선을 보여줄지를 결정하며, rules 속성은 셀과 셀 사이의 줄이 나타날 것인가를 지정
  • table 정렬을 위한 align 속성, background, bgcolor, border 속성 등이 있음
  • HTML5부터는 이러한 속성들을 더 이상 지원하지 않는다. 스타일은 CSS를 사용하여 적용
  • <caption> tag는 table 제목을 정의하기 위해 사용하며 <table> start tag 바로 뒤에 위치
  • <caption> tag는 table 당 하나만 사용
  • table 제목은 기본적으로 가운데 정렬. 정렬 방식 변경은 CSS를 사용
  • table 행 그룹 요소는 table의 행들을 머리글, 바닥글, 하나 이상의 본체 항목으로 그룹핑
  • 행 그룹 요소에는 머리글(<thread>), 본체항목(<tbody>), 바닥글(<tfoot>) 요소가 있다.
  • 각 행 그룹은 최소 하나 이상의 <tr>을 가져야 함. <tr> -> <th> or <td>
  • table 열 그룹 요소는 table 내에서 구조적인 분리를 가능케함
  • <colgroup> 요소는 명시적인 열 그룹을 만들며, <col> 요소는 열(column)을 묶어 그룹핑 함
  • <colgroup> 요소의 span 속성은 열 그룹에서 열의 개수를 정의
  • <col> 요소의 span 속성은 <col>에 의해 묶여진 열의 개수를 말함
  • cellspacing은 table cell과 cell 사이의 공간을 의미
  • cellpadding은 cell 외곽과 cell 컨텐츠 사이 공간을 의미
  • HTML5 부터는 테두리 스타일 관련 속성을 지원하지 않고, CSS를 사용
  • HTML table의 <td> 요소에는 셀을 병합하기 위한 두개의 속성이 있음
  • colspan 속성은 두 개 이상의 열을 하나로 합치기 위해 사용
  • rowspan 속성은 두 개 이상의 행을 하나로 합치기 위해 사용

 

반응형