텍스트를 표현하는 다양한 스타일<연습>

홍태경·2021년 2월 8일
0

CSS

목록 보기
4/5
post-custom-banner

<head>
    <meta charset="utf-8">
    <title>line-height</title>
    <style>
        p {
            width:400px;
            border:1px solid #222;
            padding:10px;
            margin:10px;
            /* text-shadow:5px 5px 3px orange; 가로 5 세로5 번지는거3 
            색상 오렌지로 번진다  */
        }

        .tstyle {

            /* text-align :right;  # 글의 정렬을 오른쪽으로 */
            /* line-height: 150% ;  150% = 1.5배 줄 간격 */


        }

        .tstyle-2 {

            /* text-decoration: underline;   밑줄을 긋는다  */
            /* text-decoration: overline ; 통통위에 라인이 생긴다*/

        }

        a {
            /* text-decoration: none;     <텍스트 밑줄을 없앤다 */

        }

        .mylist {
            /* list-style-type: square;  ul 라인이 네모로 바뀜
            or list-style:로 줄여서 사용 가능  */
            
            /* list-style-type: upper-alpha;  ul 라인이 a,b,c,d로 바뀜
            or list-style:로 줄여서 사용 가능 */

        }
    </style>


</head>

<body>
    <p class="tstyle">껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은
        한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고,
        과육이 붉고 <span class="tstyle-2"> 통통</span> 하다.
    이 링크는 <a href="#">여기를 참조</a> 해야 한다 </p>
    
    <ul class="mylist">
        <li> Do it 시리즈  </li>
        <li> 된다 시리즈 </li>
        <li> DCM 프로 사진가  </li>
        <li> 데이터 과학 시리즈  </li>

    </ul>

    <ol class="book2">
        <li> Do it 시리즈  </li>
        <li> 된다 시리즈 </li>
        <li> DCM 프로 사진가  </li>
        <li> 데이터 과학 시리즈  </li>

    </ol>

</body>

표 디자인 변경

collapse = 표 라인을 2줄에서 한줄로

profile
나의 에고를 인정하고 사랑하자
post-custom-banner

0개의 댓글