728x90
사이트 제작하기 : 이미지 유형02
사이트 유형에는 이미지 유형도 있습니다.
카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다.
카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다.
오늘 만들 사이트 형식
사이트 제작 방법
1. Figma 사용해서 레이아웃 설정
사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다.
밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다.
그리드를 통해 기본적인 틀을 먼저 잡아준 후 " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다.
※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다.
2. vscode를 통해 코딩해주기! : HTML편
레이아웃을 다 설정해줬다면 코딩을 해봅시다!
html의 body 부분에 레이아웃 구역을 정해줍니다.
★ 레이아웃 틀 잡기
1. section에 id값과 class값을 지정하기
2. 제목과 설명하기
3. 사진이 3개이므로 image__inner로 세 개의 카드 포함하기
4. 카드의 공통된 요소와 각각의 카드 특징들이 있으므로 article로 각각의 카드 요소(이미지 제목, 자세히 보기)를 묶기
5. 이미지랑 자세히 보기 다른 것과 충돌나지 않게 클래스 지정해주기
6. article을 클래스 image로 묶어주고 각각의 특징이 있기 때문에 img1, img2를 추가 시켜주기
7. 마지막 사진 안 박스에 색상 등 차별을 주어야 되기 때문에 article클래스에 각각 img1, img2, img3 넣어주기
1. section에 id값과 class값을 지정하기
2. 제목과 설명하기
3. 사진이 3개이므로 image__inner로 세 개의 카드 포함하기
4. 카드의 공통된 요소와 각각의 카드 특징들이 있으므로 article로 각각의 카드 요소(이미지 제목, 자세히 보기)를 묶기
5. 이미지랑 자세히 보기 다른 것과 충돌나지 않게 클래스 지정해주기
6. article을 클래스 image로 묶어주고 각각의 특징이 있기 때문에 img1, img2를 추가 시켜주기
7. 마지막 사진 안 박스에 색상 등 차별을 주어야 되기 때문에 article클래스에 각각 img1, img2, img3 넣어주기
<body>
<section id="imageType02" class="image__wrap gmarket section">
<h1>북극곰의 귀여운 사진들</h1>
<p>곰은 사람을 찢어~맞는 말이지만 그래도 한없이 귀여운 북극곰들</p>
<div class="image__inner container">
<article class="image img1">
<figure class="image__box">
<img src="img/polarbear1.jpg" alt="북극곰">
</figure>
<div class="image__desc">
<h3>인사하는 북극곰</h3>
<a href="/" class="more" title="자세히 보기">자세히 보기</a>
</div>
</article>
<article class="image img2">
<figure class="image__box">
<img src="img/polarbear2.jpg" alt="북극곰">
</figure>
<div class="image__desc">
<h3>장난치는 북극곰</h3>
<a href="/" class="more" title="자세히 보기">자세히 보기</a>
</div>
</article>
<article class="image img3">
<figure class="image__box">
<img src="img/polarbear3.jpg" alt="북극곰">
</figure>
<div class="image__desc">
<h3>수영하는 북극곰</h3>
<a href="/" class="more" title="자세히 보기">자세히 보기</a>
</div>
</article>
</div>
</section>
</body>
3. vscode를 통해 코딩해주기! : CSS편
style을 통해 CSS를 설정해줍니다.
피그마로 만들어 놓은 레이아웃을 보며 HTML로 구역을 정해준 후 CSS로 하나하나 디자인해 나가는 것이 중요합니다!
<style>
/* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: 'GmarketSans';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%; /* 이미지 튀어나온 거 집어넣기 */
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
min-width: 1160px; /* 반응형 할 때 없애주기 */
}
.section {
padding: 120px 0;
}
.section > h1 {
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
text-align: center;
margin-bottom: 70px;
color: #666;
}
/* imageType */
.image__inner {
display: flex;
justify-content: space-between; /*컨테이너 있고 이거쓰면 양쪽 끝으로 붙어서 사진 사이 떨어지게 함*/
}
.image {
width: 32%;
position: relative;
overflow: hidden; /* 이미지 안 박스 숨기는 효과 */
}
.image__box {
height: 100%;
}
.image__box img {
transition: all 0.5s ease-in-out;
}
.image__desc {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box; /* padding으로 인한 넘침 방지 */
backdrop-filter: blur(10px); /* 블러 효과 */
transition: all 0.3s ease-in-out; /*ease-in-out 빨리 올라와라(?) 효과 : 천천-보통-천천 */
}
.img1 .image__desc {
background: rgba(253, 167, 246, 0.5); /*박스 컬러*/
}
.img1 .image__desc h3 {
color: #fff;
}
.img1 .image__desc .more {
color: #fff;
}
.img2 .image__desc {
background-color: rgba(176, 233, 255, 0.5);
}
.img2 .image__desc h3 {
color: #006462;
}
.img2 .image__desc .more {
color: #006462;
}
.img3 .image__desc {
background-color: rgba(7, 139, 111, 0.5);
}
.img3 .image__desc h3 {
color: #183169;
}
.img3 .image__desc .more {
color: #183169;
}
.img1 .image__desc {
bottom: -100px;
}
.img1:hover .image__desc {
bottom: 0;
}
.img2 .image__desc {
bottom: -100px;
}
.img2:hover .image__desc {
bottom: 0;
}
.img3 .image__desc {
bottom: -100px; /* 이미지 안에서 안보이게 하려고 밑으로 -100만큼 내려주고 그것도 안보이게 하려고 위에 image에 overflow: hidden; 효과 */
}
.img3:hover .image__desc {
bottom: 0;
}
.image:hover .image__box img {
transform: scale(1.05); /* 마우스 가져가면 사진 커지는 효과 */
}
.image__desc h3 {
font-size: 24px;
margin-bottom: 5px;
}
.image__desc .more {
font-size: 16px;
font-weight: 300;
}
.image__desc .more:hover {
text-decoration: underline; /*마우스 가져가면 밑줄 생김 효과*/
}
</style>
▶완성본
'사이트 제작하기 > Image Type 이미지 유형' 카테고리의 다른 글
| [사이트 제작] 세번째 : 이미지 유형 TYPE.03 (3) | 2022.08.21 |
|---|---|
| [사이트 제작] 첫번째 : 이미지 유형 TYPE.01 (3) | 2022.08.17 |
댓글