“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
01. 디자인
우선 피그마로 디자인을 만들어 보았습니다.
기본적인 그리드 시스템을 칼럼을 12줄로 주고 여백은 380을 주어 콘텐츠가 들어가는 부분의 기본적인 그리드 시스템을 주었습니다. 그리드 시스템은 하나를 주게되면 한 사이트에 여러번 사용되기때문에 계속 숙지하는 것이 좋습니다.
그리드시스템 말고도 가이드 라인을 주어 자신이 어떤 요소를 어디에 넣고 여백을 얼마를 줄지 지정하는 것이 좋습니다.
02.코딩
이제 위와같은 디자인을 코딩으로 구현하고자 합니다. 우선 코드를 먼저 보여드리자면
<!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>이미지 유형1</title>
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
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__small {
font-size: 14px;
border-radius: 50px;
background-color: #17C37B;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.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 {
margin-bottom: 15px;
font-size: 32px;
line-height: 1;
}
.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>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
</head>
<body>
<section class="image__wrap section 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>- 코드의 첫 부분에서는 모든 요소의 마진과 패딩을 0으로 설정하고, 링크의 스타일을 정의합니다. 또한, 제목 요소들의 글꼴 두께를 일반(normal)으로 설정합니다. 이미지 요소들은 상단 정렬(vertical-align: top)되며, 너비는 100%로 설정됩니다.
- 그 다음으로는 여러 요소들의 상하(margin-top, margin-bottom) 간격을 조정하는 클래스들을 정의합니다. 각 클래스 이름에는 mt(상단 마진), mb(하단 마진)이 포함되어 있으며, 숫자는 간격 크기를 의미합니다.
- 그 다음으로는 일반적으로 사용되는 클래스들을 정의합니다. 컨테이너 요소는 너비가 1160px로 설정되어 있으며, 가운데 정렬됩니다. 폰트는 'NexonLv1Gothic'으로 설정됩니다. 섹션 요소는 상하 패딩이 120px이며, 센터 정렬됩니다. 섹션 제목에는 section__h2 클래스가 적용되며, 제목의 글꼴 크기는 50px입니다.
- 마지막으로, 이미지 요소의 스타일을 정의합니다. 이미지는 .image__inner 클래스로 감싸져 있으며, .image 클래스는 너비가 570px이고 높이가 370px입니다. .image__body 클래스는 .image 요소의 하단 왼쪽에 위치합니다. 이 클래스에는 제목(.title), 설명(.desc), 버튼(.btn) 스타일이 정의되어 있습니다.
잘 기억이 안나가거나 모르겠는 속성들
| 속성 : 속성값 | 내용 |
| justify-content: space-between; | flex container 내의 flex items를 양쪽 끝으로 붙이고 각 item 사이의 간격을 동일하게 분배합니다. |
| position: relative; | 요소의 위치를 현재 위치에서 상대적으로 조정하는 CSS 속성입니다. 즉, 다른 요소들과 비교하여 위치를 이동시킬 수 있습니다. 이때, 다른 요소들은 해당 요소의 위치 조정에 영향을 받지 않습니다. |
| position: absolute; | 해당 엘리먼트를 다른 엘리먼트의 위치를 기준으로 상대적으로 위치시키는 속성입니다. 이 속성을 사용하면 엘리먼트를 자유롭게 이동시킬 수 있습니다. 속성을 사용하면 해당 엘리먼트가 문서 흐름에서 벗어나므로 다른 엘리먼트들의 위치와 겹치지 않도록 주의해야 합니다. |
| vertical-align: top; | img 태그는 인라인 요소이지만 일반적으로 이미지는 인라인 요소의 베이스라인(baseline)에 맞춰져 있지 않기 때문입니다. vertical-align: top 속성은 이러한 이미지가 인라인 요소의 최상단에 위치하도록 합니다. 즉, 이미지의 상단 부분이 해당 요소의 상단 부분에 맞춰지도록 합니다. 다른 인라인 요소에서도 적용이 가능하며, 이 경우에는 해당 요소가 가지고 있는 높이를 고려하지 않고, 최상단에 위치하도록 합니다. |
| !important; |
속성에 적용되는 모든 다른 스타일 규칙을 무시하고 해당 속성이 우선 적용되도록 하는 것입니다. 이는 일부 극단적인 경우에 사용되어야하며, 필요한 경우에만 사용해야합니다. 그렇지 않으면 스타일이 덮어씌워지거나 무시되는 문제가 발생할 수 있습니다. |