<head> 태그
- 문서 정보
<meta> 태그
- 문자 인코딩 및 문서 키워드, 요약 정보
<body> 태그
- 화면에 보일 내용
<hn> 태그
- 제목 작성
- 예시/ <h1> </h1>
<p> 태그
- 단락만들기
- 더 쉬운 의미로는 줄바꿈이 있는 텍스트라고 생각하면 됨. 하나의 단락, 단락
<br> 태그
- 줄바꿈
- Enter와 같은 의미로 보아도 됨.
<hr> 태그
- 수평 줄 삽입
- css를 사용해 여러가지 스타일의 줄 삽입이 가능
- 닫는 태그 없음
<blockquote> 태그
- 인용문 넣기
<pre> 태그
- 입력한 그대로 화면에 표시
- 원래 html은 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시됨. 하지만 <pre>태그를 사용할 경우 화면에 입력한 그대로 내용이 노출될 수 있음.
<body>안에 목록 생성하기
<ul> , <li> 태그
- 순서 없는 목록 생성
- <ul> 태그 먼저 작성 후 <ul> 태그 안에 작성하기 원하는 목록만큼 <li>태그로 내용을 작성하면 됨.
- 목록의 스타일은 마찬 가지로 스타일을 지정해서 변경할 수 있음.
- ul= unordered list
1
2
3
4
5
|
<ul>
<li> 목록1 </li>
<li> 목록2 </li>
<li> 목록3 </li>
</ul>
|
cs |
<ol> , <li> 태그
- 순서 있는 목록 생성
- <ol> 태그 먼저 작성 후 <ol> 태그 안에 작성하기 원하는 목록만큼 <li>태그로 내용을 작성하면 됨.
- 목록의 스타일은 마찬 가지로 스타일을 지정해서 변경할 수 있음.
- <ol> 태그의 경우 순서 목록 생성이기 때문에 type , start, reserved 속성을 지정하지 않을 경우 기본 default값으로 순서 있는 목록이 생성된다.
- ol= ordered list
- type 속성 : 순서의 종류
> 숫자, 영문 소문자, 영문 대문자, 로마숫자 소문자 등
- start 속성 : 시작한 숫자 번호
> 지정하지 않을 경우 기본값은 1부터
- reserved 속성 : 역순 표시
1
2
3
4
5
6
7
8
9
10
11
|
<ol type="a">
<li> 목록1 </li>
<li> 목록2 </li>
<li> 목록3 </li>
</ol>
<ol type="a" start="4">
<li> 목록4 </li>
<li> 목록5 </li>
<li> 목록6 </li>
</ol>
|
cs |
* <li> 태그는 여러 항목을 나열될 때 </li> 태그를 생략해도 다음에 <li> 태그가 나오면 자동으로 </li>태그가 있다는 것처럼 인식할 수 있어 </li> 태그를 필수적으로 작성하지 않아도 된다.
'프로그래밍 > 소소한 HTML Up' 카테고리의 다른 글
HTML 코드 온라인에서 바로 보기 : CodePen (0) | 2020.10.11 |
---|
댓글