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

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

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

아라라_ 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

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

300x250

GIT 블로그

Loading data ...

시험, 함수, 사이트만들기, javascript, CSS, for문, 코딩, 자바스크립트, 배열, 연산자, 공부, 퀴즈이팩트, while문, if문, 퀴즈만들어보기, 자바스크립트시험, 변수, 랜덤메서드, 객체, html,

Today :
Yesterday :

아라의 WWW