텍스트 유형01

사이트 만들기 : 텍스트유형01

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

---

원본 소스 보기 원본 사이트

---

Figma

코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다.

---

CSS

/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}

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

img {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

/* common */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
}

.section {
    padding: 120px 0;
}

.section>h2 {
    font-size: 58px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}

.section>p {
    font-size: 20px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 10px;
}

.text_inner {}

.text__top {
    display: flex;
    margin-bottom: 20px;
}

.text__bom {
    display: flex;
}

.ban:hover {
    background-color: #f5f5f5;
}

.ban {
    width: 33%;
    background: #fff;
    padding: 20px;
}

.ban:nth-child(2) {
    margin: 0 20px;
}
.ban:nth-child(5) {
    margin: 0 20px;
}

.top {
    margin-bottom: 10px;
}

img {
    width: 60px;
    height: 60px;
}

.cen h3 {
    margin-bottom: 10px;
    font-size: 24px;
}

.cen p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.4;
    color: #666;
}

.bom {
    font-size: 16px;
    color: #666;
}

.bom:hover {
    text-decoration-line: underline;
}

HTML

<section id="textType" class="text__wrap nexon section">
    <p>텍스트 유형01</p>
    <h2>자바스크립트</h2>
    <div class="text_inner container">
        <div class="text__top">
            <article class="ban">
                <div class="top">
                    <img src="img/logo1.png" alt="logo">
                </div>
                <div class="cen">
                    <h3>자바스크립트</h3>
                    <p>
                        객체 기반의 스크립트 프로그래밍 언어.<br>
                        웹 브라우저 내에서 주로 사용.<br>
                        다른 응용 프로그램의 내장 객체에도 접근.
                    </p>
                </div>
                <div class="bom">
                    <a href="#">더보기</a>
                </div>
            </article>
            <article class="ban">
                <div class="top">
                    <img src="img/logo2.png" alt="logo">
                </div>
                <div class="cen">
                    <h3>자바스크립트</h3>
                    <p>
                        객체 기반의 스크립트 프로그래밍 언어.<br>
                        웹 브라우저 내에서 주로 사용.<br>
                        다른 응용 프로그램의 내장 객체에도 접근.
                    </p>
                </div>
                <div class="bom">
                    <a href="#">더보기</a>
                </div>
            </article>
            <article class="ban">
                <div class="top">
                    <img src="img/logo3.png" alt="logo">
                </div>
                <div class="cen">
                    <h3>자바스크립트</h3>
                    <p>
                        객체 기반의 스크립트 프로그래밍 언어.<br>
                        웹 브라우저 내에서 주로 사용.<br>
                        다른 응용 프로그램의 내장 객체에도 접근.
                    </p>
                </div>
                <div class="bom">
                    <a href="#">더보기</a>
                </div>
            </article>
        </div>
        <div class="text__bom">
            <article class="ban">
                <div class="top">
                    <img src="img/logo4.png" alt="logo">
                </div>
                <div class="cen">
                    <h3>자바스크립트</h3>
                    <p>
                        객체 기반의 스크립트 프로그래밍 언어.<br>
                        웹 브라우저 내에서 주로 사용.<br>
                        다른 응용 프로그램의 내장 객체에도 접근.
                    </p>
                </div>
                <div class="bom">
                    <a href="#">더보기</a>
                </div>
            </article>
            <article class="ban">
                <div class="top">
                    <img src="img/logo5.png" alt="logo">
                </div>
                <div class="cen">
                    <h3>자바스크립트</h3>
                    <p>
                        객체 기반의 스크립트 프로그래밍 언어.<br>
                        웹 브라우저 내에서 주로 사용.<br>
                        다른 응용 프로그램의 내장 객체에도 접근.
                    </p>
                </div>
                <div class="bom">
                    <a href="#">더보기</a>
                </div>
            </article>
            <article class="ban">
                <div class="top">
                    <img src="img/logo6.png" alt="logo">
                </div>
                <div class="cen">
                    <h3>자바스크립트</h3>
                    <p>
                        객체 기반의 스크립트 프로그래밍 언어.<br>
                        웹 브라우저 내에서 주로 사용.<br>
                        다른 응용 프로그램의 내장 객체에도 접근.
                    </p>
                </div>
                <div class="bom">
                    <a href="#">더보기</a>
                </div>
            </article>
        </div>
    </div>
</section>