메인 브랜드 컴포넌트는 처음 사이트에 들어갔을 때 브랜드를 어필할 수 있는 컴포넌트를 개발하는 것이라 브랜딩 사이트라는 목적을 이루기 위해 많은 신경을 쓴 부분 중 하나이다.
디자인을 할 때부터 브랜드 명과 설명의 위치, 구도를 잡고 반응형에 따른 레이아웃도 다르게 주었다.
또한, 브랜드 명이 잘보일 수 있도록 background 사진을 어둡게 만들어 글자가 부각되도록 기획했다.
1. 반응형 웹 오류
media 쿼리를 이용해 브랜드 명과 설명의 레이아웃을 달리하면서, 글자 크기나 간격이 일정하지 않고, 모바일 화면에서는 이미지와 글자가 잘리는 오류가 발생했다.
처음에는 이미지를 html코드에 직접적으로 주고, 저체 컴포넌트 height를 vh로 설정했으나, 위와 같은 오류로 인해 다른 방법을 고려했다.
[수정 전] 메인 브랜드 컴포넌트 css
[수정 전] 메인 브랜드 컴포넌트 html
모바일 화면에서 위치가 변하고 잘리는 현상을 해결하기 위해 이미지를 background-image로 설정해주었다.
따라서 화면을 조정함에 따라 사진이 크기에 알맞게 나타나도록 overflow:hidden 속성을 적용했다.
이어서 글자는 text-align과 position 속성을 정의해 위치를 고정했고, 반응형에 맞게 글자 크기가 변하도록 vw를 사용해 다시 조정해 문제를 해결했다.
따라서 수정 후에는 글자들이 브라우저 크기에 따라 잘려서 안보이는 현상이 없이 고정되어 반응했으며, 백그라운드 이미지도 화면 크기에 알맞게 맞춰졌다.
또한 컴포넌트를 수정할 때, 시맨틱 태그를 사용하려 div태그를 article태그로 변경해주었다.
<article class="containermain">
<div class="main-bg"></div>
<div class="main_content">
<span id="main_brand">스틸스</span>
<p id="main_explain">
스틸스는 철제 가구 제품을 소개하는 디지털 약자를 위한 브랜딩
사이트입니다. 사용자가 쉽게 인식할 수 있도록 한글로만 구성했으며,
모든 글자와 이미지는 마우스를 올렸을 때, 크게 확인할 수 있습니다.
</p>
</div>
</article>
/* main 브랜딩 이미지 */
.containermain {
position: relative;
width: 100%;
text-align: center;
overflow: hidden;
}
.main_content {
position: relative;
text-align: left;
color: white;
animation: main_cont 4s forwards;
}
.main-bg {
width: 100%;
height: 80vh;
background-image: url('../img_logo/main.png');
background-size: cover;
background-position: center;
animation: main_back 2s 1s forwards;
}
@media screen and (min-width: 768px) {
.containermain {
top: 90px;
}
.main_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#main_brand {
font-size: 7vw;
font-family: "Gasoek One", sans-serif;
font-weight: 400;
}
#main_explain {
font-size: 2vw;
padding-top: 30px;
}
}
@media screen and (max-width: 767px) {
.containermain {
top: 75px;
}
.main_content {
position: absolute;
left: 20px;
bottom: 50px;
width: 60%;
}
#main_brand {
font-size: 10vw;
font-family: "Gasoek One", sans-serif;
font-weight: 400;
}
#main_explain {
font-size: 3vw;
padding-top: 30px;
}
}
오류에 대한 이해를 돕기 위해 수전 전과 수정 후에 대한 gif도 같이 올리도록 하겠다.
수정 전 vs 수정 후
2. background 이미지, 어두운 효과 및 글자 애니메이션 적용
애니메이션을 이용해 페이지에 꾸밈요소를 더해주었다.
브랜드 소개를 강조하기 위해 백그라운드 이미지를 어둡게 만드는 과정에서 처음에는 background:black과 opacity 속성을 활용하려 했으나 배경이 어둡지 않고 밝게 흐려져 실패했었다.
따라서 리더님께 조언을 구해 filter:brightness()라는 속성을 알게 되었고, 속성을 적용해 쉽게 배경을 어둡게 만들어줄 수 있었다.
.main-bg {
width: 100%;
height: 80vh; /* 화면의 100% 높이에 해당하는 값 */
background-image: url('../img_logo/main.png');
background-size: cover; /* 이미지가 부모 요소에 꽉 차도록 설정 */
background-position: center; /* 이미지를 가운데로 정렬 */
animation: main_back 2s 1s forwards;
}
@keyframes main_back {
0% {
filter: brightness(1);
}
100% {
filter: brightness(0.3);
}
}
백그라운드 이미지를 어둡게 해준 뒤 글자를 나타나게 하기 위한 애니메이션도 적용해주었다.
이는 opacity 속성을 사용해서 완성할 수 있었다.
또한, 모든 애니메이션에 forward 속성을 주어 효과가 반복되거나 사라지지 않고 유지되도록 만들어주었다.
.main_content {
position: relative;
text-align: left;
color: white;
animation: main_cont 4s forwards;
}
@keyframes main_cont {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
다음은 애니메이션을 적용한 메인 브랜드 화면이다.
웹, 모바일 메인 브랜드 화면
3. 투명 스크롤 배너 컴포넌트
메인 페이지에 이벤트 배너를 기획했고, 투명한 배너의 이미지가 스크롤되며 사용자에게 보여지면 좋겠다고 생각해 시도했던 컴포넌트이다.
배너를 투명하게 만들기 위해 background-color:transparent를 사용했으며,
처음에는 배너의 백이미지로 사진을 넣어 스크롤이 제대로 작동하지 않고 배너의 크기에 맞춰지는 오류가 있었다.
따라서 이미지를 배너에 직접 넣는게 아니라 body에 백그라운드 이미지로 설정해주고 화면 스크롤에 따라 배너가 자연스럽게 이미지를 비추도록 해보자는 생각이 들었다.
background-size:cover로 이미지를 body에 채워주고, 배너를 넣어주었더니 스크롤에 따라 이미지도 스크롤되는 듯한 효과가 잘 나타나졌다.
<article class="banner">
<div class="item">
<div class="banner-item"></div>
</div>
<div class="item banner-content">이벤트</div>
<div class="item banner-btn">
<button
type="button"
class="btn btn-outline-light event-btn"
onclick="alert('진행 중인 이벤트가 없습니다.')"
>
자세히 보기
</button>
</div>
<div class="item">
<div class="banner-item"></div>
</div>
</article>
body {
background-attachment: fixed;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 50% 50%;
}
.banner {
width: 100%;
max-width: 1240px;
padding: 0;
margin: 0 auto;
background-color: transparent;
}
.banner .item {
top: 0;
left: 0;
width: 100%;
padding: 16px;
position: relative;
}
.item {
height: 60px;
}
.banner-content {
color: white;
font-size: 30px;
text-align: right;
font-family: "Gasoek One", sans-serif;
font-weight: 400;
}
.event-btn {
position: absolute;
right: 10px;
}
이벤트 배너
