HTML에서 텍스트를 기울임꼴(이탤릭)로 만드는 방법 총정리

HTML에서 텍스트를 기울임꼴로 만드는 방법

HTML에서 텍스트를 기울임꼴(이탤릭)로 표시하려면 ... 태그 또는 ... 태그를 사용하면 됩니다. 두 태그 모두 화면에는 같은 형태로 렌더링되지만, 그 의미에는 차이가 있습니다.

 태그는 단순히 시각적으로 기울임꼴을 적용할 때 사용되는 반면,  태그는 구문(phrase) 태그로서 해당 텍스트가 '강조(emphasis)'된 내용임을 의미론적으로 나타냅니다. 따라서 스크린 리더 등 보조 기술이나 검색 엔진에게 텍스트의 중요성을 전달하고 싶다면  태그를 사용하는 것이 좋습니다.

또한 참고로, HTML과 CSS를 함께 활용하면 CSS의 font-style 속성으로도 동일한 결과를 얻을 수 있습니다.

예제 1: 태그 사용하기

아래 코드를 실행하여 ... 태그로 텍스트를 기울임꼴로 만드는 방법을 직접 확인해 보세요.

라이브 데모

<!DOCTYPE html>
<html>
    <head>
        <title>HTML italic text</title>
    </head>

    <body>
        <h1>Products</h1>
        <p>
            Our products: <em>Online HTML Editor</em> and <em>Online Image Editor</em>.
        </p>
    </body>
</html>

예제 2: CSS font-style 속성 사용하기

다음은 CSS의 font-style 속성을 사용하여 텍스트를 기울임꼴로 만드는 예제입니다. 인라인 스타일뿐만 아니라 별도의 스타일시트에 정의해서 여러 요소에 일괄 적용할 수도 있습니다.

라이브 데모

<!DOCTYPE html>
<html>
    <head>
        <title>HTML italic text</title>
    </head>

    <body>
        <h1>Our Products</h1>
        <p style="font-style: italic;">Learning website</p>
    </body>
</html>

정리

 태그: 시각적인 기울임꼴만 필요할 때 사용
 태그: 텍스트를 의미론적으로 강조할 때 사용 (접근성에 유리)
CSS font-style 속성: 스타일을 일관되게 관리하고 싶을 때 사용

HTML에서 텍스트를 기울임꼴(이탤릭)로 만드는 방법 총정리

HTML에서 텍스트를 기울임꼴로 만드는 방법

예제 1: <em> 태그 사용하기

예제 2: CSS font-style 속성 사용하기

정리