728x90
사이트 제작하기 : 이미지 유형01
사이트 유형에는 이미지 유형도 있습니다.
카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다.
카드 유형이랑 비슷해보이지만 이미지 안에 글씨가 들어간다는 차이가 있습니다.
오늘 만들 사이트 형식
사이트 제작 방법
1. Figma 사용해서 레이아웃 설정
사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다.
밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다.
그리드를 통해 기본적인 틀을 먼저 잡아준 후 " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다.
※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다.
2. vscode를 통해 코딩해주기! : HTML편
레이아웃을 다 설정해줬다면 코딩을 해봅시다!
html의 body 부분에 레이아웃 구역을 정해줍니다.
★ 레이아웃 틀 잡기
1. section에 id값과 class값을 지정하기
2. 제목과 설명하기
3. 사진이 2개이므로 image__inner로 두 개의 카드 포함하기
4. 카드의 공통된 요소와 각각의 카드 특징들이 있으므로 article로 각각의 카드 요소(이미지 제목, 설명, 자세히 보기)를 묶기
5. article을 클래스 image로 묶어주고 각각의 특징이 있기 때문에 img1, img2를 추가 시켜주기
6. btn의 색상이 카드별로 다르기 때문에 다른 한쪽에 green을 써주기(CSS로 색상을 따로 주기 위한 차별성)
※ 이미지는 CSS로 주는 방법(이미지는 CSS부분에서 참고하세요!)
1. section에 id값과 class값을 지정하기
2. 제목과 설명하기
3. 사진이 2개이므로 image__inner로 두 개의 카드 포함하기
4. 카드의 공통된 요소와 각각의 카드 특징들이 있으므로 article로 각각의 카드 요소(이미지 제목, 설명, 자세히 보기)를 묶기
5. article을 클래스 image로 묶어주고 각각의 특징이 있기 때문에 img1, img2를 추가 시켜주기
6. btn의 색상이 카드별로 다르기 때문에 다른 한쪽에 green을 써주기(CSS로 색상을 따로 주기 위한 차별성)
※ 이미지는 CSS로 주는 방법(이미지는 CSS부분에서 참고하세요!)
<body>
<section id="imageType01" class="image__wrap nexon section">
<h2>맛있는 카페 음료들</h2>
<p>당신이 추천하는 가장 맛있는 카페 음료는 무엇인가요?</p>
<div class="image__inner container">
<article class="image img1">
<h2 class="image__title">달콤한 초코 라떼</h2>
<p class="image__desc">초코라떼는 초코랑 우유랑 시럽이랑 섞인 음료로 위에 휘핑크림이 올라가는 달달한 음료입니다.</p>
<a class="image__btn" href="/" title="자세히 보기">자세히 보기</a>
</article>
<article class="image img2">
<h3 class="image__title">녹차 프라푸치노</h3>
<p class="image__desc">녹차 프라푸치노는 녹차가루와 얼음을 갈고 우유와 함께 섞어 만든 시원하고 깔끔한 쉐이크류의 음료입니다.</p>
<a class="image__btn green" href="/" title="자세히 보기">자세히 보기</a>
</article>
</div>
</section>
</body>
3. vscode를 통해 코딩해주기! : CSS편
style을 통해 CSS를 설정해줍니다.
피그마로 만들어 놓은 레이아웃을 보며 HTML로 구역을 정해준 후 CSS로 하나하나 디자인해 나가는 것이 중요합니다!
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a{
text-decoration: none; /*밑줄 효과 없애기 위함*/
color: #000;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal; /*제목 글 굵기 기본설정 해제*/
}
/* common (코드 재활용) */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto; /*화면 가운데로!*/
}
.section {
padding: 120px 0;
}
.section > h2 { /*바로 자식 요소*/
font-size: 50px;
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
text-align: center;
margin-bottom: 70px;
color: #666;
}
/* imageType */
.image__wrap {}
.image__wrap h2 {}
.image__wrap p {} /*section의 요소들과 같아서 section에 넣어줌(코드 재활용을 위해서)*/
#imageType01 {
height: 500px;
}
.image__wrap {}
.image__inner {
display: flex;
justify-content: space-between; /*컨테이너 있고 이거쓰면 양쪽 끝으로 붙어서 사진 사이 떨어지게 함*/
}
.image {
width: 49%;
height: 370px;
padding: 200px 30px 30px 30px; /*글씨 옮기려고 넣는것*/
box-sizing: border-box; /*패딩을 쓰면 그만큼 커지기 때문에 이를 방지하는 것*/
color: #fff;
}
.image.img1 {
background: url(img/cafe01.jpg) no-repeat center / cover; /*CSS로 이미지를 넣어주는 방법*/
}
.image.img2 {
background: url(img/cafe02.jpg) no-repeat center / cover;
}
.image__title {
font-size: 32px;
margin-bottom: 10px;
}
.image__desc {
font-size: 16px;
margin-bottom: 10px;
line-height: 1.4;
font-weight: 300;
padding-right: 100px;
overflow: hidden;
text-overflow: ellipsis; /*텍스트 흘렀을 때 ...으로 바꿔줌*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10px;
}
.image__btn {
font-size: 16px;
font-weight: 300;
background: #EB3A13;
color: #fff;
padding: 10px 20px;
display: inline-block;
}
.image__btn.green { /*같은 클래스에 image__btn과 green을 써주었기 때문에 공백없이 연결해주어야 함*/
background: #8EC534;
}
</style>
▶완성본
'사이트 제작하기 > Image Type 이미지 유형' 카테고리의 다른 글
| [사이트 제작] 세번째 : 이미지 유형 TYPE.03 (3) | 2022.08.21 |
|---|---|
| [사이트 제작] 두번째 : 이미지 유형 TYPE.02 (2) | 2022.08.17 |
댓글