"
본문 바로가기
기술 IT정보/html 스터디

03_q, blockquote, span, div, ul ol, li, dl dt dd colum row cell colspan, colgroup_1102

by 트렌딧 2020. 12. 6.
반응형

q> 인용 내용 표시, 인라인 레벨 태그
줄바꿈 없이 다른 내용과 함께 한 줄로 표시되고 인용 내용을
구별할 수 있도록 인용 내용에 따옴표를 붙여 표시한다.

blockquote> 인용 내용 표시, 블록 레벨 태그
인용 내용이 줄이 바뀌어 나타나고 다른 내용과 구별되도록 안으로
들여 써진다.

span> 줄바꿈 없이 영역 묶기, 블록단위

div> 단락을 통째로 묶기

ul>, li> 순서없는 목록 만들기
ol>, li> 순서 목록 만들기

dl> dt> dd> 설명 목록 만들기

https://validator.w3.org/
코딩오류 체크 사이트
(웹표준에 맞춰)

열 colum
행 row
셀 cell


colum colspan="3" (가로줄셀합치기,컬럼은열이지만,)
td colspan="합칠 셀의 개수">내용/td>
th colspan="합칠 셀의 개수">내용/th>(제목있는부분합칠때)
*
세로줄 합치기는 row
td rowspan="합칠 셀의 개수">내용/td>
th rowspan="합칠 셀의 개수">내용/th>(제목있는부분합칠때)

*caption>, figcaption>표에 제목붙이기


thead>, tbody>, tfoot>표 구조 정의하기
(이런 시멘틱 태그를 써야 나중에 그룹별스타일 수정적용하기 편함.
웹표준/노출잘됨>
단순 tr th td 를 그룹으로 영역구분.

밝은회색 cccccc 배경색
thead, tfoot {
background : #eeeeee;

*
col> colgroup> 여러 열 묶어 스타일 지정하기

표를 만들때tr> 태그로 행을 만든 후 그 안에 필요한 개수만큼
셀을 만든다. 이렇게 표를 만들 때부터 tr>태그로 행을 조절하므로
따로 행을 묶는 태그는 없다. 반면, 표를 만들 때 열을 만드는
태그가 없으므로 열을 조절할 대는 col>태그나 colgroup>태그를
따로 사용한다.
2,3번째 블루 4번째 옐로
colgroup>
col>
col span="2" style="background-color:blue">
col style="background-color:yellow">
/colgroup>

728x90
반응형