사이트 만들기 텍스트 유형

한번씩 읽고 가세요.

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

- Frederick Philips Brooks
Mythical Man-Month 저자

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>textType01</title>

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

    <style>
        /* reset */
        * {
            padding: 0;
            margin: 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}

        /* commmon */
        .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__small {
            font-size: 14px;
            padding: 1px 23px;
            border-radius: 10px;
            background-color: #055a5b;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 20px;
            display: inline-block;
        }

        .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;
        }
        /* text__wrap */
        .text__inner {
            text-align: left;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .text__inner .text {
            width: 32.333333%;
            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__inner .text::before {
            content: '';
            width: 60px;
            height: 60px;
            background-color: #055a5b;
            background-image: url(../asset/img/textType__icon01.svg);
            background-repeat: no-repeat;
            background-position:  center;
            position: absolute;
            left: 20px;
            top: 20px;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .text__inner .text.t1::before{
            background-image: url(../asset/img/textType__icon01.svg);
            background-color: #055a5b;
        }
        .text__inner .text.t1:hover::before{
            transform: scaleX(50%);
        }

        .text__inner .text.t2::before{
            background-image: url(../asset/img/textType__icon02.svg);
            background-color: #055a5b;
        }
        .text__inner .text.t2:hover::before{
            transform: scaleX(50%);
        }

        .text__inner .text.t3::before{
            background-image: url(../asset/img/textType__icon03.svg);
            background-color: #055a5b;
        }
        .text__inner .text.t3:hover::before{
            transform: scaleX(50%);
        }

        .text__inner .text.t4::before{
            background-image: url(../asset/img/textType__icon04.svg);
            background-color: #055a5b;
        }
        .text__inner .text.t4:hover::before{
            transform: scaleX(50%);
        }

        .text__inner .text.t5::before{
            background-image: url(../asset/img/textType__icon05.svg);
            background-color: #055a5b;
        }
        .text__inner .text.t5:hover::before{
            transform: scaleX(50%);
        }

        .text__inner .text.t6::before{
            background-image: url(../asset/img/textType__icon06.svg);
            background-color: #055a5b;
        }
        .text__inner .text.t6:hover::before{
            transform: scaleX(50%);
        }

        .text__inner .text:hover {
            background-color: #f5f5f5;
        }
        .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:hover::before {
            transform: rotate(360deg);
        }

        .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;
        }
    </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">미니멀리즘(minimalism)은 극도로 단순한 것을 추구하는 미술 및 디자인 용어로, 극단적으로 간결하고 단순한 것을 만드는 것을 목표로 합니다. 이는 미술 분야뿐만 아니라 일상생활에도 적용되는 철학이 될 수 있습니다.</p>
                    <a href="#" class="text__btn">더보기</a>
                </div>
                <div class="text t2">
                    <h3 class="text__title">간결함</h3>
                    <p class="text__desc">미니멀리즘의 가치 중 하나는 간결함입니다. 복잡한 것을 단순화하면서도 중요한 것들만을 추려내어 집중하는 것입니다. 이를 통해 삶이 더욱 단순하고 깨끗하며, 중요한 것에 대한 집중력을 높일 수 있다는 것입니다.</p>
                    <a href="#" class="text__btn">더보기</a>
                </div>
                <div class="text t3">
                    <h3 class="text__title">미니멀 인테리어</h3>
                    <p class="text__desc">미니멀 인테리어는 불필요한 소품이나 장식을 최소한으로 줄이고, 깔끔하고 간결한 가구와 인테리어 소품을 사용하여 조용하고 심플한 공간을 만들어냅니다. 이 스타일은 간결함과 깔끔함을 추구한다.</p>
                    <a href="#" class="text__btn">더보기</a>
                </div>
                <div class="text t4">
                    <h3 class="text__title">미니멀리즘 가구</h3>
                    <p class="text__desc">미니멀리즘 가구는 극도로 단순하면서도 기능적이며 실용적인 가구 디자인을 의미합니다. 불필요한 장식이나 장식적인 요소를 배제하고, 필요한 기능만을 갖춘 간결한 디자인을 특징으로 합니다.간결함</p>
                    <a href="#" class="text__btn">더보기</a>
                </div>
                <div class="text t5">
                    <h3 class="text__title">대표적인 예시</h3>
                    <p class="text__desc">미니멀리즘 가구의 대표적인 예시로는 플랫폼 베드, 모던 소파, 간단한 책상, 간이 침대, 빈티지 의자 등이 있습니다. 이러한 가구들은 깔끔하고 모던한 분위기를 연출하며, 공간 활용성도 뛰어납니다.</p>
                    <a href="#" class="text__btn">더보기</a>
                </div>
                <div class="text t6">
                    <h3 class="text__title">간소화</h3>
                    <p class="text__desc">미니멀리즘 가구는 소비자들이 소유하는 물건의 양을 줄이는 미니멀리즘 운동과도 관련이 있습니다. 소유하고 있는 물건의 수를 최소화함으로써 삶의 단순함과 가치를 높이는 것을 목적으로 합니다. </p>
                    <a href="#" class="text__btn">더보기</a>
                </div>

            </div>
        </div>
    </section>

</body>

</html>

가상요소를 만들어 배경에 이미지를 넣은후 애니메이션을 넣어보았다.

transform

CSS의 transform 속성은 요소의 크기, 위치, 회전 등을 변경하는 데 사용됩니다. 이 속성을 사용하여 다음과 같은 변형을 적용할 수 있습니다.

translate: 요소를 주어진 값만큼 이동시킵니다. translateX, translateY 등으로 축을 지정할 수 있습니다.
scale: 요소의 크기를 주어진 값만큼 확대 또는 축소시킵니다. scaleX, scaleY 등으로 축을 지정할 수 있습니다.
rotate: 요소를 주어진 각도만큼 회전시킵니다.
skew: 요소를 주어진 각도만큼 기울입니다. skewX, skewY 등으로 축을 지정할 수 있습니다.
matrix: 요소에 2D 변환 행렬을 적용합니다. 6개의 값으로 이루어진 리스트를 전달하여 변환을 정의합니다.

CSS의 background-repeat 속성은 배경 이미지의 반복 여부를 설정하는 데 사용됩니다. 이 속성은 다음과 같은 값들을 가질 수 있습니다.

repeat: 배경 이미지를 수직 및 수평 방향으로 반복합니다. 이 값이 기본값입니다.
repeat-x: 배경 이미지를 수평 방향으로만 반복합니다.
repeat-y: 배경 이미지를 수직 방향으로만 반복합니다.
no-repeat: 배경 이미지를 반복하지 않습니다.
space: 배경 이미지를 수직 및 수평 방향으로 반복하지만, 가장자리에서는 잘라냅니다. 이 때 반복된 이미지 간의 간격이 동일하게 유지됩니다.
round: 배경 이미지를 수직 및 수평 방향으로 반복하지만, 가장자리에서는 잘라냅니다. 이 때 반복된 이미지 간의 간격이 일정하지 않을 수 있습니다.

svg

SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 지원하는 이미지 포맷입니다. 이는 XML을 기반으로 하며, 다양한 크기의 화면에서 벡터 그래픽 이미지를 고품질로 표현할 수 있습니다. 또한, SVG 이미지는 일반적인 래스터 이미지와 달리 확대 및 축소 시 이미지 품질이 유지됩니다.

SVG는 다양한 그래픽 형태와 기능을 지원하며, 텍스트, 이미지, 기하학적 도형, 경로 등을 포함할 수 있습니다. 또한, CSS를 사용하여 SVG 이미지의 스타일링을 제어할 수 있으며, JavaScript를 사용하여 동적으로 생성하고 수정할 수 있습니다.

SVG는 웹 및 모바일 애플리케이션에서 많이 사용되며, 아이콘, 그래프, 차트, 지도 등 다양한 용도로 사용됩니다. 또한, 대부분의 모던 브라우저에서 지원되므로 웹 개발에서 광범위하게 활용됩니다.

100S00