728x90
이미지유형01
사진 한 장은 수 백 마디의 이야기가 담겨 있습니다. 그리고 현재의 웹사이트 역시 동일한 시각적 영향을 가지고 있습니다. 따라서 데이터의 시각화가 점점 더 중요해지고 있습니다. 이미지 유형 중 세 번째 이미지 유형 제작 방법에 대해 알아보겠습니다.
1. Figma로 디자인하기
Figma를 이용해 그리드를 나누어 전체적인 틀을 만들어줍니다. 왼쪽에 큰 사진이 들어가고 오른쪽에 4구역으로 나누어져 사진이 들어갑니다.
2. HTML
웹표준 준수를 위해 시맨틱 태그를 사용합니다. 이번 유형에서는 img 태그를 이용하여 대부분의 이미지를 삽입하였지만 왼쪽의 큰 사진은 백그라운드를 이용하였습니다.
<section id="imageType03" class="image__wrap gowun section">
<h2>캐나다 여행</h2>
<p>캐나다 여행을 위한 사이트입니다.</p>
<div class="image__inner container-fluid">
<article class="image">
<div class="image__desc">
<h3>CANADA</h3>
<p>Vancouver</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span class="ir">페이스북</span></a>
<a href="#" class="link"><span class="ir">페이지이동</span></a>
<a href="#" class="link"><span class="ir">페이지이동</span></a>
<a href="#" class="link"><span class="ir">페이지이동</span></a>
<a href="#" class="link"><span class="ir">페이지이동</span></a>
</div>
</article>
<article class="image">
<figure class="image__Box">
<img src="img/img_bg_03_02.jpg" alt="quebec">
</figure>
<div class="image__desc">
<h3>CANADA</h3>
<p>Quebec</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span class="ir">페이스북</span></a>
<a href="#" class="link"><span class="ir">페이지이동</span></a>
</div>
</article>
<article class="image">
<figure class="image__Box">
<img src="img/img_bg_03_03.jpg" alt="niagara wall">
</figure>
<div class="image__desc">
<h3>CANADA</h3>
<p>Niagara wall</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span class="ir">페이스북</span></a>
<a href="#" class="link"><span class="ir">페이지이동</span></a>
</div>
</article>
<article class="image">
<figure class="image__Box">
<img src="img/img_bg_03_04.jpg" alt="ottawa">
</figure>
<div class="image__desc">
<h3>CANADA</h3>
<p>Ottawa</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span class="ir">페이스북</span></a>
<a href="#" class="link"><span class="ir">페이지이동</span></a>
</div>
</article>
<article class="image">
<figure class="image__Box">
<img src="img/img_bg_03_05.jpg" alt="toronto">
</figure>
<div class="image__desc">
<h3>CANADA</h3>
<p>Toronto</p>
</div>
<div class="image__sns">
<a href="#" class="link"><span class="ir">페이스북</span></a>
<a href="#" class="link"><span class="ir">페이지이동</span></a>
</div>
</article>
</div>
</section>
3. CSS
Figma를 이용해 만든 디자인을 보며 css설정을 합니다. 이번 시간에는 블러 효과뿐만 아니라 아이콘과 텍스트가 숨어있다가 마우스를 올렸을 떄 나타나는 효과까지 설정하였습니다. display: flex; 가 아닌 display: grid를 사용하여 배치하였습니다.
/* fonts */
@import url('https://webfontworld.github.io/yangheeryu/GowunBatang.css');
.gowun {
font-family: 'GowunBatang';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px;
}
.container-fluid {
width: 100%;
padding: 0 100px;
box-sizing: border-box;
}
.section {
padding: 120px 0;
}
.section>h2 {
font-size: 50px;
line-height: 1;
margin-bottom: 20px;
text-align: center;
}
.section>p {
font-size: 22px;
font-weight: 300;
color: #666;
margin-bottom: 70px;
text-align: center;
}
/* imageType03 */
.image__inner {
display: grid;
grid-template-areas:
"box1 box1 box2 box3"
"box1 box1 box4 box5"
;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px; //간격주기
}
.image {
position: relative;
overflow: hidden;
}
.image__inner .image:nth-child(1) {
grid-area: box1;
background: url(img/img_bg_03_01.jpg); //백그라운드로 이미지 삽입
background-size: cover;
}
.image__inner .image:nth-child(2) {
grid-area: box2;
}
.image__inner .image:nth-child(3) {
grid-area: box3;
}
.image__inner .image:nth-child(4) {
grid-area: box4;
}
.image__inner .image:nth-child(5) {
grid-area: box5;
}
.image__Box {}
.image__desc {
position: absolute;
left: 0;
bottom: -100%;
width: 100%;
background: rgba(255,255,255, 0.3);
backdrop-filter: blur(10px);
padding: 16px;
box-sizing: border-box;
transition: all 0.4s ease;
}
.image:hover .image__desc {
bottom: 0;
}
.image__desc h3 {
font-size: 20px;
}
.image__desc p {
font-size: 16px;
color: #111;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image__sns {
position: absolute;
right: 10px;
opacity: 0;
top: 10px;
transition: all 0.4s ease;
}
.image__sns a {
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
display: block;
margin-bottom: 5px;
background: url(img/image_bg03_icon.svg) no-repeat;
}
.image__sns a:nth-child(1){}
.image__sns a:nth-child(2){
background-position: -50px 0;
}
.image__sns a:nth-child(3){
background-position: -100px 0;
}
.image__sns a:nth-child(4){
background-position: -150px 0;
}
.image__sns a:nth-child(5){
background-position: -200px 0;
}
.image:hover .image__sns{
opacity: 1;
}
최종결과
728x90
반응형
'웹 사이트 제작' 카테고리의 다른 글
| [웹 사이트 제작]텍스트유형 02 (4) | 2022.08.31 |
|---|---|
| [웹 사이트 제작]텍스트유형 01 (2) | 2022.08.30 |
| [웹 사이트 제작]이미지유형 02 (2) | 2022.08.17 |
| [웹 사이트 제작]이미지유형 01 (3) | 2022.08.17 |
| [웹 사이트 제작]카드유형 03 (10) | 2022.08.10 |
댓글