프론트엔드/CSS

CSS - 텍스트 관련

ksge7 2020. 8. 23. 21:46

텍스트에 적용할 수 있는 스타일은 굉장히 다양하다.

 

<body>

    <style>
        p{
            font-family: serif; /* 폰트 변경 */
            font-size: 50px; /* 폰트 사이즈 변경 */
            font-weight: bold;  /* 폰트 굵기 변경 */
            font-variant: small-caps; /* 대문자를 소문자 크기에 맞추기 */
            font-style: italic; /* 글자 스타일 지정. 이탤릭체로 변경 가능 */
            color: red; /* 폰트 색상 변경 */
            text-decoration: underline; /* 글자 줄 긋기 */
            text-transform: lowercase; /* 텍스트 대,소문자로 변환하기 */
            text-shadow: 10px 10px 10px blue; /* 텍스트에 그림자 효과 추가하기 */
            letter-spacing: 1px; /* 글자 사이 간격 조절 */
            word-spacing: 1px; /* 단어 사이 간격 조절 */
            text-align: justify; /* 텍스트 정렬  */
            text-indent: 50px; /* 텍스트 들여쓰기  */
            line-height: 100px; /* 텍스트 줄 간격 조절  */
        }
    </style>

    <p> This is HTML, CSS </p>

</body>