Website 만들기에 대해서 알아보자

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

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

figma로 만든 다음의 텍스 유형을 코딩으로 만들어 보겠습니다.

링크: 텍스트 유형 (daanbi1345.github.io)

간략한 설명:

마우스 오버 효과를 넣어서 만들어 봤습니다.

롤오버 또는 Hover란 이미지, 텍스트, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다. 이 기능은 디자인 모드 곳곳에서 확인할 수 있습니다.

각 카테고리 창 위에 마우스를 올리면 보기와 같이 회색으로 창이 변하고,

더보기 버튼에 마우스를 올리면 + 버튼이 돌아가는 효과입니다.

그 외에는 아이콘을 만들고 이전에 했던 것처럼 텍스트를 넣고 위치를 설정했습니다.

이제 body와 style을 나눠서 세부적인 설명을 하겠습니다.

body

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

우선, section 과 div 로 감싸고, class를 설정해서 style에서 조정할 수 있도록 했습니다.

Notice는 span 태그로 넣었습니다.

span태그는 아주 다방면으로 활용이 가능한 유용한 태그입니다.

주로 <div>와 <p>태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용됩니다.

span 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당이 됩니다.

span태그로 요소를 감싸면 CSS나 Javascript로 그 부분을 변형시키는것이 가능해집니다.

제목을 h2태그로 썼습니다.

그 다음은, div로 6개의 div 를 감쌌습니다.

겉의 div는 class 를 text__inner로 정하고, 그 안의 6개의 div는 text t1~t6으로 정했습니다.

각 text t1~t6 는 h3 태그로 제목을 쓰고, p 태그로 내용을 적은 후에 a 태그로 더보기 버튼을 만들었습니다.

a 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.

이러한 a 태그에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href 속성입니다.

따라서 href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없습니다.

style

<style>
    * {
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
    }
    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;}

    .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;
        text-align: center;
    }
    .section.center {
        text-align: center;
    }
    .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;        
    }
    .section__small {
        font-size: 14px;
        color: white;
        background-color: #714dff;
        padding: 1px 23px;
        text-transform: uppercase;
        margin-bottom: 20px;
        display: inline-block;
        border-radius: 50px;            
    }
    /* text__wrap */
    .text__wrap {

    }
    .text__inner {
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .text__inner .text {
        width: 32.3333%;
        border: 1px solid #f5f5f5;
        padding: 90px 20px 20px 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
        border-radius: 10px;
        transition:  all 0.3s;
        cursor: pointer;
        position: relative;
    }
    .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);
    }
    .text__inner .text:hover {
        background-color: #f5f5f5;
    }
    .text__inner .text::before {
        content: '';
        width: 60px;
        height: 60px;
        background-color: #6b5151;
        /* background-image: url(../asset/img/textType01.svg); */
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        left: 20px;
        top: 20px;
        border-radius: 50%;
    }      
    .text__inner .text.t1::before {
        background-color: #74a6a1;
        background-image: url(../asset/img/textType01.svg);
    }
    .text__inner .text.t2::before {
        background-color: #99b19a;
        background-image: url(../asset/img/textType02.svg);
    }
    .text__inner .text.t3::before {
        background-color: #c8e6c9;
        background-image: url(../asset/img/textType03.svg); 
    }
    .text__inner .text.t4::before {
        background-color: #e9d5b8;
        background-image: url(../asset/img/textType04.svg);
    }
    .text__inner .text.t5::before {
        background-color: #bcaaa4;
        background-image: url(../asset/img/textType05.svg);
    }
    .text__inner .text.t6::before {
        background-color: #9ccec9;
        background-image: url(../asset/img/textType06.svg);
    }
</style>

img에 vertical-align: top 와 width:100% 로 설정해서 이미지의 여백을 없앴습니다.

vertical-align 속성은 인라인이나 인라인 블록 요소에만 적용됩니다.

그렇기 때문에 블록 요소인 div에는 이 속성이 적용되지 않습니다.

그리고 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않지만,

table cell에 적용할 때에는 내용에 영향을 미칩니다.

vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬합니다.

그래서 같은 줄에서 인라인 요소의 크기에 따라 높낮이가 달라질 수 있습니다.

그 줄에 있는 line-height 설정에 따라서 또 달라질 수 있습니다.

여기에서 쓴 vertical-align: top 속성은 요소의 맨 위를 줄에서 가장 큰 요소의 맨 위에 맞춥니다.

text-align 은 block 요소 안에 있는 inline요소를 정렬합니다.

inline 요소 : 줄 속에 끼워 넣는 요소(span, b, a, img 등)
block 요소 : 해당 요소가 속한 줄은 가로 화면 전체 100%를 차지하며 앞뒤로 줄 바꿈이 됨(p, div, ol, ul, table 등)

block 요소에만 text-align 속성을 적용할 수 있습니다.
정렬되는 것은 block 요소 안에 있는 inline요소(text 뿐만 아니라 img 등도 포함)만 가능합니다.

text-align: left 왼쪽 정렬
text-align: right 오른쪽 정렬
text-align: center 중앙 정렬
text-align: justify 왼쪽과 오른쪽 열에 맞춰 화면을 늘어뜨림

font-weight는 글자의 굵기를 정합니다.
기본값은 normal 이고,

normal : 보통 굵기이다. 숫자 400과 같습니다.
bold : 굵은 굵기이다. 숫자 700과 같습니다.
bolder : 상속된 값보다 굵은 굵기입니다.
lighter : 상속된 값보다 얇은 굵기입니다.
number : 100, 200, 300, 400, 500, 600, 700, 800, 900
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 값을 상속받습니다.

text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다.
기본값은 none입니다.

none : 입력된 그대로 출력합니다.
capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다.
uppercase : 모든 글자를 대문자로 바꿉니다.
lowercase : 모든 글자를 소문자로 바꿉니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

display: inline-block:

display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작합니다.

기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만,

block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다.

다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것입니다.

대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그 등을 들 수 있습니다.
inline-block 엘리먼트는 위와 같이 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 합니다.

inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.

flex-wrap 속성은 Flex 컨테이너에서 Flex 아이템을 한 줄로 표시할 지, 또는 행(行)을 되풀이 해서 복수의 행(行)으로 표시할지 여부를 지정합니다.

wrap: flex 아이템이 flex 컨테이너 안에서 표시되도록, 줄 바꿈합니다.
nowrap: 행(行)의 줄 바꿈을 하지 않습니다. 한 줄로 표시합니다.
wrap-reverse: "wrap" 속성 값과 같이, 줄 바꿈하여 표시되지만 Flex 항목의 순서가 역방향이 됩니다.

justify-content는 가로 축을 기준으로 좌우에 대한 정렬을 관장 합니다.

속성은

flex-start (default): 요소들을 컨테이너의 왼쪽으로 정렬
flex-end: 요소들을 컨테이너의 우측으로 정렬
center: 요소들을 컨테이너의 중앙으로 정렬
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.
space-evenly(FireFox Only): 첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

CSS transition:

CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다.

속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다.

예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다.

CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.

cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다.

auto: 자동
default: 기본값 (화살표)
pointer: 손가락 모양 (클릭 가능한 버튼)
wait: 로딩

position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다.
top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다.
기준을 잡고(예- position: relative;), 이동시킨다(예- top: 50px;).

Position 속성:
요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다.

static: 기준 없음 (배치 불가능 / 기본값)
relative: 요소 자기 자신을 기준으로 배치
absolute: 부모(조상) 요소를 기준으로 배치
fixed: 뷰포트 기준으로 배치
stickey: 스크롤 영역 기준으로 배치

Top, Bottom, Left, Right 속성:
기준점을 잡았으면 다음 네 가지 속성을 이용해서 요소의 위치를 옮길 수 있다.

요소의 Position 기준에 맞춰 위쪽, 아래쪽, 왼쪽, 오른쪽에서의 거리를 설정한다.

top : 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정
bottom : 요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정
left : 요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정
right : 요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정

부모 relative & 자식 absolute:
Parent에게 Position 값이 있는 경우?
Parent의 위치를 기준으로 삼는다.

조상 relative & 자식 absolute:
Grandparent에게 Position 값이 있는 경우?
한 단계 올라가서 GrandParent의 Postion값을 찾아서 기준점으로 삼는다.

조상 Position 없음 & 자식 absolute:
부모, 조상 전부 뒤져봐도 Position 값이 없는 경우? (Parent, GrandParent, <body>태그, <html>태그까지 )
window 객체의 viewport를 기준점으로삼는다. (DOM : Document Object Model)

CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다.
가상 요소 키워드 중에는 HTML 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나, HTML 콘텐츠 내용을 변경하지 않고도 선택한 요소의 앞 뒤에 새 콘텐츠를 추가하는 기능을 하는 키워드도 있습니다.

가상 요소는 다음 6가지가 있습니다.

::before: 요소 내용 앞쪽에 새 컨텐츠를 추가.
::after: 요소 내용 끝에 새 컨텐츠를 추가.
::selection: 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택.
::marker: 목록 아이템 앞에 붙는 마커를 선택.
::first-letter: 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택.
::first-line: 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택.

"::before", "::after" 2개만 새 컨텐츠를 추가하는 가상 요소이고, 나머지 4개는 콘텐츠의 특정 부분을 선택하는 가상 요소입니다.
"::before", "::after" 가상 요소는 HTML 태그나 자바스크립트 없이도 HTML 페이지 안에 콘텐츠, 또는 디자인 요소를 추가할 수 있는 특별한 기능을 합니다.

CSS로 HTML 컨텐츠를 변경할 수 있는 몇 안 되는 중요한 키워드입니다.

CSS를 작성할 때 가장 많이 사용하는 가상 요소가 "::before", "::after" 2개입니다.

요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(Pseudo-Element)라고 합니다.

::before 는 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다.

transform / rotate:
ransform의 rotate로 요소를 회전시킬 수 있습니다.

transform: rotate( angle )
transform: rotateX( angle )
transform: rotateY( angle )

angle에는 각의 크기를 입력합니다.

단위는 deg, rad, grad, turn 등을 사용합니다.
turn은 1회전, 즉 360deg를 의미합니다.
마우스를 올렸을 때 회전합니다.

각이 양수인 경우 시계방향으로 회전합니다.
각이 음수면 반시계 방향으로 회전합니다.
각이 크게 하여 빙글빙글 돌게 하는 효과를 줄 수 있습니다.

rotateX는 가로를 축으로 하여 회전합니다.
rotateY는 세로를 축으로 하여 회전합니다.

jongyung