i element - by. UXKM
i element 설명
일반적으로 이 요소는 이탤릭체로 표시됩니다.
HTML 4.01에서 <i> 요소는 이탤릭체의 텍스트로만 표현되었지만, HTML5에서는 반드시 이탤릭체로만 표현되지는 않습니다.
스타일시트를 사용하여 <i> 요소에 포함된 텍스트의 서식을 자유롭게 변경할 수 있습니다.
<i> 요소는 평범한 글자와 구분하기 위해 사용됩니다.
예를 들면, 기술적인 용어(전문용어), 외국어 문구, 소설속 인물의 생각, 다른 언어의 관용구, 문어체, 서양 문헌에 나오는 배 이름 등이 있습니다.
i {
font-style: italic;
}
<i> 요소를 사용할 수 있습니다.
- 강조된 텍스트로 나타낼 떄
<em>요소 사용 - 중요한(중요성) 텍스트로 나타낼 때
<strong>요소 사용 - 창작물의 제목, 작품(책, 플레이, 음악)의 이름을 표시할 때는
<cite>요소 사용 - 용어(term)의 정의 인스턴스를 표시할 때는
<dfn>요소 사용 - 하이라이트된(highlighted) 텍스트로 나타낼 때
<mark>요소 사용
i element 예제
xxxxxxxxxx<html lang="ko"> <head> <title>i element</title> </head> <body> <p> 예전에 <i>block-level</i> 콘텐츠라 불리던것은 이제 HTML5에서 <i>flow</i> 콘텐츠라고 불립니다. </p> <p> <i>타이타닉호</i>는 영국의 화이트 스타 라인이 운영한 북대서양 횡단 여객선이다. 1912년 4월 10일 영국의 사우샘프턴을 떠나 미국의 뉴욕으로 향하던 첫 항해 중에 4월 15일 빙산과 충돌하여 침몰하였다. </p> </body></html>i element
- Reset초기 코드로 되돌립니다.
- Download코드를 html 파일로 다운로드할 수 있습니다.
- FullScreen에디터를 브라우저 기준 전체 화면으로 확장합니다. 조금 더 편리한 코딩이 가능합니다.
- 최소화Result Area를 최소화 합니다.
- 브라우저 전체화면Result Area를 브라우저 기준 전체 화면으로 확대합니다.
- 모니터 전체화면Result Area를 모니터 기준 전체 화면으로 확대합니다.
- 닫기Result Area를 닫습니다. Browser button을 클릭하여 기본 모드로 되돌릴 수 있습니다.
클릭 시 설명 창이 닫힙니다.
<i> vs. <em>
신입 개발자들은 글자를 강조하는데에 왜 이렇게 많은 요소들이 있는지에 대해 혼란스러워합니다.
아마도 <i>와 <em>가 그 중 흔한 경우일 것입니다..
왜 <em></em>와 <i></i>를 사용하는걸까요? 분명 그들은 같은 결과를 나타내는데 말입니다.
하지만 전혀 그렇지 않습니다. 두 태그 모두 기본적으로 이탤릭체로 렌더링되지만 의미론적 뜻이 다릅니다.
<em>은 내용의 강조를 나타내는데에 비해 <i> 태그는 일반적인 글자와 분리된 글자를 나타낼 때 사용합니다.
(책이나 영화의 이름, 외국 단어, 혹은 단어가 의미론적 뜻 대신에 단어의 정의를 나타낼 때는 <cite>를 사용해야 합니다.
<em>은 이런 식으로 쓰일 수 있습니다: "Just do it already!", 또는: "We had to do something about it".
여기서 이탤릭체로 표현된 단어를 읽는 사용자나 소프트웨어는 이 단어는 강조된 단어라고 판단할 겁니다.
<i> 는 이런 식으로 쓰일 수 있습니다: "The Queen Mary sailed last night".
여기서 "Queen Mary" 단어에 추가된 강조나 중요성은 없습니다. 이건 Mary라는 이름을 가진 여왕이 아니라,
Queen Mary라는 이름을 나타내는것 뿐입니다.
<i>에 대한 또 다른 예시로 다음과 같은 문장이 있습니다: "The word the is an article".