오늘은 이미지텍스트 타입의 레이아웃을 만들어보겠습니다~!!
이미지텍스트 유형 페이지 만들기
피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다.
기본 CSS 리셋값 설정해주기
CSS 리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다.초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠??
이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다.
<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__small {
font-size: 14px;
border-radius: 50px;
background-color: #ff4191;
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;
}
</style>이미지텍스트 섹션 구성해주기
<body>
<section class="imagetext__wrap section center nexon">
<div class="container">
<div class="imagetext__inner">
<article class="imagetext">
<div class="text__body">
<span class="section__small">NOTICE</span>
<h3 class="title">향수의 다양한 원료들</h3>
<p class="desc">향수의 원료는 여러 가지가 있습니다. 이 중 몇 가지를 예로 들어보면 다음과 같습니다.</p>
<p class="desc_list">
<ul>
<li>꽃: 장미, 라벤더, 철쭉, 백합, 오렌지 꽃</li>
<li>나무: 삼나무, 향나무, 피나무, 쟁반나무, 코나쥬</li>
<li>향신료: 고추, 크로뮴, 페퍼민트, 카르다몸</li>
<li>과일: 레몬, 오렌지, 자몽, 라임, 플럼</li>
<li>즙: 베르가못, 오크 모스, 라벤더</li>
<li>동물 원료: 머스크, 캐스토리움, 비버, 미네랄</li>
</ul>
</p>
<p class="desc2">물론 이 외에도 다양한 향기 원료가 있으며, 이러한 향기 원료를 조합하여 다양한 종류의 향수를 만들어 낼 수 있습니다.</p>
</div>
</article>
<article class="imagetext">
<figure class="image">
<img src="../asset/img/image_textType01_01.jpg" alt="코튼">
</figure>
</article>
<article class="imagetext">
<figure class="image">
<img src="../asset/img/image_textType01_02.jpg" alt="시트러스">
</figure>
</article>
</div>
</div>
</section>
</body>container 태그 안에 imagetext__inner라는 태그를 만들어주고 article 구역을 총 3개를 만들어줘야합니다. 이때, article에게 imagetext라는 이름을 지정해줍니다. 그 안쪽에 텍스트 구역은 텍스트로, 이미지 구역은 이미지를 넣어 이미지를 넣어줍니다. (이미지 저장 후 assset > img 폴더에 넣어줌
여기서 텍스트 구역에는 목록들이 있기 때문에 ul 과 li태그를 활용해줍니다.
이미지텍스트 구역 CSS 설정해주기
/* imagetext__type */
.imagetext__inner {
display: flex;
justify-content: space-between;
}
.imagetext__inner .imagetext {
width: 32.3333%;
}
.text__body .title {
font-size: 50px;
margin-bottom: 25px;
line-height: 1.2;
}
.text__body .desc {
font-size: 16px;
color: #666;
line-height: 1.5;
margin-bottom: 15px;
}
ul {
color: #666;
font-size: 16px;
padding-left: 20px;
line-height: 1.6;
margin-bottom: 20px;
}
.text__body .desc2 {
color: #666;
display: block;
}이미지텍스트 타입과 유사한 카드 타입의 CSS를 참조하며 각 구역의 이름에 맞게 CSS를 부여해줍니다.
중간에 목록들에 CSS가 안 먹어 고생했는데요 ㅠ
그냥 ul 에게 CSS를 설정해주면 되는 거였네요 ㅎ...
CSS 사전
| text-align | 속성은 텍스트 정렬 방식을 설정합니다. |
|
vertical-align
|
인라인 요소의 수직 정렬 방법을 설정하는 속성입니다. |
| justify-content | CSS Flexbox 레이아웃에서 주 축(main axis)을 따라 플렉스 아이템(flex item)을 정렬하는 속성입니다. |
|
background-repeat
|
배경 이미지의 반복 여부를 지정하는 속성입니다. |
| background-position | 배경 이미지의 위치를 지정하는 속성입니다. |
|
background-image
|
요소의 배경 이미지를 설정하는 속성입니다. |
|
display
|
요소의 표시 방법(display method)을 설정하는 속성입니다. |
모르는 속성들을 다시 되새겨봅시다!
완성된페이지와 링크
다른 유형의 페이지 보러가기
카드 유형 : https://duektmf34.tistory.com/32
이미지 유형 : https://duektmf34.tistory.com/37
슬라이드 유형 : https://duektmf34.tistory.com/43
텍스트 유형 : https://duektmf34.tistory.com/48
배너 유형 : https://duektmf34.tistory.com/59
푸터 유형 : https://duektmf34.tistory.com/53
