“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
이번에는 figma로 만든 다음의 이미지/텍스트 유형을 코딩으로 만들어 보겠습니다.
간략한 설명:
보이는 것처럼 이번에는 사이트를 크게 세 부분으로 나눌 수 있습니다.
글이 써있는 부분(article class="desc"), 음식 사진(article class="food"), 기념품 사진(article class="souvenir")으로 나누어서 만들었습니다.
이제 body와 style을 나눠서 세부적인 설명을 하겠습니다.
body
<body>
<section class="slider__wrap nexon">
<div class="container">
<div class="inner">
<article class="desc">
<span class="notice">NOTICE</span>
<h3 class="title">음식점과 기념품 가게 고르는 Tip</h3>
<p class="tips">맛있는 음식을 맛보고 싶은 마음은 누구나 있습니다.<br>
그리고 기념품을 사서 보관하거나 선물하는 일도 많죠.</p>
<div class="li">
<li>오소 부코</li>
<li>프로슈토</li>
<li>리볼리타</li>
<li>살팀보카</li>
<li>쿠샤리</li>
<li>에이시</li>
<li>하맘</li>
<li>토르시</li>
<li>마비스 치약</li>
<li>낙타 인형</li>
<li>시샤 도구</li>
</div>
</article>
<article class="food">
<figure>
<img src="../asset/img/food.jpg" alt="food">
</figure>
</article>
<article class="souvenir">
<figure>
<img src="../asset/img/souvenir.jpg" alt="souvenir">
</figure>
</article>
</div>
</div>
</section>
</body>지난 번에 만들었던 사이트 유형들을 참고하면 비교적 쉽게 만들 수 있습니다.
각 부분들을 나눠서 class로 이름을 정해주고, style에서 class를 다듬어 주면 됩니다.
간략하게 설명한 것처럼 크게 세 부분으로 나누었습니다.
그 세 부분을 공통적으로 설정해주기 위해서 container와 inner로 묶었습니다.
첫 번 째 article 인 desc를 보면, NOTICE와 제목, 그 밑에 짤막한 글 그리고 그 아래에 리스트가 있습니다.
NOTICE는 span 태그로 해주었고, 나머지는 각각의 class를 title, tips, li로 정했습니다.
리스트는 공통적으로 설정을 하기 위해서 div class="li"로 묶었습니다.
나머지는 사진이입니다.
사진은 폴더에 저장해놨습니다.
figure태그 넣어서 img태그로, 사진 루트를 타고 불러왔습니다.
style
<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); */
margin-top: 120px;
}
.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;
}
.inner {
display: flex;
justify-content: space-between;
}
.notice {
font-size: 20px;
color: #fff;
text-align: center;
line-height: 1.5;
padding: 0 30px;
border-radius: 50px;
background-color: #714dff;
font-weight: normal;
width: 75px;
height: 30px;
}
.title {
font-size: 50px;
margin-bottom: 15px;
margin-top: 15px;
color: black;
}
.desc {
font-size: 16px;
width: 374px;
color: #666;
}
.li {
font-size: 16px;
color: #666;
line-height: 1.5;
text-align: left;
}
.food {
}
.souvenir {
}
.tips {
margin-bottom: 15px;
}
</style>이전의 사이트에 적용한 것처럼 공통으로 적용할 부분들은 같습니다.
공통적인 부분에 적용해주기 위해서 inner에 display: flex 와 justify-content: space-betweeen;
display: flex 는 무조건 1행 수평으로 정렬합니다.
만약 크기가 너무 커서 자리가 없다면 강제로 크기를 줄입니다.
모든 크기를 균등하게 하는 것이 아니라 들어가는 태그들의 상호 크기에 비례해서 줄어듭니다.
justify-content: space-betweeen는 공간에서 균등하게 배치해줍니다.
두 가지를 동시에 써서 사이트를 올바른 위치에 배치합니다.
글 부분에 해당되는 desc는 세 가지를 포함했으므로, 넓이를 정해줬습니다.
NOTICE를 꾸며주기 위해서 글자 크기, 색, 배경색을 지정해주고, 둥근 모양으로 다듬어서 여백을 줘서 마무리했습니다.
나머지도 원하는 모양으로 다듬어줘서 완성했습니다.