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

TextType03

웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 지난 유형들에 비해 조금 더 심화 버전입니다...!
그럼 아래의 코드를 보며 함께 실습 해보겠습니다 🫠 🫠

---

< figma : 디자인 하기 >

레이아웃 그리드 및 안내선을 이용하여 레이아웃 디자인을 완성합니다!

이젠 익숙해진 이미지스프라이트 기능을 위해 프레임을 추가하여 프로필 아이콘을 60px / 별점 아이콘 102px 씩 배치시켰습니다. 꼭 간격을 잘 맞춰주세요~! 😇

---

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

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

<section id="textType03" class="section gmak container">
    <h2>멍멍 유치원</h2>
    <p>🐶 멍멍 유치원의 말썽꾸러기 강아지 학생들을 소개합니다. 🐶</p>
    <div class="text__inner">
        <article class="text__box">
            <p>친구들과 어울릴 수 있을지 걱정했는데 선생님덕에 무사히 친구들을 사귈 수 있었습니다. 특히 놀이시간에 친구들과 어울릴 수 있도록 도와주셔서 재미있는 시간을 보낼 수 있었습니다. 간식
                퀄리티도 좋고 맛도 좋았습니다. 이렇게 소심한 저를 잘 돌봐주신 선생님 감사합니다!</p>
            <span class="icon icon1 ir">아이콘</span>
            <div class="dogname">
                <h2>김댕댕<em>멍멍 24기</em></h2>
                <div class="star star1 ir">별</div>
            </div>
            <div class="more"><a href="#">자세히 보기</a></div>
        </article>
        <article class="text__box">
            <p>제일 기억에 남는 활동은 바로 간식 시간이에요! 수제로 만들어진 간식은 간도 딱 맞고 건강에도 좋은 재료로 만들어져서 양심에 찔리지 않고 맘껏 먹을 수 있었습니다~~~! 선생님 맛있는 간식
                늘 정성껏 만들어 주셔서 감사합니다~!!!!!!!! 😆</p>
            <span class="icon icon2 ir">아이콘</span>
            <div class="dogname">
                <h2>오왈왈<em>멍멍 24기</em></h2>
                <div class="star star2 ir">별</div>
            </div>
            <div class="more"><a href="#">자세히 보기</a></div>
        </article>
        <article class="text__box">
            <p>게을러서 가끔 지각도 하고 말도 잘 안들었지만 끝까지 저를 잘 지도해주셔서 감사했습니다...ㅎㅎㅎ 그 때만 생각하면 너무 죄송하네요 ㅠㅠ <br>댕댕 유치원에 다니면서 많은 것을 배우고 갈
                수 있었습니다. 마지막으로 하고싶은 말은 간식 최고!!!!!</p>
            <span class="icon icon3 ir">아이콘</span>
            <div class="dogname">
                <h2>박비숑<em>멍멍 24기</em></h2>
                <div class="star star3 ir">별</div>
            </div>
            <div class="more"><a href="#">자세히 보기</a></div>
        </article>
    </div>
</section>

---

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

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

! TIP !
1. display: flex를 줄 때 구조를 잘 파악하여 나누어주어야 합니다.
2. 가상요소를 사용하여 라인을 넣어줍니다. 이때 위치는 포지션을 사용하여 이동해줍니다.
3. 이미지 스트라이프를 사용할 경우 공통 선택자와 각각의 선택자를 부여합니다.
4. 그 뒤 공통 선택자에게는 url()속성, 각각 선택자에게는 background-position 속성을 사용하여 위치를 조정해줍니다.

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

.gmak {
    font-family: 'GmarketSans';
    font-size: 18px;
}
/* reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}
img {
    width: 100%;
    vertical-align: top;
}

/* common : 공통 요소(재활용) */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
}
.section {
    padding: 120px 0;
}

.section > h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}

.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}  

body {
    background: #f5f5f5;
}

/* text */
.text__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between ;
}
.text__box {
    /* width: 373px; */
    width: 32%;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    position: relative;
}
.text__box > p {
    height: 189px;
    line-height: 1.5;
    margin-bottom: 30px;
}
/* 가상요소를 사용하여 라인 배치 */
.text__box::before { 
    content: '';
    width: 82%;
    height: 1px;
    background: #edecec;
    position: absolute;
    left: 30px;
    top: 248px;
    align-items: center;
}
.text__box::after {
    content: '';
    width: 82%;
    height: 1px;
    background: #edecec;
    position: absolute;
    left: 30px;
    bottom: 85px;
    align-items: center;
}

/* dogname */
.dogname {
    position: absolute;
    left: 100px;
    bottom: 120px;
}
.dogname > h2 {
    margin-bottom: 10px;
}
.dogname > h2 > em {
    margin-left: 5px;
    font-style: normal;
    font-size: 16px;
    color: #a4a4a4;
}

/* icon */
.star {
    height: 20px;
    width: 102px; 
    background: url(img/text_icons03_1.svg);
}
.star.star2 {background-position: -102px;}
.star.star3 {background-position: -204px;}

.icon {
    display: inline-block;  
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #000;
    margin-top: 30px;
    margin-bottom: 30px;
    background: url(img/text_icons03.svg);
}
.icon.icon2 {background-position: -60px;}
.icon.icon3 {background-position: -120px;}

/* more */
.more {
    text-align: center;
}
.more > a {
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    padding: 6px 20px;
    margin-top: 30px;
    color: white;
    background: #504ecd;
    text-align: center;
    border-radius: 50px;
}

---

🎉 결과보기 🎉

원본 소스 보기

원본 페이지 보기