html • css

HTML 핵심개념 뽀개기! (2) 텍스트, 리스트

getfeelingsfrom 2024. 7. 20. 21:59

자주 쓰는 텍스트 태그를 정리해보자악.

 

 

제목 태그

h1~h6 까지 더 높은 순서로 갈 수록 작은 제목을 적을 수 있다. 

 

<p>태그 

본문을 작성할 때 사용한다. 

 

<br>태그

제목이나 본문에서 줄 바꿈을 할 때 사용한다.

 

<strong>

굵은 글씨로 표시하여 강조하고 싶을 때 사용한다.

 

<em>

기울어진 글씨로 강조하고 싶을 때 사용한다. 

 

<s>

취소선을 나타내고 싶을 때 사용한다. 

 

<blockquote>, <q>

긴 인용을 나타낼 때는 <blockquote>를 

짧은 인용을 나타낼 때는 <q>를 사용한다. 

 

<hr>

가로선을 그리고 싶을 때 사용한다. 

본문 내용들 사이에 긴 선을 그려 내용은 구분짓고 싶을 때 사용한다. 

 

<sub>, <sup>

작은 크기의 글씨를 위에 붙여서 적고 싶을 때는 위 첨자를 나타내는 <sub>태그를

아래에 붙여서 적고 싶을 때는 작은 첨자를 나타내는 <sup>태그를 사용하여 나타낼 수 있다.

 

<pre>

본문에 적어 둔 html코드를 코드로 인식하는 것이 아니라 본문으로 있는 그대로 출력하기를 원할 때 <pre>코드를 이용한다. 

 

 

<순서 리스트>

순서가 있는 내용을 적을 때는 ol 태그 안에다가 li 태그를 쓰면 정렬된다. 

<ol>

 <li>  가 </li>

 <li> 나 </li>

 <li> 다 </li>

 

</ol> 라고 작성하면 

1. 가

2. 나

3. 다 라고 출력된다. 

 

•순서가 없는 리스트를 적을 때는 ul 태그를 사용한다.

<ul>

 <li>  가 </li>

 <li> 나 </li>

 <li> 다 </li>

</ul>  이라고 작성하면 

다 라고 출력된다.

 

<리스트 종류>

type이라는 속성을 이용하여 순서를 어떻게 표시할 지 정할 수 있다. 

type="a" 라고 하면 abc.. 순으로,

type="A" 라고 하면 ABC.. 순으로, 

type="i" 라고 하면 소문자 로마 숫자 순으로,

type="I" 라고 하면 대문자 로마 숫자 순으로 차례를 매긴다. 

 

list-style 속성을 이용해서도 변경할 수 있다.