The two most important days in your life are the day you are born and the day you find out why.
728x90
위의 예시처럼 텍스트의 영역과 이미지의 영역 있는 유형이 이미지 텍스트 유형입니다.
오늘은 예시처럼 이미지 텍스트 유형을 만들어 보려고 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 텍스트 유형 01</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: #0083FD;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* imgtxt__wrap */
.imgtxt__inner {
display: flex;
justify-content: space-between;
}
.imgtxt__inner .imgtxt{
width: 32.3333%;
background-color: #fff;
}
.title {
font-size: 50px;
line-height: 1.2;
margin-bottom: 25px;
}
.text__desc {
font-size: 16px;
color: #666;
margin-bottom: 15px;
line-height: 1.6;
}
.desc__list {
font-size: 16px;
color: #666;
margin-left: 20px;
margin-bottom: 15px;
line-height: 1.5;
}
</style>
</head>
<body>
<section class="img_txt__wrap section nexon">
<div class="container">
<div class="imgtxt__inner">
<article class="imgtxt">
<div class="imgtxt__body">
<span class="section__small">notice</span>
<h3 class="title">300종 이상의<br> 반려묘</h3>
<p class="text__desc">세상에는 다양한 종류의 고양이가 있습니다. 일부 인기 있는 반려묘 종류는 다음과 같습니다.</p>
<ul class="desc__list">
<li>스코티쉬 폴드 (Scottish Fold)</li>
<li>샴 고양이 (Siamese)</li>
<li>브리티쉬 숏헤어 (British Shorthair)</li>
<li>먼치킨 (Munchkin)</li>
<li>사바나 (Savannah)</li>
<li>페르시안 (Persian)</li>
<li>스노우슈 (Snowshoe)</li>
<li>스픽스 (Sphynx)</li>
<li>러시안 블루 (Russian Blue)</li>
<li>아메리칸 숏헤어 (American Shorthair)</li>
</ul>
</div>
</article>
<article class="imgtxt">
<figure class="image__header">
<img src="../assets/image/img_txtType01.jpg" alt="">
</figure>
</article>
<article class="imgtxt">
<figure class="image__header">
<img src="../assets/image/img_txtType02.jpg" alt="">
</figure>
</article>
</div>
</div>
</section>
</body>
</html>
만드는 방법 풀이
body
<section class="imgtxt__wrap section nexon">
<div class="container">
<div class="imgtxt__inner">
<article class="imgtxt">
<div class="imgtxt__body">
<span class="section__small">notice</span>
<h3 class="title">300종 이상의<br> 반려묘</h3>
<p class="text__desc">세상에는 다양한 종류의 고양이가 있습니다. 일부 인기 있는 반려묘 종류는 다음과 같습니다.</p>
<ul class="desc__list">
<li>스코티쉬 폴드 (Scottish Fold)</li>
<li>샴 고양이 (Siamese)</li>
<li>브리티쉬 숏헤어 (British Shorthair)</li>
<li>먼치킨 (Munchkin)</li>
<li>사바나 (Savannah)</li>
<li>페르시안 (Persian)</li>
<li>스노우슈 (Snowshoe)</li>
<li>스픽스 (Sphynx)</li>
<li>러시안 블루 (Russian Blue)</li>
<li>아메리칸 숏헤어 (American Shorthair)</li>
</ul>
</div>
</article>
<article class="imgtxt">
<figure class="image__header">
<img src="../assets/image/img_txtType01.jpg" alt="">
</figure>
</article>
<article class="imgtxt">
<figure class="image__header">
<img src="../assets/image/img_txtType02.jpg" alt="">
</figure>
</article>
</div>
</div>
</section>각 요소들을 class로 이름을 줍니다.
section 태그로 전반적으로 감싸주는 부분을 만들고 세부적인 것들을 container와 inner로 안에 넣어주었습니다.
notice, 제목, 설명, 그리고 리스트를 첫번째 article로 감싸주었습니다.
그리고 그 아래 이미지들을 각각 article로 묶어주고 이미지는 unsplash에서 저장하고 폴더에서 넣어주었습니다.
style
/* img_txt__wrap */
.imgtxt__inner {
display: flex;
justify-content: space-between;
}
.imgtxt__inner .imgtxt{
width: 32.3333%;
background-color: #fff;
}
.title {
font-size: 50px;
line-height: 1.2;
margin-bottom: 25px;
}
.text__desc {
font-size: 16px;
color: #666;
margin-bottom: 15px;
line-height: 1.6;
}
.desc__list {
font-size: 16px;
color: #666;
margin-left: 20px;
margin-bottom: 15px;
line-height: 1.5;
}위에 완성본 안에 있는 reset 부분과 common부분은
다른 유형을 만들때 공통적으로 사용했던 부분이므로 설명하지 않겠습니다.
inner부분에 display:flex를 주어 1행 수평으로 정렬해줍니다.
그 후 justify-content:space-between;으로 flex를 양 끝단에 정렬해줍니다.
각각 폰트사이즈와 색, 여백을 주었습니다.
이렇게 하면 위와 같은 사이트의 모습이 완성됩니다!