본문 바로가기
프로그래밍/소소한 HTML Up

Html : 티스토리 서식 구성을 위한 기본, 텍스트 관련 태그

by 멀티코린 2020. 10. 25.

<head> 태그

- 문서 정보

<meta> 태그

- 문자 인코딩 및 문서 키워드, 요약 정보

 

* 언어 표시 방식을 utf-8 방식으로 채택.

1
2
3
<head>
    <meta charset="utf-8">
</head>
cs

 


<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> 태그를 필수적으로 작성하지 않아도 된다.

 

 

 

댓글