“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
사이트 만들기 이미지 유형
오늘은 사이트 만들기 중에 이미지 유형에 대해 정리해보려고 합니다!
완성 화면입니다.
디자인은 피그마에서 작업해주었습니다.
<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">커피의 품종은 크게 3가지로 구별 아바리카, 로부스타, 리베리카</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
</body>body 안에 section태그를 만들어 제목들을 지정해준다.
article 태그안에 이미지를 포함하고,
figure 태그는 이미지를 감싸고 있는 header역할을 하고, div태그는 이미지에 대한 정보를 담고 있는 body 역할을 한다.
각 article마다 제목과 설명이 포함되어 있고, 해당 정보는 h3와 p태그로 나누었다.
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<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.center {
text-align: center;
}
.section {
padding: 120px 0;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-style: 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>
css 스타일 전에 폰트를 먼저 작성,
head 안에 스타일 태그를 작성해 css를 적용
reset값은 다른 유형을 만들때도 초기값으로 똑같기 때문에
전에 만들었던걸 가져오면 된다.
그 다음 이름에 맞게 css를 설정
💜 justify-content: space-between
동일한 간격으로 배치.
첫번째 아이템은 컨테이너의 시적점에 위치, 마지막 아이템은 컨테이너의 끝점에 위치.
나머지 아이템들은 동일한 간격으로 분산.
이 코드에서는 이미지 두개를 동일하게 양쪽으로 분산
💜 position: relative
해당 요소를 기준으로 'top', 'bootom', 'left', 'right'와 같은 위치 조정 속성에 적용
요소 자체는 원래 위치에 남아있고, 주변 요소들도 해당 요소의 위치를 기준으로 배치된다.
자신의 원래 위치를 기준으로 상대적인 위치 조정이 가능하고, 반대로
position: absolute 는 해당 요소의 문서 흐름을 제거하고, 부모 요소를 기준으로 절대적인 위치를 지정하는 속성이다.
💜 display: inline-block
인라인 레벨 요소와 블록 레벨 요소의 중간 형태로 보여주는 속성
인라인 레벨 <span>,<a>,<img> 등
블록 레벨 <div>,<h1>,<p>