요소의 종류
| 블록 요소 | 인라인 요소 | 범용 요소 |
|---|---|---|
| - 줄바꿈 속성을 가지고 있음 - 기본 너비 속성이 100% - 블록 요소를 포함할 수 없지만 예외도 있음 - 인라인 요소를 포함할 수 있음 | - 줄바꿈 속성이 없음 - 내용만큼 너비가 유지 - 너비와 높이의 속성을 사용할 수 없음 - 블록 요소를 포함할 수 없으며, 인라인 요소는 포함할 수 있음 | - 블록 요소임에도 모든 요소 포함할 수 있음 |
문단 태그
<p>
단락 구분 요소
ex)
안녕하세요
이주희입니다
<address>
주소 태그
ex)
살짝 기울여서 출력됨...
<hr>
구분선 요소
ex)
<q>
짧은 인용 문구
ex)
안녕하세요
<blockquote>
긴 인용 문구
ex)
안녕하세요
<em>
강조 요소 (글 기울이기)
ex)
안녕하세요
<strong>
강한 강조 요소
ex)
안녕하세요
<abbr>
줄임말(앞글자 줄임) 요소
ex)
TMI
<sup>
윗 첨자 요소
ex)
hello 안녕하세요
<sub>
아래 첨자 요소
ex)
hello 안녕하세요 </sub
<img>
이미지 요소
<a>
링크요소
https://velog.io/write?id=76b2830b-8371-4395-be91-d5d8f2e4914f
<ol>
순차 목록 출력
ex)
- 안녕
- 반가워
<ul>
순차 목록 출력
ex)
- 안녕
- 반가워
<ol>
순차 목록 출력
ex)
<dl>, <dt>, <dd>
제목과 설명이 한쌍인 설명 요소를 만들 때 사용
ex)
제목 내용1 내용2 <dl>, <dt>, <dd>
제목과 설명이 한쌍인 설명 요소를 만들 때 사용
ex)
제목 내용1 내용2<div>, <span>
그룹화 요소
div 태그로 묶어주면 나중에 css로 div에만 수식을 해도 안에 속한 모든 태그들이 같은 명령어를 받아 동일하게 적용됨
span 태그는 인라인 요소라 자신의 content만큼 공간을 차지함
테이블 태그와 속성
<table>
표의 시작과 종료
<caption>
table 제목이나 설명을 작성하는 태그
<tr>
테이블의 행, 자손으로 th나 td가 반드시 있어야 함
<th>
테이블의 제목 셀을 의미하는 태그, 부모인 tr안에 있어야 함
<td>
테이블의 일반 셀을 의미하는 태그, 부모인 tr안에 있어야 함
속성 정리
- border 테이블이 갖고 있는 테이블과 셀 모두 선처리
- width 테이블 가로폭 설정
- cellpadding 칸과 다른 컨텐츠 간격 조절 (안쪽 여백)
- cellspacing 셀과 셀간 간격 조절 (바깥쪽 여백)
셀 병합 속성
- colspan 가로 칸 병합
- rowspan 세로 칸 병합
| 제목셀 | |
|---|---|
| 일반칸 | 일반칸 |
| 일반칸 |
