예제/사이트 만들기 프로젝트

텍스트유형을 만들어 봅시다!

아라라_ 2023. 3. 19. 19:42

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

Frederick Philips Brooks
Mythical Man-Month 저자
728x90

 

 

html

<!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>

    </style>
</head>
<body>
    <section class="text__wrap section center nexon">
        <div class="container">
            <span class="section__small">NOTICE</span>
            <h2 class="section__h2 mb70">아침밥 재료 선정 기준</h2>
            <div class="text__inner">
                <div class="text t1">
                    <h3 class="text__title">영양성분</h3>
                    <p class="text__desc">아침 식사는 우리의 몸과 뇌를 에너지로 충전하는 첫 번째 식사입니다. 아침에 적절한 양의 영양소를 섭취하면 하루 내내 집중력과 기억력이 좋아지고, 몸의 대사 기능도 원활해집니다.</p>
                    <a class="text__btn" href="#">더보기</a>
                </div>
                <div class="text t2">
                    <h3 class="text__title">칼로리</h3>
                    <p class="text__desc">아침밥은 하루 중 첫 식사이기 때문에 체중 증가나 소화 불량 등의 문제가 발생할 수 있습니다. 적당한 칼로리를 유지하면서 영양소를 고루 섭취할 수 있는 것이 좋습니다.</p>
                    <a class="text__btn" href="#">더보기</a>
                </div>
                <div class="text t3">
                    <h3 class="text__title">시간</h3>
                    <p class="text__desc">아침은 일상 생활에서 가장 바쁜 시간 중 하나입니다. 따라서 아침밥은 간단하면서도 영양소가 풍부한 재료로 준비하는 것이 좋습니다. 또한 미리 재료를 준비해두면 시간을 절약할 수 있습니다.</p>
                    <a class="text__btn" href="#">더보기</a>
                </div>
                <div class="text t4">
                    <h3 class="text__title">개인 취향</h3>
                    <p class="text__desc">아침밥은 개인의 취향에 따라 다양한 메뉴를 선택할 수 있습니다. 예를 들어, 샐러드나 샌드위치, 죽 등 다양한 옵션이 있습니다. 따라서 자신이 좋아하는 음식을 선택하여 즐기는 것이 좋습니다.</p>
                    <a class="text__btn" href="#">더보기</a>
                </div>
                <div class="text t5">
                    <h3 class="text__title">건강상태</h3>
                    <p class="text__desc">개인의 건강 상태에 따라 아침밥의 재료를 선택하는 것이 중요합니다. 예를 들어, 당뇨병이나 고혈압 환자는 고당도, 고나트륨 식품을 피하고, 식이섬유가 풍부한 재료를 선택하는 것이 좋습니다.</p>
                    <a class="text__btn" href="#">더보기</a>
                </div>
                <div class="text t6">
                    <h3 class="text__title">가격</h3>
                    <p class="text__desc">아침밥 재료를 선택할 때 가격도 중요한 요소 중 하나입니다. 비용 효율적인 식재료를 선택하여 더 많은 양을 준비하거나 다른 음식에 사용할 수 있습니다.</p>
                    <a class="text__btn" href="#">더보기</a>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

점점 이전에 배우며 만든 것들을 재활용하여 만드는 것들이 많아지고 있습니다. 하지만 여전히 모르는 것들이 많아 이번에는 그런것들을 정리하려고 합니다.

 

reset과 common

/* 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-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 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: #17C37B;
    color: #fff;
    padding: 1px 23px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
}
.section__h2 {
    font-size: 50px;
    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;
}

리셋과 common은 기존에 해왔던 코드를 재활용하여 사용하였습니다.

재활용할 때 페이지마다 필요한 코드가 있고 없는 코드가 있기때문에 재활용하기위해 만든

common은 그대로 사용하거나 수정하여 사용합니다.

 

text__wrap

/* text__wrap */

.text__inner {
    text-align: left;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.text__inner .text {
    width: 33.33333%;
    border: 1px solid #F5F5F5;
    border-radius: 10px;
    padding: 90px 20px 20px 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}
.text__inner .text:hover {
    background-color: #F5F5F5;
}
.text__inner .text::before {
    content: '';
    width: 60px;
    height: 60px;
    background-color: #AF2222;
    background-image: url(../asset/img/textType01_01.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 20px;
    top: 20px;
    border-radius: 50%;
}
.text__inner .text.t1::before {
    background-image: url(../asset/img/textType01_01.png);
    background-color: #E0FFDF;
}
.text__inner .text.t2::before {
    background-image: url(../asset/img/textType01_02.png);
    background-color: #DEFFFB;
}
.text__inner .text.t3::before {
    background-image: url(../asset/img/textType01_03.png);
    background-color: #E3E6FF;
}
.text__inner .text.t4::before {
    background-image: url(../asset/img/textType01_04.png);
    background-color: #FBE5FF;
}
.text__inner .text.t5::before {
    background-image: url(../asset/img/textType01_05.png);
    background-color: #FFFCE5;
}
.text__inner .text.t6::before {
    background-image: url(../asset/img/textType01_06.png);
    background-color: #FFE0E0;
}
.text__title {
    font-size: 24px;
    margin-bottom: 10px;
}
.text__desc {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}
.text__btn {
    float: right;
    position: relative;
    padding-right: 20px;
}
.text__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;
}
.text__btn:hover::before {
    transform: rotate(360deg);
}
속성 속성 설명 속성 내용
box-sizing: border-box; CSS에서 박스 모델의 크기 계산 방법을 설정하는 속성 중 하나입니다.
내용영역의 크기에만 영향을 받지만 이속성을 설정하면 전체 박스모델의 크기까지 영향을 받아 크기가 계산이 됩니다.
 
transition: all 0.3s; CSS에서 요소의 스타일 변화에 애니메이션 효과를 적용할 때 사용하는 속성 중 하나입니다. 모든 속성에 대해 0.3초 동안 애니메이션을 적용하도록 설정한 것입니다. 속성에 대해 0.3초 동안 애니메이션이 적용됩니다.
cursor: pointer; CSS에서 마우스 커서의 모양을 설정하는 속성 중 하나입니다. a태그로 만든 요소가 아니지만 그요소를 버튼처럼 커서를 변경할수 있습니다.
transform: rotate(360deg); CSS에서 요소의 회전 변형을 적용하는 속성 중 하나입니다. 여기서는 플러스 버튼이 360도 돌아가는 효과가 있습니다.

 

 .text__inner .text.t1::before {
    background-image: url(../asset/img/textType01_01.png);
    background-color: #E0FFDF;
}

::before는 CSS에서 사용되는 가상 요소 중 하나입니다. 이 가상 요소를 사용하면 선택한 요소의 내부에 콘텐츠를 추가하거나 변경할 수 있습니다. 선택한 요소의 첫 번째 자식 요소로 삽입됩니다. 이 가상 요소는 content 속성을 사용하여 콘텐츠를 정의할 수 있으며, 다양한 스타일 속성을 사용하여 가상 요소의 스타일을 설정할 수 있습니다.

 

 

 

 

참고

https://github.com/jo0132/web2023/blob/main/site/textType/textType01.html

 

GitHub - jo0132/web2023: 수업시간에 배운 수업 예제입니다.

수업시간에 배운 수업 예제입니다. Contribute to jo0132/web2023 development by creating an account on GitHub.

github.com

https://jo0132.github.io/web2023/site/textType/textType01.html

 

텍스트 유형01

영양성분 아침 식사는 우리의 몸과 뇌를 에너지로 충전하는 첫 번째 식사입니다. 아침에 적절한 양의 영양소를 섭취하면 하루 내내 집중력과 기억력이 좋아지고, 몸의 대사 기능도 원활해집니

jo0132.github.io