[2023 사이트 프로젝트] 카드 유형

무근본 일반인 2023. 3. 7. 20:08

2023. 3. 7. 20:08

728x90

카드 유형 사이트

완성화면

카드 유형 사이트 - 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 유형01</title>

    <link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">

    <style> 
        /* reset */
         * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color:#000;
        }
        h1,h2,h3,h4,h5,h6 {
            font-weight: normal;
        }
        img {
            vertical-align: top;
            width: 100%;
        }
        .mt10 {margin-top: 10px !important;}
        .mt20 {margin-top: 20px !important;}
        .mt30 {margin-top: 30px !important;}
        .mt40 {margin-top: 40px !important;}
        .mt50 {margin-top: 50px !important;}
        .mt60 {margin-top: 60px !important;}
        .mt70 {margin-top: 70px !important;}

        .mb10 {margin-top: 10px !important;}
        .mb20 {margin-top: 20px !important;}
        .mb30 {margin-top: 30px !important;}
        .mb40 {margin-top: 40px !important;}
        .mb50 {margin-top: 50px !important;}
        .mb60 {margin-top: 60px !important;}
        .mb70 {margin-top: 70px !important;}

        /* common */
        .container {
            width: 1160px;
            margin: 0 auto;
            padding: 0 20px;
            /* background-color: rgba(0,0,0,0.1); */
        }
        .nexon {
            font-family: 'NexonLv1Gothic';
            font-weight: 400;
        }
        .section {
            padding: 120px 0;
        }
        .section.center {
            text-align: center;
        }
        .section__small {
            font-size: 14px;
            border-radius: 50px;
            background-color: #AC43FF;
            color: #fff;
            padding: 0 23px;
            text-transform: uppercase;
            margin-bottom: 1px 20px;
            display: inline-block;
        }
        .section__h2 {
            font-size: 50px;
            color: #000;
            font-weight: 400;
            margin-bottom: 30px;
            line-height: 1;
        }
        .section__desc {
            font-size: 22px;
            color: #666;
            margin-bottom: 70px;
            font-weight: 300;
            line-height: 1.5;
        }
        .text__wrap {
            
        }
        .text__inner {
            text-align: left;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .text__inner .text {
            width: 32.3333333%;
            border:  1px solid #f5f5f5;
            padding: 90px 20px 20px 20px;
            border-radius: 10px;
            box-sizing: border-box;
            margin-bottom: 20px;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
        }
        .text__inner .text:hover {
            background-color: #ece0f8;
        }
        .text__inner .text::before {
            content: '';
            width: 60px;
            height: 60px;
            background-color: rgba(147, 87, 245, 0.76);
            background-image: url(../asset/img/textType01_01.svg);
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            left: 20px;
            top: 20px;
            border-radius: 50%;
        }
        .text__inner .text::after {
            content: '';
        }
        .text__title {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .text__desc {
            font-size: 16px;
            color: #666;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .tetx__btn {
            float: right;
            position: relative;
            padding-right: 20px;
        }
        .tetx__btn:hover::before {
            transform: rotate(360deg);
        }
        .tetx__btn::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            height: 15px;
            background-image: url(../asset/img/icon_plus.svg);
            transition: all 0.3s;
        }
    </style>
</head>
<body>
    <section class="text__wrap section center nexon">
        <div class="container">
            <span class="section__small">notice</span>
            <h2 class="section__h2 mb70">About the Milky way</h2>
            <div class="text__inner">
                <div class="text">
                    <h3 class="text__title">명칭 및 어원</h3>
                    <p class="text__desc">우리 은하의 명칭은 “Milky Way(밀키 웨이)”입니다. 그러나 밀키 웨이는 우리 은하 뿐 아니라 은하수 자체를 가리키기도 합니다. 은하수들도 각각의 명칭이 있습니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                        <h3 class="text__title">갤러틱 할로(Galactic Halo)</h3>
                        <p class="text__desc">은하 중심부를 둘러싸고 있는 둥근 모양의 거대한 구조물 입니다. 은하 중심부에 위치한 은하 플레어와 달리, 할로는 무수히 많은 별, 암석체, 가스, 먼지 등이 혼합된 구조물입니다.</p>
                        <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                    <h3 class="text__title">은하 헤일로(Galaxy Hale)</h3>
                    <p class="text__desc">은하 헤일로는 아메리칸 천문학자 조지 엘리슨 헤일이 처음으로 제안한 은하 분류 체계입니다. 이 체계는 은하를 크기와 모양에 따라 4가지 유형으로 분류하고 있습니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                    <h3 class="text__title">우리 은하의 구조</h3>
                    <p class="text__desc">우리 은하는 막대 나선 은하에 속하며, 허블의 은하 분류에 따르면 Sbc(중심에 막대가 존재하고 나선팔이 느슨히 감긴 형태)입니다. 막대 구조는 대부분 붉고 오래된 항성들로 구성되어 있습니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                    <h3 class="text__title">우리 은하의 블랙홀</h3>
                    <p class="text__desc">우리 은하를 구성하는 별들은 은하의 중심부를 중심으로 나선팔 모양으로 공전합니다. 이는 은하 중심에 초대질량 블랙홀이 있기 때문이라 여겨집니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
                <div class="text">
                    <h3 class="text__title">우리 은하의 팔</h3>
                    <p class="text__desc">우리 은하에는 네 개의 큰 나선 팔이 있다고 여겨졌으나, 2008년에 스피처 적외선 망원경을 이용하여 1억 개 이상의 별의 분포를 분석한 결과, 단지 2개의 나선 팔만이 구분되었습니다.</p>
                    <a class="tetx__btn" href="#">더 보기</a>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

1. a

a {
            text-decoration: none;
            color:#000;
        }

: 링크 즉, 하이퍼링크에 생기는 글자색이 파랗게 변하는 속성, 밑줄이 그려지는 속성, 하이퍼링크 클릭 시 글자색과 밑줄 색이 변하는 스타일 속성을 없애고, 글자를 #00000 검은 색으로 바꾸는 코드입니다.

2. mt10~70, mb10~70

.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}

.mb10 {margin-top: 10px !important;}
.mb20 {margin-top: 20px !important;}
.mb30 {margin-top: 30px !important;}
.mb40 {margin-top: 40px !important;}
.mb50 {margin-top: 50px !important;}
.mb60 {margin-top: 60px !important;}
.mb70 {margin-top: 70px !important;}

:section__h2 클래스가 여러 곳에서 중복으로 사용되는 클래스이기 때문에 이 페이지에 있는 h2 태그에 여백 속성을 지정하면 다른 페이지에 있는 section__h2 클래스를 가지고 있는 요소 모두에 속성이 지정 되어버리기 때문에 필요 시에만 알맞은 속성을 사용할 수 있도록, 그리고 여백 속성이 제일 먼저 우선순위를 가지도록 작성한 코드입니다.

3. .text__btn::before ~

.tetx__btn::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            height: 15px;
            background-image: url(../asset/img/icon_plus.svg);
            transition: all 0.3s;

.tetx__btn:hover::before {
            transform: rotate(360deg);
        }

.text__btn::before

content: ' '; : 가상 요소의 내용을 비워둠을 의미합니다.

position: absolute; : 가상 요소를 절대적으로 배치합니다.

right : 0, top: 0 : 가상 요소를 부모 요소의 오른쪽 상단에 배치합니다.

widht 15px, height: 15px : 가상 요소의 크기를 지정합니다.

background-image: url(../asset/img/icon_plus.svg); : 가상 요소에 사용할 이미지를 지정합니다.

transition: all 0.3s;는 모든 속성에 대해 0.3초 동안 전환 효과를 부여합니다.

:before

:선택한 요소의 내용의 앞부분에 가상 요소를 생성합니다.

hover

:선택한 요소에 마우스 커서를 올리면 작동하는 css 선택자입니다.

.text_btn::hover::before

:버튼 요소에 마우스를 올렸을 때 아이콘을 회전 시키기 위한 css 선택자 입니다.

transform: rotate(360deg); : 요소를 회전 시키는 css 속성입니다.

4. position

.parent{					//부모요소
position : relative;		
}

.child{						//자식요소
position : absolute;		
top : 20px
left: 30px
}

position: absolute;

: 요소를 원하는 위치에 정확하게 배치할 수 있습니다. 이 속성을 사용하면 해당 요소가 다른 요소들의 위치에 영향을 받지 않고 가장 가까운 조상 요소중 position 값이 relative나 absolute인 요소를 기준으로 위치를 지정합니다.

position: relative;

: 요소의 위치를 상대적으로 이동시키기 위해 사용되는 css 속성입니다. 이 속성을 사용하면 요소가 원래 있던 위치를 기준으로 위치를 이동시킬 수 있습니다.

예시에서의 top과 left 속성은 부모 요소를 기준으로 상대적으로 조정 되며, 부모 요소 내에서 자식 요소의 위치가 결정됩니다.

Fiat Lux