Leeyanggoo
[CSS] UI/UX 이미지 유형 레이아웃 만들기!! 본문
읽기 전에 잠깐!
이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다!
이미지 유형이란?
이미지 유형의 레이아웃은 웹 페이지가 담고 있는 정보의 대표적인 콘셉트를 보여줄 때 사용합니다.
브랜드의 대표 아이덴티티(identity)나 광고, 디자인에서 담고자 하는 철학 등을 나타내기도 합니다.
이미지 혹은 브랜드의 대표 철학 등을 사용자가 볼 수 있는 한 화면에 꽉 채워서 보여주는 경우가 많습니다.
브랜드 아이덴티티, 웹 디자인 및 개발 등의 서비스를 제공하는 디지털 에이전시 "Aino"의 웹 페이지
예시로 디자인 에이전시 "Aino"의 웹 페이지를 가져와봤습니다.
페이지 메인에 그들이 제작하는 콘텐츠의 이미지를 크게 나타냄으로써 브랜드의 아이덴티티를 보여주고 있습니다.
우리도 이처럼 만들고자 하는 웹 페이지의 아이덴티티를 한눈에 보여줄 수 있다면 사용자에게 더욱 명확한 콘셉트를 갖춘 페이지로 각인될 수 있겠죠? 😄
당장 이미지 유형의 레이아웃을 제작하고 싶어도 보여주고자 하는 이미지 없이는 불가능하겠죠?
이런 이미지들을 당장 제작하기엔 응애인 우리들은... 😅
그래서 우리를 도와줄 무료 이미지를 제공하는 사이트를 먼저 알려드리려 합니다!!
저작권 걱정 없는 무료 이미지를 제공하는 사이트를 찾아보자!
예제를 만드려고 해도 마땅한 이미지를 찾지 못했다면 무료로 수많은 이미지를 제공해주는 사이트를 찾아봅시다.
저는 주로 "unplash"라는 사이트를 이용하는데요.
"unplash"는 피그마와 연동도 가능하기 때문에 유용하게 쓰기 좋은 사이트 입니다.
https://unsplash.com/ko/%EC%BB%AC%EB%A0%89%EC%85%98
금주의 아름다운 사진 | Unsplash
Unsplash 커뮤니티가 큐레이팅한 금주의 가장 아름다운 무료 사진 및 이미지를 확인해 보세요. 모든 이미지는 무료로 다운로드 가능하고 무료로 사용할 수 있습니다.
unsplash.com
unplash에서 'cigar'로 검색했을 때 나오는 이미지들입니다.
"unplash+"라고 워터마크가 있는 사진들은 저작권이 있거나 유로인 이미지일 테니 사용할 때는 주의하셔야 합니다!
구글이나 여러 검색 포털에 무료 이미지라고 검색하면 나오는 많은 사이트가 있으니 참고해보세요. 😄
이미지를 찾았다면 레이아웃을 만들어 보자!
<section class="image__wrap section center nexon">
<div class="container">
<h2 class="section__h2">Would Smoke?</h2>
<p class="section__decs">오늘 당신이 태우고 싶은 이야기가 있나요? 편히 쉬세요.</p>
<div class="image__inner">
<article class="image">
<figure class="image__header">
<img src="../assets/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="../assets/img/imageType01_02.jpg" alt="Cigarette">
</figure>
<div class="image__body">
<h3 class="title">Cigarette</h3>
<p class="desc">More Cigar, More Peace. How do you split your sigh?</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
제작한 예시의 HTML 코드입니다.
먼저 예제로 만든 레이아웃은 큰 제목이 있고 하단에 2개의 대표 이미지가 들어간 레이아웃입니다.
따라서 <h2> 태그를 이용해 우리가 만들 section의 제목을 적고 세부 내용을 입력해 줍니다.
웹 페이지 접근성을 위해 <figure> 태그로 <img> 태그를 감싸주고, <h3> 태그로 이미지의 제목을 정합니다.
HTML 코드는 만들고자 하는 이미지 유형에 따라 텍스트가 아예 안 들어갈 수도 있기 때문에 참고만 해주시면 되겠습니다.
중요한 부분은 이미지가 들어갈 박스를 표준성에 근거하여 감싸주고 지정해주는 것입니다.
저는 <article> 태그를 이용하고 class 이름으로 "image"라 하여 나중에도 찾기 쉽도록 정했습니다.
이미지 유형은 배치가 중요하다!
/* 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%;
}
/* 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__decs {
font-size: 22px;
color: #666666;
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.7);
padding: 10px 30px;
display: inline-block;
}
.container .section__h2 {
font-weight: 700;
}
CSS 코드에서 'reset'과 'common' 부분은 이전 포스팅에서 제작하고자 하는 웹 페이지의 큰 틀을 정하는 부분이라 설명드렸죠?
중점으로 보실 부분은 'image_type'의 코드를 보시면 되겠습니다!
특히 '.image__inner'의 "display: flex"와 "justify-content: space-between"을 잘 알아보겠습니다.
flex의 속성은 "요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 방식"이라고 소개해 드렸습니다!
우리는 <div class="image__inner">가 모든 이미지 div의 부모이므로 .image__inner에 display: flex를 선언해줬습니다.
따라서 자식 요소들은 flex 속성을 받게 됩니다.
".image__inner .image"의 width 값이 '570px'이므로 두 div박스를 합치면 1140px이 됩니다.
이런 경우 전체 width 값에서 남는 부분이 생기게 되는데요, 이럴 때 요소들을 양쪽으로 정렬하기 위해 쓰는 속성이 "justify-content: space-between"입니다.
justify-content는 공간이 남을 때 자식 요소들을 가로 정렬하는 속성으로 여러 타입이 있습니다.
| flex-start | (기본값) 시작쪽으로 정렬 (보통 왼쪽, flex-direction: row-reverse;일 때는 오른쪽) |
| flex-end | 끝쪽으로 정렬 (보통 오른쪽, flex-direction: row-reverse;일 때는 왼쪽) |
| center | 중앙으로 정렬 |
| space-between | 양쪽 정렬 |
| space-around | 요소 좌우 동일 간격 |
만약 우리가 다른 예시로 소개해드렸던 Aino의 페이지처럼 정렬한다면 flex-start로 왼쪽 정렬을 해주면 되겠죠? 👍
또한 같은 이미지 유형이라도 각각의 이미지를 다른 크기로 표현하려 한다면 서로 다른 class나 id 이름을 지정해 width 값을 주고 정렬하면 될 거예요!!
