본문 바로가기

HTML 예제

텍스트 스타일링 연습

반응형


텍스트 스타일링을 연습하기 위한 간단한 HTML 코드를 제공합니다. 이 코드는 텍스트를 다양한 스타일로 꾸미는 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>텍스트 스타일링 연습</title>
    <style>
        /* 텍스트 스타일링 */
        .red-text {
            color: red;
        }
        .bold-text {
            font-weight: bold;
        }
        .italic-text {
            font-style: italic;
        }
        .underline-text {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>텍스트 스타일링 연습</h1>
    
    <p class="red-text">이 텍스트는 빨간색입니다.</p>
    <p class="bold-text">이 텍스트는 굵게 표시됩니다.</p>
    <p class="italic-text">이 텍스트는 이탤릭체로 표시됩니다.</p>
    <p class="underline-text">이 텍스트는 밑줄이 그어집니다.</p>
</body>
</html>


위 코드에서는 CSS를 사용하여 텍스트의 색상, 굵기, 이탤릭체, 밑줄 스타일을 변경하고 있습니다. 클래스를 사용하여 각 텍스트에 원하는 스타일을 적용하고 있습니다.

 

결과 보기

반응형

'HTML 예제' 카테고리의 다른 글

동적으로 이미지 변경  (1) 2023.12.08
사용자 정보 입력 받기  (0) 2023.12.07
화면 스크롤 이벤트  (0) 2023.12.07
간단한 메뉴 디자인  (0) 2023.12.07
사진 크기 조절하기  (0) 2023.12.07