[SITE] 웹사이트 - 텍스트유형02

TextType02

웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 보통 텍스트로만 정보를 제공하고자 할 때 사용합니다.
그럼 아래의 코드를 보며 함께 실습 해보겠습니다 😆

---

< figma : 디자인 하기 >

이번 유형은 이미지가 들어가지 않고 대신 아이콘이 들어가게 됩니다. 텍스르로만 이루어진 만큼 더 신경써서 작업해줍니다!

지난 텍스트 유형01과 똑같이 이미지스프라이트 기능을 위하여 프레임을 하나 더 만들어 아이콘을 60px씩 배치시켰습니다 😇

---

< HTML 소스 : 레아아웃 구조 파악하기 >

디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다.

! TIP !
• 구조를 먼저 꼼꼼하게 파악하여 큰 덩어리부터 마크업을 하는 것이 가장 중요합니다.
• 웹표준과 웹 접근성, 호환성을 놓치지 않도록 합니다.
• 공통 선택자와 각각의 선택자를 필요한 곳에 잘 구별하여 넣도록 합니다.

    <section id="textType02" class="section gmak container">
    <div id="header">
        <div class="CAT">CUTECAT</div>
        <h2>딩동댕<br> 야옹유치원 !</h2>
        <p>고양이를 좋아하는 사람들을 위한<br>리스트 입니다. 🐱🐾 <br> 여러분들도 함께 구경해보세요!</p>
    </div>
    <div class="text__inner">
        <div class="text_top">
            <article class="text__box">
                <span class="icons icon1 ir">button</span>
                <div class="text_desc">
                    <h2 class="desc__header">야옹유치원</h2>
                    <p class="desc">야옹 유치원 2기 김냥냥 입니다. 냥냥이는 똑똑하고 아주 귀엽습니다. 야옹 반장으로서 최선을 다하는 모범적인 학생입니다.</h2>
                </div>
            </article>
            <article class="text__box">
                <span class="icons icon2 ir">button</span>
                <div class="text_desc">
                    <h2 class="desc__header">공지사항</h2>
                    <p class="desc">야옹 유치원 2기 김냥냥 입니다. 냥냥이는 똑똑하고 아주 귀엽습니다. 야옹 반장으로서 최선을 다하는 모범적인 학생입니다.</h2>
                </div>
            </article>
        </div>
        <div class="text_bottom">
            <article class="text__box">
                <span class="icons icon3 ir">button</span>
                <div class="text_desc">
                    <h2 class="desc__header">칭찬해요</h2>
                    <p class="desc">야옹 유치원 2기 김냥냥 입니다. 냥냥이는 똑똑하고 아주 귀엽습니다. 야옹 반장으로서 최선을 다하는 모범적인 학생입니다.</h2>
                </div>
            </article>
            <article class="text__box">
                <span class="icons icon4 ir">button</span>
                <div class="text_desc">
                    <h2 class="desc__header">서운해요</h2>
                    <p class="desc">야옹 유치원 2기 김냥냥 입니다. 냥냥이는 똑똑하고 아주 귀엽습니다. 야옹 반장으로서 최선을 다하는 모범적인 학생입니다.</h2>
                </div>
            </article>
        </div>
    </div>
</section>f

---

< CSS 소스 : 스타일 적용하기 >

구조 짜임의 순서대로 css 스타일을 적용시켜 봅시다. 이 때 디자인 시안을 참고하면서 html와 번갈아가며 큰 덩어리 부터 스타일을 적용시켜 나가는 것이 중요합니다.
속성에 대한 내용은 코드와 주석을 보면서 이해해봅시다!

! TIP !
1. display: flex를 줄 때 구조를 잘 파악하여 나누어주어야 합니다.
2. 먼저 헤더부분과 컨텐츠 부분을 나누어 주어 flex를 줍니다.
3. 그 뒤 컨텐츠 부분에서 윗 섹션과 아래 섹션을 나누어서 각 섹션마다 flex를 줍니다.
4. 이미지 스트라이프를 사용할 경우 공통 선택자와 각각의 선택자를 부여합니다.
5. 그 뒤 공통 선택자에게는 url()속성, 각각 선택자에게는 background-position 속성을 사용하여 위치를 조정해줍니다.

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

.nexon {
    font-family: 'NexonLv1Gothic';
    font-size: 18px;
    font-weight: 300;
}

/* reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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;
    display: flex;
    justify-content: space-between ;
}

#header > h2 {
    font-size: 50px;
    font-weight: 800;
    margin-bottom: 30px;
    text-align: left;
}

#header > p {
    font-size: 18px;
    font-weight: 400;
    text-align: left;
}

#header > .CAT {
    width: 145px;
    height: 25px;
    font-size: 16px;
    background: #d0004b;
    padding: 4px 30px;
    border-radius: 50px;
    color: #fff;
    margin-bottom: 15px;
    text-align: center;
}
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

/* text__inner */
/* text_top과 bottom으로 섹션을 나눠줬으니 그 안에서 플렉스를 주어야 2개의 text__box가 가로로 나란히 정렬된다. */
.text_top {
    margin-bottom: 50px;
    display: flex;
}
.text_bottom {
    display: flex;
}
.text__box{
    width: 373px;
    padding: 20px;
}
.text__box:hover {
    background: #f5f5f5;
    border-radius: 10px;
}
.text_desc .desc__header {
    font-size: 24px;
    margin-bottom: 20px;
}
.text_desc .desc {
    font-weight: 300;
    line-height: 1.4;
} 
.icons {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    background: #000;
    background: url(img/text_icons02.svg); /* 이미지 스프라이트 */
}
.icons.icon2 {background-position: -60px;}  /* 아이콘 간격이 60px이므로 간격에 맞춰 포지션으로 위치 조정 */
.icons.icon3 {background-position: -120px;}
.icons.icon4 {background-position: -180px;}

---

🎉 결과보기 🎉

원본 소스 보기

원본 페이지 보기