728x90
SITE를 만들어봅시다 !
1. CSS 살펴보기
...
/* textType02 */
.text__inner {
display: grid;
grid-template-areas:
"box1 box2 box3"
"box1 box4 box5"
;
grid-template-columns: 32.3% 32.3% 32.3%;
grid-template-rows: 50% 50%;
grid-gap: 50px 20px;
}
.text__desc {
grid-area: box1;
}
.text__inner:nth-child(2) {
grid-area: box2;
}
.text__inner:nth-child(3) {
grid-area: box3;
}
.text__inner:nth-child(4) {
grid-area: box4;
}
.text__inner:nth-child(5) {
grid-area: box5;
}
...
+ display: grid; 를 통해 레이아웃 구성
+ 그리드 영역과 이름 지정
2. HTML 살펴보기
<body>
<section id="textType02" class="text__wrap section gmark">
<div class="text__inner container">
<article class="text__desc">
<h6>TEXT TYPE02</h6>
<h2>입문/전문가 필름카메라</h2>
<p>
입문자, 전문가 모두 사용하기 좋은<br>
필름 카메라 추천 사이트 입니다.<br>
많은 관심 부탁드립니다 ~
</p>
</article>
<article class="text__box">
<img src="img/icon2_1.jpg" alt="아이콘1">
<h3>코닥 M35 : 아날로그 감성</h3>
<p>최근 아날로그 방식으로 일상을 기록하는 사람들이 많아졌습니다. 그에 맞는 입문 필름 카메라로 코닥 M35를 가지고 왔습니 ...</p>
</article>
<article class="text__box">
<img src="img/icon2_2.jpg" alt="아이콘5">
<h3>킷캣 토이카메라 : 스페셜에디션</h3>
<p>kitkat 스페셜 에디션으로 나온 킷켓 토이 카메라에 대해 알아봅시다. 외관도 브랜드 색상에 맞춰 레드로 귀엽고 키치하게 나 ...</p>
</article>
<article class="text__box">
<img src="img/icon2_3.jpg" alt="아이콘4">
<h3>니콘 F3 : 저렴이 튼튼이</h3>
<p>니콘 제품 중에서도 가장 튼튼하다고 평이 좋은 니콘 F3 입니다. 사용 방법도 간단하며 모드 설정도 사용자에 맞게 바꿀 수 ...</p>
</article>
<article class="text__box">
<img src="img/icon2_4.jpg" alt="아이콘6">
<h3>캐논 AE-1</h3>
<p>다양한 렌즈를 적용할 수 있는 캐논 AE-1 입니다. 카메라 헤드에는 삼각형 모양으로 캐논 로고를 보실 수 있으며, 조리개부터 ...</p>
</article>
</div>
</section>
</body>
3. 결과 확인하기
'SITE > TEXT' 카테고리의 다른 글
| SITE | textType #3 (5) | 2022.09.01 |
|---|---|
| SITE | textType #1 (6) | 2022.08.30 |
댓글