프론트엔드 2일차 CSS(문단 관련 속성, 말줄임, 목록 관련 속성, 크기 속성, display)

2024. 1. 15. 09:23ㆍ프론트엔드

5. 글자 간격 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문단 관련 속성</title>
    <style>
        /*direction
        - 글자 쓰기 방향 지정 
        - 왼->오 또는 오->왼
        */
        *{font-size: 20px;}
        .direction1{direction: ltr}
        .direction2{direction: rtl;}
        /* text-ailgn
        - inline 또는 inline-block 요소를 정렬하는 방법을 지정
        -
        */
        .align1{text-align: center;}
        .align2{text-align: left;}
        .align3{text-align: justify;}
        /* 
        text-indent
        - 문단의 들여쓰기. 값에 따라 내어쓰기 효과를 줄 수 있다.
        */
        .indent1{text-indent: 30px; margin-left: 30px;}
        .indent2{text-indent: -30px; margin-left: 30px;}

        /* 
        text-overflow
        - 글자가 영역을 넘어갔을때 처리할 방법을 지정
        - width가 고정이고(넘어가는 영역이 생기기 떄문에), overflow가 hidden이어야함
        */
        .overflow1{text-overflow: clip; white-space: nowrap; width: 400px; overflow:hidden}
        .overflow2{text-overflow: ellipsis; white-space: nowrap; width: 400px; overflow: hidden;}
    </style>
</head>
<body>
    <div class="direction1">왼쪽에서 오른쪽으로</div>
    <div class="direction2">오른쪽에서 왼쪽으로</div>
    <hr>
    <div class="align1">가운데 정렬방법으로 정렬합니다. 정렬합니다.정렬합니다.</div>
    <div class="align2">왼쪽 정렬방법으로 정렬합니다. 정렬합니다.정렬합니다.</div>
    <div class="align3">오른쪽 정렬방법으로 정렬합니다. 정렬합니다.정렬합니다.</div>
    <div class="align">양쪽 정렬방법으로 정렬합니다. 정렬합니다.정렬합니다.</div>
    <hr>
    <div class="align1">
        <!-- block태그인 div태그는  크기가 200ox이지만 가운데 정렬이 안됨
        단, 그 안에 있는 글자는 정렬이 됨. 상속을 받음 -->
        <div style="background-color: yellowl; width: 200px;">안녕하세요</div>
        <img src="https://health.chosun.com/site/data/img_dir/2023/07/17/2023071701753_0.jpg" alt="고양이" width="200">
    </div>
    <hr>
    <div class="indent1">안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요.</div>
    <div class="indent2">안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요.</div>
    <hr>
    <div class="overflow1">안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요.</div>
    <div class="overflow2">안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요.</div>

</body>
</html>

 

6. 말줄임

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>말줄임</title>
    <style>
        [class ^= box] {width: 300px;}
        .box1{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
        .box2{overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;
            display: -webkit-box; -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="box1">한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. </div>
    <hr>
    <div class="box2">한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 
        한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 한줄 예제입니다. 
    </div>
</body>
</html>

7. 목록 관련 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>목록 관련 속성</title>
    <style>
        /* 
        list-style-type
        - 마커 모양을 지정
        list-style-image
        - 마커 모양을 이미지로 개체
        list-style-position
        - 마커의 위치를 조정
        list-style
        - type, position, image 속성을 한번에 적용
        */
        ul, ol{background-color: yellow; margin-top: 10px;}
        li{background-color: gray;}
        .list1{list-style-type: circle ;}
        .list2{list-style-image: url(../../Front/static/마커.png);}
        .list3{list-style-position: inside;}
        .list4{list-style-type: upper-alpha;}
        .list5{list-style: inside url(../../Front/static/마커.png);}
    </style>
</head>
<body>
    <ul class="list1">
        <li>1</li>
    </ul>
    <ul class="list2">
        <li>2</li>
    </ul>
    <ul class="list3">
        <li>1</li>
    </ul>
    <ol class="list4">
        <li>1</li>
    </ol>
    <ol class="list5">
        <li>1</li>
    </ol>
</body>
</html>

8. 크기 속성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>크기속성</title>
    <style>
        /* 
        width, height
        - box-sizing에 따라 의미하는 바가 달라짐
        - box-size : content-box(기본값)인 경우
            - width, height는 컨텐츠의 너비와 높이를 의미
        - box-size : border-box인 경우 
            - width, height는 컨텐츠 + 패딩 + 테두리의 너비와 높이를 의미
        - px : 고정 크기
        - % : 부모 요소 크기의 %
        */
        [class ^= box]{width: 200px; height: 200px; background-color: yellow;
        border: 50px solid black; padding: 20px;}
        /* 
        .box1의 요소의 전체 크기 : 컨텐츠 크기 + 왼쪽 여백 + 오른쪽 여백 + 오른쪽 테두리
                              =>200px + 20px + 20px + 50px + 50px = 340px
        */
        .box1{box-sizing: content-box;}
        /* 
        .box2의 요소의 전체 크기 : 200px =>
        컨텐츠 크기 + 왼쪽 여백 + 오른쪽 여백 + 오른쪽 테두리
         =>200px + 20px + 20px + 50px + 50px = 340px
         컨텐츠 너비 => 60px 
        */
        .box2{box-sizing: border-box;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

9. display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>크기속성</title>
    <style>
        /* 
        width, height
        - box-sizing에 따라 의미하는 바가 달라짐
        - box-size : content-box(기본값)인 경우
            - width, height는 컨텐츠의 너비와 높이를 의미
        - box-size : border-box인 경우 
            - width, height는 컨텐츠 + 패딩 + 테두리의 너비와 높이를 의미
        - px : 고정 크기
        - % : 부모 요소 크기의 %
        */
        [class ^= box]{width: 200px; height: 200px; background-color: yellow;
        border: 50px solid black; padding: 20px;}
        /* 
        .box1의 요소의 전체 크기 : 컨텐츠 크기 + 왼쪽 여백 + 오른쪽 여백 + 오른쪽 테두리
                              =>200px + 20px + 20px + 50px + 50px = 340px
        */
        .box1{box-sizing: content-box;}
        /* 
        .box2의 요소의 전체 크기 : 200px =>
        컨텐츠 크기 + 왼쪽 여백 + 오른쪽 여백 + 오른쪽 테두리
         =>200px + 20px + 20px + 50px + 50px = 340px
         컨텐츠 너비 => 60px 
        */
        .box2{box-sizing: border-box;}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
저작자표시

'프론트엔드' 카테고리의 다른 글

프론트엔드 3일차 CSS(메뉴 예제, background속성, 다단 예제, 테이블 관련 속성, 텍스트 수직 정렬, 테이블 관련 속성, 테이블 예제)  (1) 2024.01.15
프론트엔드 2일차 CSS(테두리 관련 속성, 박스 그림자, 여백, position, visivility, z-index, float)  (1) 2024.01.15
프론트엔드 2일차 CSS(텍스트 관련 속성, 텍스트 그림자, 공백 처리 속성, 글자 간격 속성)  (0) 2024.01.15
프론트엔드 1일차 HTML(폼 관련 태그)  (2) 2024.01.10
프론트엔드 1일차 HTML(멀티 미디어 관련 태그, 하이퍼 링크 태그)  (0) 2024.01.10

관련글

티스토리툴바