“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
지난 번에 한 웹사이트 카드 유형 만들기에 이어서 이번에는 이미지 유형을 만들어 봤습니다.
마찬가지로, figma로 미리 사이트의 이미지 예제를 만들어 봤습니다.
설명은 body부분과 head에 입력한 style부분으로 나눠서 하겠습니다.
body
body부분의 코드입니다.
<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__inner">
<img src="../asset/img/imageType_01.jpg" alt="이탈리아">
</figure>
<div class="image__body">
<h3 class="title">이탈리아</h3>
<p class="desc">해외 여행이 생각나요?<br> 이탈리아를 소개합니다.</p>
<a href="#" class="btn1">자세히 보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="../asset/img/imageType_02.jpg" alt="이집트">
</figure>
<div class="image__body">
<h3 class="title">이집트</h3>
<p class="desc">해외여행 가고 싶지 않나요?<br>이집트를 소개합니다.</p>
<a href="#" class="btn2">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
</body>큰 틀부터 그 안에 들어있는 요소들은
| 큰 제목 문장 이미지 넣을 공간 이미지 위에 넣을 큰 제목 이미지 위에 넣을 문장 자세히 보기 버튼 이미지 넣을 공간 이미지 위에 넣을 큰 제목 이미지 위에 넣을 문장 자세히 보기 버튼 |
이런 모양입니다.
가장 큰 틀은 section>div class="container">div class="image__inner" 이고,
그 안에 필요한 요소들을 채워 넣은 모양입니다.
위에서부터 큰 제목 h2 + p + article class="image"(이미지 넣을 공간1: 이탈리아) + article class="image"(이미지 넣을 공간2: 이집트)의 형태라고 생각하면 덜 복잡합니다.
class를 지정해서 각 부분들을 원하는 모양으로 다듬었습니다.
예시로, section에는 class=image__wrap section center nexon을 써서 전체를 감싸고 가운데 정렬을 넣어서 글씨체 적용했습니다.
figure태그는 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용합니다.
사진, 도표, 오디오, 비디오, 코드 등을 담는 컨테이너 역할을 하는 태그입니다.
안에는 여러 가지의 자식 요소(img,code 등)를 포함할 수 있습니다.
a태그로 자세히 보기 버튼 만들었습니다.
style
head의 style부분입니다.
<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>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top; /* 여백 없앰 */
width: 100%;
}
.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;
text-align: center;
}
.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__wrap */
.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;
margin-bottom: 15px;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;
padding-right: 0%;
}
.image__body .btn1 {
color: #fff;
background-color: #81131C;
padding: 10px 30px;
display: inline-block;
}
.image__body .btn2 {
color: #fff;
background-color: #73421E;
padding: 10px 30px;
display: inline-block;
}
</style>
</head>body에서 정해준 class를 style에서 꾸며주는 부분입니다.
사용된 속성들에 대해서 알아보려고 합니다.
display: flex
무조건 1행 수평으로 정렬합니다.
만약 크기가 너무 커서 자리가 없다면 강제로 크기를 줄입니다.
모든 크기를 균등하게 하는 것이 아니라 들어가는 태그들의 상호 크기에 비례해서 줄어듭니다.
display:inline-block
display 가 inline-block 으로 설정된 요소는 block 소성과 inline 의 속성을 섞어 놓은 것과 같습니다.
block 처럼 가로와 세로 크기를 설정 할 수 있으면서도, 새로운 줄에서 시작하지 않고,
inline 처럼 다른 요소와 같은 라인에 배치되는 장점을 가지고 있습니다.
justify-content: space-between;
flex로 지정된 박스 내부의 아이템들 간의 간격을 일정하게 유지합니다.
첫번째 아이템과 마지막 아이템은 한 면이 flex 박스와 인접하게 있습니다.
영단어 justify의 의미 중에는 "(인쇄되는 텍스트의) 행의 끝을 나란히 맞추다"라는 뜻이 있습니다.
font-weight
글꼴의 굵기를 지정합니다.
숫자 형식 은 100에서 900까지 100단위로 선택할 수 있고, 400은 normal과 같고 700은 bold와 같습니다.
숫자가 높을 수록 더 진하게 표시합니다.
line-height
줄 간격을 지정하는 속성입니다.
normal은 기본값으로 보통 1.0~1.2 이고, 숫자는 현재 글꼴에서 몇 배 크기로 할 지 지정합니다.
현재 글꼴이 14px이라면, line-height: 1.5로 할 경우, 줄 간격이 21px 높이로 지정됩니다.
길기는 px,pt,cm,em 등의 고정된 폭이고, %현재 글꼴 크기의 백분융로 높이를 지정합니다.
position: relative
위치 계산할 때 static의 원래 위치부터 계산합니다. 위, 아래, 좌, 우(top, bottom, left, right)의 위치를 같이 설정할 수 있습니다.
position: absolute
relative와 달리 문서의 원래 위치와 상관없이 위치를 지정할 수 있습니다. 가장 가까운 상위 요소를 기준으로(static은 제외) 위치가 정해집니다.
상위 요소가 없으면 html기준으로 설정됩니다.
text-align
문서를 수평으로 정렬할 때 씁니다.
block 요소 안에 있는 inline 요소를 정렬합니다.
block 요소에만 text-align 속성을 적용할 수 있습니다.
정렬되는 것은 block 요소 안에 있는 inline 요소만 가능합니다.
이 inline 요소는 text 뿐만 아니라 이미지 등도 포함됩니다.
text-align: left 왼쪽 정렬
text-align: right 오른쪽 정렬
text-align: center 중앙 정렬
text-aling: justify 왼쪽과 오른쪽 열에 맞춰서 화면을 늘어뜨림