I Will Praise Any Man That Will Praise Me.
728x90
반응형
Figma
피그마를 사용하여 만들고자 하는 이미지 유형 페이지를 작업했습니다.
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 유형01</title>
</head>
<body>
<section class="image__wrap section center nexon">
<div class="container">
<h2 class="section__h2">반려동물</h2>
<p class="section__desc">귀여운 반려동물들 입니다.</p>
<div class="image__inner">
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_01.jpg" alt="반려견">
</figure>
<div class="image__body">
<h3 class="title">반려견</h3>
<p class="desc">강아지는 산책을 좋아합니다. 하루에 충분한 산책시간을 가져야 합니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType01_02.jpg" alt="반려묘">
</figure>
<div class="image__body">
<h3 class="title">반려묘</h3>
<p class="desc">고양이는 높은 곳을 좋아합니다. 고양이는 야외 활동을 거의 하지 않습니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>
body 안에 html 태그들을 사용하여 각 영역별 보여줄 정보들을 정의합니다.
영역마다 class명을 주어 보다 효과적으로 css를 적용시킬 수 있습니다.
CSS 코드
html 안에 아래와 같이 css 효과를 넣어주었습니다.
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
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.center {
text-align: center;
}
.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;
}
/* image__type */
.image__inner {
display: flex;
justify-content: space-between;
}
.image__inner .image {
width: 570px;
height: 370px;
background-color: #ccc;
position: relative;
}
.image__body {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
text-align: left;
padding: 30px;
}
.image__body .title {
font-size: 32px;
line-height: 1;
margin-bottom: 15px;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 20%;
}
.image__body .btn {
color: #fff;
background-color: rgba(0,0,0,0.5);
padding: 10px 30px;
display: inline-block;
}
</style>
head 안에 사용할 폰트를 링크 태그를 통해 호출하여 사용합니다.
style을 영역을 선언 후, 그 안에 html 태그 및 class명에 따른 스타일(css)효과를 작성합니다.
속성 용어 정리
| 속성 | 설명 |
| text-decoration | 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. |
| vertical-align | 인라인 요소의 상자를 선 상자를 포함해 자기 자신 안에 수직으로 정렬합니다. baseline : 요소의 인라인박스의 baseline을, 라인박스의 baseline에 정렬 sub : 요소의 인라인박스의 baseline을 부모박스의 아래첨자의 적절한 위치로 내립니다. Super : 요소의 인라인박스의 baseline을 부모박스의 윗첨자의 적절한 위치로 올립니다. Middle : 요소의 인라인박스의 수직 중앙 지점(콘텐츠 영역의 높이/2)을, 부모요소의 중앙 지점에 정렬 Text-top : 요소의 인라인박스의 상단을, 부모요소 콘텐츠영역의 상단에 정렬 Text-bottom : 요소의 인라인박스의 하단을, 부모요소 콘텐츠영역의 하단에 정렬 Top : 요소의 인라인박스의 상단을, 라인박스의 상단에 정렬 Bottom : 요소의 인라인박스의 하단을, 라인박스의 하단에 정렬 |
| text-align | 문단 정렬 방식을 정하는 속성입니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 받음 |
| justify-content | 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. flex-start : 요소의 정렬 상태를 왼쪽(기본)으로 설정합니다. flex-end : 요소의 좌우 정렬 상태를 오른쪽 끝점으로 설정합니다. center : 요소의 좌우 정렬 상태를 가운데로 설정합니다. space-between : 요소와 요소사이의 간격을 왼쪽과 오른쪽을 기준으로 설정합니다. space-around : 요소와 요소사이의 간격을 가운데를 기준으로 설정합니다. inherit : justify-content의 속성 값을 상위요소한테 상속받습니다. |
| !important | 스타일 적용 순서에는 특정도 값을 계산해서 가장 많은 점수를 받은 것에 우선 순위를 부여하는데 !important를 사용하게 되면 이 모든 순서를 무시하고, !important를 선언한 속성에 가정 먼저 우선 순위를 부여합니다. |
완성된 이미지 유형 페이지
