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

사이트 만들기

사이트를 구성하는 방법에는 다양한 유형이 있습니다. 다양한 유형들을 익혀놓으면, 사이트를 만들 때 디자인적인 요소도 챙길 수 있습니다.

텍스트 유형01

텍스트 유형의 사이트는 텍스트를 주요 콘텐츠로 배치하고, 콘텐츠는 제목과 본문으로 구성해 이미지 없이 내용을 전달하는 유형입니다. 같은 텍스트 유형도 다양한 디자인으로 사이트를 구성할 수 있습니다. 그 중 첫번째 디자인입니다.

디자인 하기

먼저, 그리드를 나누어 각 구역과 텍스트를 배치하여 전체적인 모습을 만들어 봅니다.

HTML 작성하기

그 다음, 만들어 둔 디자인을 보며 시멘틱 태그를 활용해 구역에 맞는 태그와 텍스트를 작성해 줍니다. 한번에 다 만들기 보다는 큰 요소부터 하나씩 만들면서 css를 적용해, 중간중간 확인하는 편이 좋습니다. 내용이 없는 div박스라도, 웹 표준을 준수하기 위해 간단한 설명을 적어주는 것이 좋습니다.

HTML 코드 보기

<div class="container textType section font">
    <p class="subtit">텍스트 유형01</p>
    <h2 class="tit">스크립트를 익히는 방법 🛸</h2>
    <div class="text__box">
        <div class="top">
            <article class="text">
                    <div class="icon ir">아이콘</div>
                    <h3 class="textTit">검색 이펙트</h3>
                    <p class="textDesc">자바스크립트의 기본 메서드를 통해 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 검색을 만들 수 있습니다.</p>
                    <a class="more" href="#">더보기</a>
            </article>
            <article class="text">
                    <div class="icon ir">아이콘</div>
                    <h3 class="textTit">게임 이펙트</h3>
                    <p class="textDesc">자바스크립트의 기본 메서드를 통해 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 게임을 만들 수 있습니다.</p>
                    <a class="more" href="#">더보기</a>
            </article>
            <article class="text">
                    <div class="icon ir">아이콘</div>
                    <h3 class="textTit">슬라이드 이펙트</h3>
                    <p class="textDesc">자바스크립트의 기본 메서드를 통해 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 슬라이드를 만들 수 있습니다.</p>
                    <a class="more" href="#">더보기</a>
            </article>
        </div>
        <div class="bottom">
            <article class="text">
                    <div class="icon ir">아이콘</div>
                    <h3 class="textTit">퀴즈 이펙트</h3>
                    <p class="textDesc">자바스크립트의 기본 메서드를 통해 스크립트를 완성하는 튜토리얼입니다. 메서드를 통해 쉽게 퀴즈를 만들 수 있습니다.</p>
                    <a class="more" href="#">더보기</a>
            </article>
            <article class="text">
                    <div class="icon ir">아이콘</div>
                    <h3 class="textTit">제이쿼리</h3>
                    <p class="textDesc">자바스크립트 애니메이션 라이브러리인 제이쿼리를 이용하여 더욱 쉽게 자바스크립트 애니메이션을 만들 수 있습니다.</p>
                    <a class="more" href="#">더보기</a>
            </article>
            <article class="text">
                    <div class="icon ir">아이콘</div>
                    <h3 class="textTit">GSAP</h3>
                    <p class="textDesc">자바스크립트 애니메이션 라이브러리인 GSAP를 이용하여 더욱 쉽게 자바스크립트 애니메이션을 만들 수 있습니다.</p>
                    <a class="more" href="#">더보기</a>
            </article>
        </div>
    </div>
</div>

CSS 작성하기

만들어 둔 디자인을 보며, 각 요소의 CSS를 설정해줍니다. 최종 완성 후 디자인과 비교하며 다른 점을 수정해줍니다. 요소를 배치하면서 제대로 css가 적용되는지 확인하고 싶다면, 해당 요소에 배경색을 지정해 확인하도록 합니다. 아이콘은 이미지 스트라이프 기법으로 넣었습니다.

CSS 코드 보기

* {
    margin: 0;
    padding: 0;
}

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

img {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}
.font {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}

/* ir 효과(이미지 대체 효과 == alt) */
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

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

.section {
    padding: 120px 0;
}

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

.section>p {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 10px;
    text-decoration-line: underline;
}

/* main */
.text__box {}
.top {
    display: flex;
    margin-bottom: 20px;
}
.top .text:nth-child(2) {
    margin: 0 20px;
}
.bottom {
    display: flex;
}
.bottom .text:nth-child(2) {
    margin: 0 20px;
}
.text {
    width: 373px;
    height: 260px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}
.text:hover {
    background: #f5f5f5;
}
.text .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: url(img/iconsplite.svg) no-repeat;
    margin-bottom: 10px;
}
.top .text:nth-child(1) .icon {
    background-color: rgba(55, 197, 129, 0.5);
    background-position: 16px 16px;
}
.top .text:nth-child(2) .icon {
    background-color: rgba(55, 197, 129, 0.5);
    background-position: -33px 15px;
}
.top .text:nth-child(3) .icon {
    background-color: rgba(55, 197, 129, 0.5);
    background-position: -80px 16px;
}
.bottom .text:nth-child(1) .icon {
    background-color: rgba(55, 197, 129, 0.5);
    background-position: -133px 16px;
}
.bottom .text:nth-child(2) .icon {
    background-color: rgba(55, 197, 129, 0.5);
    background-position: -183px 18px;
}
.bottom .text:nth-child(3) .icon {
    background-color: rgba(55, 197, 129, 0.5);
    background-position: -234px 16px;
}
.text .textTit {
    font-size: 24px;
    margin-bottom: 10px;
}
.text .textDesc {
    font-size: 18px;
    line-height: 140%;
    font-weight: 300;
    color: #666;
    margin-bottom: 16px;
}
.text .more {
    font-size: 18px;
    font-weight: 300;
    color: #666;
    text-decoration-line: underline;
    text-underline-offset: 5px;
}

원본 소스 보기

원본 페이지 보기