본문 바로가기
카테고리 없음

CSS 실습 1

by AI읽어주는남자 2025. 5. 28.
반응형

CSS가 들어가니까 티스토리 기본모드에서는 안 보이네요 ㅎㅎ

 

HTML 코드

 

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <link href="실습1.css" rel='stylesheet' />
</head>

<body>

    <div class="title"> <h2> 오늘의 지혜 </h2> </div>
    <hr />
    <div class="firstsentence"> 가장 큰 영광은 <br />
        결코 넘어지지 않음에 있는 것이 아니라, <br />
        넘어질 때마다 <br />
        다시 일어서는 데에 있다.
    </div>
    <hr />
    <div class="nelson"> 넬슨 만델라 </div>
    <hr />
    <div class="think"> 마음에 새기세요</div>
    <hr />
    <div class="secondsentence"> 이 페이지는 <br />
        주어진 CSS 클래스들을 활용하여 <br />
        다양한 텍스트 스타일을 <br />
        표현하는 방법을 보여줍니다.
    </div>
    <hr />
    <div class="lastword">오늘도 빛나는 하루 되세요</div>

</body>

</html>

오늘의 지혜


가장 큰 영광은
결코 넘어지지 않음에 있는 것이 아니라,
넘어질 때마다
다시 일어서는 데에 있다.

넬슨 만델라

마음에 새기세요

이 페이지는
주어진 CSS 클래스들을 활용하여
다양한 텍스트 스타일을
표현하는 방법을 보여줍니다.

오늘도 빛나는 하루 되세요

CSS 코드

.title{
    font-family: "궁서";
    font-size: 30px;
    font-style: italic;
    font-weight: bold;
}

.firstsentence{
    font-family: "";
    color :blue;
    font-weight: bold;
    word-spacing: 10px;
    letter-spacing: 5px;
    text-shadow: 0 0 0.5px blue;
}

.nelson{
    text-align: center;
    color : red;
    text-decoration: underline overline line-through;
    line-height: 150%;
    font-size: 15px;
}

.think{
    text-align: center;
    color : red;
    font-weight: bold;
    text-decoration: underline overline line-through;
    font-size: 25px;
    text-shadow: 0 1 50px red ;
}

.secondsentence{
    font-family: "";
    color :blue;
    font-weight: bold;
    word-spacing: 10px;
    letter-spacing: 5px;
    text-shadow: 0 0 0.5px blue;
}

.lastword{
    text-align: center;
    color : red;
    text-decoration: underline overline line-through;
    font-size: 15px;

}

 

 

반응형