[HTML]html 태그 - 자주 쓰이는 기본 태그

1. 제목 태그(heading) - <h1> ~ <h6>

<h1>이 가장 크고 <h6>로 갈수록 작아진다

<h1>h1입니다</h1> 
<h2>h2입니다</h2>
<h3>h3입니다</h3>
<h4>h4입니다</h4>
<h5>h5입니다</h5>
<h6>h6입니다</h6>

​

2. 문단 태그(paragraph) - <p>

자동으로 <p></p> 요소 위아래에 여백이 생긴다

<p>이것은 첫번째 문단입니다.이것은 첫번째 문단입니다.이것은 첫번째 문단입니다.이것은 첫번째 문단입니다.이것은 첫번째 문단입니다.</p> 
<p>이것은 두번째 문단입니다.이것은 두번째 문단입니다.이것은 두번째 문단입니다.이것은 두번째 문단입니다.이것은 두번째 문단입니다.</p>

 

​3. 줄바꿈 태그(line-break) - <br>

닫히는 태그가 없다

줄바꿈 1번<br>줄바꿈2번<br><br>줄바꿈3번<br><br><br>설명끝

 

4. 목록 태그(list) - <ol> <ul> <li>

- <ol>은 순서가 있는 목록 태그(order list)
- <ul>은 순서가 없는 목록 태그(unorder list)
- <li>는 목록 요소를 감싸는 태그

<ol>
    <li>요소1</li>
    <li>요소2</li>
</ol> 

<ul>
    <li>요소3</li>
    <li>요소4</li>
</ul>

​※ <ol> 태그 속성

- reversed : 내림차순
- start : 마커 시작 값(숫자로 지정)
- type : 마커 종류(1, A, a, Ⅰ, ⅰ)

<ol reversed>
   <li>요소1</li>
   <li>요소2</li>
</ol>

<ol start="10">
   <li>요소1</li>
   <li>요소2</li> 
</ol>

<ol type="a"> 
   <li>요소1</li> 
   <li>요소2</li>
</ol>

<ol type="a" start="5"> 
   <li>요소1</li> 
   <li>요소2</li> 
</ol>

​

5. 글씨 꾸밈 태그 - <em> <strong> <mark> <b> <i> <u>

- <em>은 텍스트 강조를 위해 사용 : 기본 이탤릭체
- <strong>은 중요한 의미를 가지는 텍스트에 사용
- <mark>는 하이라이트 표현 시 사용
- <b>는 다른 목적 없이 단지 굵게 표현 시 사용
- <i>는 기존과 다른 분위기 텍스트 표현을 위해 사용
- <u>는 밑줄을 표현하기 위해 사용

<em>강조</em> 
<strong>중요한텍스트</strong> 
<mark>하이라이트</mark>
<b>굵게</b> 
<i>이탤릭체</i> <u>밑줄</u>

※ 차이점
<em>과 <i> 그리고 <strong>과 <b>는 시각적으론 같아 보이나 컴퓨터가 인식하기에는 <em>과 <strong>으로 둘러싸인 텍스트를 더 중요하게 받아들인다.

 

6. 하이어링크 태그(hyperlink) - <a>

- 다른 페이지로 연결하기 위해 사용
- "닻을 내리다"는 뜻의 anchor에서 따왔다
- 링크의 목적지를 가리키는 href 속성이 필수로 들어가야 한다

<a href="https://www.naver.com">네이버</a>

※ <a> 태그 속성

- target : 링크 클릭시 열릴 위치 명시
- title : 툴팁으로 링크 설명

<a href="https://www.naver.com" title="네이버홈">네이버</a>

​

---

요약

<h1> ~ <h6> - 제목 표시
<p>- 문단 표시(자동 개행)
<br> - 줄바꿈(닫히는 태그 불필요)
<ol> - 순서 있는 목록(<li> 필수)
<ul> - 순서 없는 목록(<li> 필수)
<li> - 목록 요소
<em> - 이탤릭체 for 강조
<i> - 이탤릭체 for 단순 꾸밈
<strong> - 글씨 굵게 for 중요한 표현
<b> - 글씨 굵게 for 단순 꾸밈
<mark> - 글씨 하이라이트(배경색)
<a> - 하이퍼링크