<html>, <head>, <body>, <title>과 같은 기본 형식 태그들은
시리즈의 첫 글에서 다루고 있습니다.
목차
1. <br> 태그
2. <hr> 태그
3. <h1> ~ <h6> 태그
4. <p> 태그
5. <pre> 태그
6. <b> 태그와 <strong> 태그
7. <i> 태그와 <em> 태그
8. <mark> 태그
9. <small> 태그
10. <del> 태그와 <ins> 태그
11. <sub> 태그와 <sup> 태그
1. <br> 태그
line [br]eak 를 의미하며
줄바꿈(개행)을 하는 태그입니다.
HTML 문서를 작성하며 엔터를 입력해 개행해도
실제 출력에선 개행이 되지 않습니다.
따라서 줄바꿈을 하고 싶거나 사이에 한줄을 띄우고 싶다면
<br> 태그를 이용하면 됩니다.
br 태그를 사용하지 않았을 때
<body> br 태그를 사용하지 않았을 때 1. 월요일 2. 화요일 3. 수요일 </body>출력 결과
br 태그를 사용하지 않았을 때 1. 월요일 2. 화요일 3. 수요일
br 태그를 사용했을 때
<body> br 태그를 사용했을 때<br> 1. 월요일<br> 2. 화요일<br> 3. 수요일<br> </body>출력 결과
br 태그를 사용했을 때 1. 월요일 2. 화요일 3. 수요일
2. <hr> 태그
[h]orizontal [r]ule 을 의미하며
수평(horizontal)선, 가로선을 긋는 태그입니다.
태그의 여러 속성들을 정의하여
원하는 색상, 길이, 두께의 가로 선을 원하는 위치에 그을 수 있습니다.
예시 코드
<body> <hr> <hr color="red"> <hr color="#ff0000"> <hr color="lightgreen" width="200px" align="right"> <hr color = "#0000FF" width = "70%" align="left"> <hr style="width: 300px;height: 10px;background-color: blue"> </body>출력 결과
3. <h1> ~ <h6> 태그
[h]eding + 숫자 n을 의미하며
텍스트의 크기를 지정해 줄 수 있는 태그입니다.
h1이 가장 큰 크기로, h6으로 갈 수록 점점 크기가 작아집니다.
만약, <h1> ~ <h6> 태그에서 원하는 텍스트 크기가 없다면
아래의 예시에서처럼 style 속성으로 직접 텍스트 크기 조절이 가능합니다.
예시 코드
<body> <h3 style="font-size: 50px">아무 h숫자 태그 + style</h3> <h1>h1 글자크기</h1> <h2>h2 글자크기</h2> <h3>h3 글자크기</h3> <h4>h4 글자크기</h4> <h5>h5 글자크기</h5> <h6>h6 글자크기</h6> </body>출력 결과
4. <p> 태그
[p]aragraph 를 의미하며
문단을 나누는 태그입니다.
신문 기사나 에세이 등의 글을 보면
글들이 적절한 문단으로 나뉘어 있는 것을 볼 수 있는데,
<br> 태그로 매번 줄바꿈을 하지 않고
<p> 태그를 이용해 문단을 나눠줄 수 있습니다.
그리고 단락의 앞 뒤에 자동으로 공백이 추가됩니다.
예시 코드
<body> <p>1문단 내용...</p> <p>2문단 내용...</p> <p>3문단 내용...</p> <p>4문단 내용...</p> </body>출력 결과
5. <pre> 태그
[pre]formatted Text 를 의미하며
텍스트의 공백, 줄바꿈을 모두 유지한채로
출력할 수 있게 해주는 태그이다.
HTML문 코드를 작성하면서 br 태그에서 언급했던 것 처럼
엔터로 줄바꿈을 해도 출력에 줄바꿈되어 반영되지 않으며
스페이스바를 통한 연속된 공백도
하나만을 반영하는 등 불편함이 있습니다.
하지만 <pre> 태그의 내부에선 위의 엔터로 인한 줄바꿈,
스페이스바로 인한 연속된 공백이 전부 반영되어 출력됩니다.
또한 내부 텍스트들이 전부 고정 너비의 글꼴로 표시되는 특징이 있습니다.
(기본적으론 Courier 글꼴)
예시 코드
<body> <pre> 1.월요일 2.화요일 3.수요일 4.목 요일 </pre> </body>출력 결과
6. <b> 태그와 <strong> 태그
<b> 태그는
[b]old 를 의미하며
<strong> 태그는
Displays text as [strong]ly emphasized 를 의미합니다.
두 태그를 함께 설명하는 이유는
두 태그로 인한 결과물이 겉으로 보았을 때 같기 때문입니다.
두 태그 모두 텍스트에 Bold(굵게) 효과를 줍니다.
둘다 같은 효과를 주지만, 서로 다른 태그로 존재하는 이유는
<b> 태그의 경우 텍스트 내용의 중요함은 없지만 Bold 효과를 주고 싶을 때,
<strong> 태그의 경우 텍스트의 내용이 정말 중요하면서 Bold 효과를 주고 싶을때 사용합니다.
위처럼 중요도에 따라 태그를 달리 사용하고,
css 태그인 <style>이라는 태그를 활용해 정말 중요시하는 텍스트에만
추가적으로 글자색, 배경색 등의 스타일 옵션을 주는 등
중요도에 따른 차별을 둘 수 있습니다.
예시 코드
<body> <pre style="font-size: 20px"> 1.<b>월</b>요일 2.화요일 3.<strong>수</strong>요일 4.목요일 </pre> </body>출력 결과
7. <i> 태그와 <em> 태그
<i> 태그는
[i]talic 를 의미하며
<em> 태그는
Displays text [em]phasized (generally italicized)을 의미합니다
두 태그를 함께 설명하는 이유는
위에서 본 b태그와 strong태그와 같이
겉으로 보았을 때 효과가 같기 때문입니다.
두 태그 모두 텍스트에 italic(기울기) 효과를 줍니다.
둘다 같은 효과를 주지만, 서로 다른 태그로 존재하는 이유는
<i> 태그의 경우 텍스트 내용의 중요함은 없지만 Italic 효과를 주고 싶을 때,
<em> 태그의 경우 텍스트의 내용이 정말 중요하면서 Italic 효과를 주고 싶을때 사용합니다.
위처럼 중요도에 따라 태그를 달리 사용하고,
<style>이라는 태그를 활용해 정말 중요시하는 텍스트에만
추가적으로 글자색, 배경색 등의 스타일 옵션을 주는 등
중요도에 따른 차별을 둘 수 있습니다.
예시 코드
<body> 1.<i>월</i>요일 <br> 2.화요일 <br> 3.<em>수</em>요일 <br> 4.목 요일 <br> </body>출력 결과
8. <mark> 태그
<mark> 태그는
태그의 이름 그대로 표시하다 라는 의미를 가지고 있습니다.
중요하게 표시해야 하는 텍스트에 사용하며
기본적으로 해당 텍스트에 노란색 배경색을 주는 효과가 있습니다.
이 역시 원하는 배경색이나 글자색이 있다면 css의 <style> 태그를 활용해 변경해줄 수 있습니다.
예시 코드
<body> 1.<mark>월요일</mark> <br> 2.화요일 <br> 3.<mark>수</mark>요일 <br> 4.목 요일 <br> </body>출력 결과
9. <small> 태그
<small> 태그는
태그의 이름 그대로 작은 이라는 의미이며
텍스트의 크기를 작게 만들어주는 효과를 가지고 있습니다.
크기를 고정된 크기로 줄여주는 효과이기 때문에
좀더 작은 크기나 원하는 크기로 조정하려면
<font> 태그를 쓰거나 태그 내 style 속성을 활용해 줄이면 됩니다.
예시 코드
<body> 1.<small>월요일</small> <br> 2.화요일 <br> 3.<small>수</small>요일 <br> 4.목 요일 <br> </body>출력 결과
10. <del> 태그와 <ins> 태그
<i> 태그는
Displays text as [del]eted 를 의미하며
삭제된 텍스트를 표시한다는 의미를 가집니다.
<ins> 태그는
Defines [ins]erted text을 의미하며
추가된 텍스트를 정의한다는 의미를 가집니다.
del 태그의 경우 삭제된 텍스트라고 알려주기 위한 태그로
사용시 텍스트에 취소선이 그어지는 효과가 있습니다.
ins 태그의 경우 추가된 텍스트라고 알려주기 위한 태그로
사용시 텍스트에 밑줄이 그어지는 효과가 있습니다.
예시 코드
<body> 1.월요일 <br> 2.화요일 <br> 3.<del>화</del><ins>수</ins>요일 <br> 4.목 요일 <br> </body>출력 결과
11. <sub> 태그와 <sup> 태그
<sub> 태그는
Display as [sub]script 를 의미하며
아랫첨자 텍스트를 넣을 때 사용됩니다.
<sup> 태그는
Display as [sup]erscript을 의미하며
윗첨자 텍스트를 넣을 때 사용됩니다.
예시 코드
<body> H<sub>2</sub>O <br> 2<sup>2</sup> = 4 <br> </body>출력 결과
