본문 바로가기
프론트엔드 개발자/CSS

GRID 끝판왕 클론코딩으로 완벽 파헤치기 , GRID 완벽 분석하기 grid를 사용해보자 (3)

by 신디블로그 2023. 4. 18.
SMALL

 

 
대표사진 삭제
  • 사진 편집
  •  
  • 작게문서 너비옆트임
  •  
  • 삭제

사진 설명을 입력하세요.

 

 
    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       
        body {
            padding: 50px;
        }
        li {
            list-style: none;
        }

        .list {
            width: 1372px;
            margin: 0 auto;
            border-bottom: 10px solid #000;
            display: grid;
            grid-template-columns: 325px 325px 674px;
            grid-template-rows: 300px 300px;
            gap:24px;
        }

        .list li {
            background-color: #fc0;
        }

        .list li:nth-child(1) {
            grid-column: 1 / 3;
        }

        .spacer {
            height: 50px;
        }

        .list1 {
            width: 1372px;
            margin: 0 auto;
            border-bottom: 10px solid #000;
            display: flex;
            flex-wrap: wrap;
            gap:24px;
        }
        .list1 li {
            flex:none;
            height: 300px;
            background-color: #fc0;
        }
        .list1 li:nth-child(1),
        .list1 li:nth-child(2),
        .list1 li:nth-child(5) {
            width: 674px;
        }
        .list1 li:nth-child(3),
        .list1 li:nth-child(4) {
            width: 325px;
        }

        .branch {
            width: 822px;
            margin: 0 auto;
            border-bottom: 10px solid #000;
            display: grid;
            grid-template-columns: repeat(5, 158px);
            grid-template-rows: repeat(4, 52px);
            gap:10px 8px;
        }
        .branch li {
            border: 1px solid #aaa;
            border-radius: 5px;
            text-align: center;
            line-height: 50px;
        }
        .branch li:hover {
            border-color: #fc0;
            color:#fc0;
        }

        .obj {
            width: 860px;
            margin: 0 auto;
            border-bottom: 10px solid #000;
            display: grid;
            grid-template-columns: 420px 420px;
            gap:20px;
        }
        .obj li h3 {
            text-align: center;
            border: 1px solid #aaa;
            border-radius: 5px;
            line-height: 91px;
            background-color: #fc0;
            margin-bottom: 12px;
        }

        .obj li ul {
            border: 1px solid #aaa;
            border-radius: 5px;
            padding : 35px 47px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            font-size: 13px;
            color : #111;
            letter-spacing: -1px;
           
        }

        .obj li ul li{
            list-style: disc;
        }

        .ceo {
            width: 860px;
            margin: 0 auto;
            border-bottom: 10px solid #000;
            display: grid;
            grid-template-columns: repeat(3, 275px);
            grid-template-rows: repeat(6, 156px);
            gap: 16px;
        }

        .ceo > li {
            background-color: #ccc;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 20px;
           
        }

        .ceo > li .img-box {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: #fc0;
        }

        .ceo > li .c-list {
            width: 115px;
            text-align: center;
        }


    </style>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="spacer"></div>
    <ul class="list1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="spacer"></div>
    <ul class="branch">
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
        <li>서울지역본부</li>
    </ul>
    <div class="spacer"></div>
    <ul class="obj">
        <li>
            <h3>모두가 누리는 연금복지서비스 구현</h3>
            <ul>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
            </ul>
        </li>
        <li>
            <h3>모두가 누리는 연금복지서비스 구현</h3>
            <ul>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
            </ul>
        </li>
        <li>
            <h3>모두가 누리는 연금복지서비스 구현</h3>
            <ul>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
            </ul>
        </li>
        <li>
            <h3>모두가 누리는 연금복지서비스 구현</h3>
            <ul>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
                <li>가입자 확대 및 관리 고도화</li>
            </ul>
        </li>
    </ul>
    <div class="spacer"></div>
    <ul class="ceo">
        <li>
            <div class="img-box"></div>
            <ul class="c-list">
                <li>1대</li>
                <li>홍길동</li>
                <li>2022.01.01</li>
                <li>2022.01.01</li>
            </ul>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
LIST
저작자표시 비영리 변경금지

'프론트엔드 개발자 > CSS' 카테고리의 다른 글

GRID로 레이아웃 만들기 , GRID 완벽 분석하기 grid를 사용해보자 (2)  (0) 2023.04.18
GRID 완벽 분석하기 grid를 사용해보자 (1)  (0) 2023.04.18
flex-item 속성 flex-grow, flex-shrink , flex-basis 사용하기  (0) 2023.04.10
CSS 애니메이션 효과 _ 카드박스 효과내기(2)  (0) 2023.04.07
CSS 애니메이션 효과 _ 카드박스 효과내기(1)  (0) 2023.04.07

관련글

댓글

티스토리툴바