[SITE] 웹사이트 - 이미지 텍스트 유형01

ImageTextType01

웹페이지 실습을 위한 이미지/텍스트 유형을 실습해보겠습니다! 이번 이미지/텍스트 유형은 이미지와 텍스트 영역이 함께 들어있는 타입입니다.
그럼 아래의 코드를 보며 함께 실습 해보겠습니다~😆

---

< figma : 디자인 하기 >

이번 유형은 이미지/텍스트 타입으로 각 주제와 영역에 맞게 레이아웃과 디자인을 설정하시면 됩니다.

아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇

---

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

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

TIP !
• 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다.
• 섹션 영역에 웹표준 준수를 위해 선언한 h2태그가 사용자 눈에 보이지 않도록 블라인드 속성을 주기 위해 선택자로 블라인드를 설정합니다.
• 다음으로 큰 덩어리인 텍스트 영역 / 이미지영역1 / 이미지영역2로 구조를 먼저 설정한 뒤 세부 구조를 설정합니다.

<section id="imgTextType01" class="image__wrap nexon section gray">
    <h2 class="blind">멍멍 유치원 살펴보기</h2>
    <div class="imgText__inner container">
        <div class="imgText__txt">
            <span>이미지 텍스트 유형01</span>
            <h3>멍멍 유치원 살펴보기</h3>
            <p>댕댕이를 좋아하는 사람들을 위한 멍멍 유치원 소개 사이트 입니다.</p>
            <ul>
                <li><a href="#">멍멍 유치원 사이트</a></li>
                <li><a href="#">댕댕꾸러기 소개</a></li>
                <li><a href="#">칭찬해요</a></li>
                <li><a href="#">서운해요</a></li>
                <li><a href="#">공지사항</a></li>
                <li><a href="#">댕댕 Youtube</a></li>
            </ul>
        </div>
        <div class="imgText__img img1">
            <li><a href="#">멍멍 유치원 사이트</a></li>
        </div>
        <div class="imgText__img img2">
            <li><a href="#">멍멍 유치원 사이트</a></li>
        </div>
    </div>
</section>

---

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

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

TIP !
• 먼저 전체 초기화(Reset)와 폰트 디폴트 설정을 해주는 것이 좋습니다.
• 각 영역과 섹션에 반복적으로 들어가는 속성들은 공통 속성으로 따로 설정하는 것이 좋습니다.
• 컨테이너 설정을 통해 메인 화면 크기와 여백을 설정해준 뒤 메인 콘텐츠인 섹션에게 스타일을 적용시킵니다.
• span 태그는 display: block를 먼저 설정하여 작업하는 것이 편리합니다.
• text-underline-position: under는 크롬 브라우저에게만 적용되는 속성으로 언더라인과 텍스트의 간격이 조금 생성됩니다.
• 이미지는 background: url()을 이용하여 배경에 삽입합니다.

/* font */
@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;
}
em,
i,
address {
    font-style: normal;
}
li {
    list-style: none;
}
.blind{
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

/* 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;
}
.gray {
    background-color: #f5f5f5;
}

/* imageType */
.imgText__inner {
    display: flex;
    justify-content: space-between;
}
.imgText__inner > div {
    width: 32%;
    height: 500px;
}
.imgText__txt span {
    font-size: 16px;
    color: #666;
    text-decoration: underline;
    text-underline-position: under;
    margin-bottom: 20px;
    display: block;
}
.imgText__txt h3 {
    font-size: 50px;
    font-weight: 300;
    word-break: keep-all;
    line-height: 1.4;
    margin-bottom: 20px;
}
.imgText__txt p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: #666;
    margin-bottom: 10px;
}
.imgText__txt ul {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
}
.imgText__txt ul li {
    position: relative;
    padding-left: 20px;
}
.imgText__txt ul li a {
    color: #666;
}
.imgText__txt ul li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 9px;
    background: #666;
}
.imgText__img {
    border-radius: 10px;
    position: relative;
}
.imgText__img a {
    position: absolute;
    left: 30px;
    bottom: 30px;
    background-color: #7c2b39;
    color: #fff;
    font-size: 18px;
    padding: 10px 30px;
    border-radius: 30px;
    display: inline-block;
}
.imgText__img a.blue {
    background-color: #7c2b39;
}

.imgText__img.img1 {
    background: url(img/imgText_bg01.jpg) no-repeat center / cover;
}
.imgText__img.img2 {
    background: url(img/imgText_bg02.jpg) no-repeat center / cover;
}

---

🎉 결과보기 🎉

원본 소스 보기

원본 페이지 보기