[HTML] 기울임체 (이탤릭체, italic) 표현하기

HTML에서 기울임체 (이탤릭체, italic) 표현하기

HTML 태그를 이용하여 이탤릭체를 표현하는 방법은 두 가지가 있다.

<i> 태그와  <em> 태그

<i> 태그

See the Pen html example by anna (@hianna) on CodePen.

<i> 태그는 italic이라는 글자의 약자이다.

<i> 태그 사이에 이탤릭체로 표현하고자 하는 내용을 삽입하면 된다.

<em> 태그

See the Pen html example by anna (@hianna) on CodePen.

<em> 태그는 emphasize의 약자로, 강조한다는 뜻이다.

<i>태그와 마찬가지로

<em>태그 사이에 이탤릭체로 표현하고자 하는 내용을 삽입하면 된다.

그렇다면, 이탤릭체 하나를 표현하는 왜 이렇게 두 가지 태그가 따로 존재하는지 알아보자.

<i>태그와 <em>태그의 차이점

See the Pen html example by anna (@hianna) on CodePen.

위에서 보는 것과 같이 <i> 태그를 사용하든, <em> 태그를 사용하든

화면에 보여지는 모습은 같다.

하지만, 이 둘은 의미론적으로 엄연히 다르다.

<i> 태그는 html의 스타일을 정의하는 태그이다.

단순히 화면에 보여지는 모양을 정의한다.

<em> 태그는 그 이름에서도 그 의미가 드러나듯이

의미적으로 "중요함"을 표현한다.

<i>태그는 강조가 아닌 사람의 이름이나 고유명사를 표기하기 위해 사용하고

<em>태그는 단락안에서 정말 강조하고 싶은 내용이 있을 때 사용하면 된다.

이것이 시맨틱 태그를 활용하는 방식이다.