2. HTML 이론 ( 강조, 줄바꿈, Emphasis , strong, b, em, i, br )

Emphasis : 강조

의미를 강조할 때 사용하는 tag 배우기

​

크게 strong / em 두 개의 tag가 있다.

​

그렇다면 차이점이 무엇일까?

​

strong은

문자를 진하고 두껍게 만들어준다.

​

em은

문자를 진하고 두껍게 만들어주지는 않지만

이탤릭체로 기울여서 표현된다.

예) em을 사용했을 때의 모양

​

형태만 차이가 있을 뿐

의미적으로 강조되는 건 같기 때문에

둘 중 쓰고 싶은 거 사용하면 된다.

​

이와 비슷한 tag로

b tag 와 i tag가 있는데

​

b tag 는 strong tag 와 같이

문자를 진하고 두껍게 만들어주지만

의미를 강조하지 않는다.

​

i tag도 마찬가지로

em 과 같이 이탤릭체로 표현되지만

의미를 강조하지 않는다.

​

실전 예제)

위의 사진을 HTML 태그로 표현해 보자

<h1>HTML 요소</h1>
		<p>
			HTML 문서는 완전한 <strong>HTML 요소</strong>로 구성되어 있고, HTML 요소의 가장 보편적인 형태는 세 가지 구성
			요소를 가진다: "시작 태그"(Start Tag)와 "종료 태그"(End Tag) 와 같은<strong><i>태그</i></strong> 한 쌍; 몇
			가지 요소 <strong><i>속성</i></strong
			>은 그 태그들 내에서 특성을 부여한다. 마지막으로 문자와 그래픽 정보 <em>콘텐츠</em>를 화면에 표현한다.
		</p>

 

strong tag 안에 i tag를 넣어도 되고

em tag 안에 b tag를 넣어도 무방하다.

​

마지막으로 br tag를 알아보자

brtag는 한 줄 내려주는 tag이다.

​

위 사진에서

" 내린다. " 다음 한 줄 내려온 것을 알 수 있는데

문단으로 나뉜 게 아니라 줄 바꿈이기 때문에

굳이 p tag를 한 번 더 쓸 필요가 없다.

간단하게 brtag를 사용하여 내려쓰도록 하자.

<h1>데이터 형식</h1>
		<p>
			HTML은 스크립트 데이터와 스타일시트 데이터, 그리고 ID, 이름, URI, 숫자 길이의 단위, 언어, 미디어 기술자,
			색상, 문자 인코딩, 날짜와 시간 등을 포함하는 속성 값의 종류를 위한 몇 가지 데이터 형태를 정의 내린다.<br />
			이러한 모든 데이터 형식은 문자 데이터를 최적화하기 위하여 분리되었다.
		</p>

 

br 태그를 통하여 아주 쉽게 줄 바꿈을 할 수 있다.

​

​

강조형 tag들

<b>굵게</b>
<strong>굵게(강조)</strong>
<i>이탤릭</i>
<em>이텔릭(강조)</em>
<u>밑줄</u>
<ins>밑줄</ins>
<tt>타자</tt>
<sup>위첨자</sup>
<sub>아래첨자</sub>
<s>가로선</s>
<del>가로선</del>
<small>한단계 작게</small>
<big>한단계 크게</big>