첫 블로그 글을 게시하려고 하기도 했고 개발 공부에 대한 열정대비 노력이 부족한거 같아 시작해봅니다. 매번 많은 블로그 기술관련 글을 보기만 하며 도움만 얻었는데 언젠가 저도 도움이 되보려 노력하고 시작합니다.
안녕하세요. 오늘부터 웹에서 사용해볼 박스 디자인을 조금씩 쌓아가려고 합니다.
참고로 [COOL_BOX]는 개인적으로 하루 10~30분만을 투자하여 꾸준히 하려고 스스로 제한을 두었기에 부족한 부분이 많이 보일 수 있습니다.
카드형 박스를 만들자!
위와 같이 카드형으로 게시판 그리드 리스트와 같은 요소에 쓰일 수 있을만한 카드형 박스를 만들어 보았습니다.
HTML 구조
html 구조는 단순하게 우선 빨리 화면에 띄우고 보자 였습니다.
박스를 만들고 난 뒤 이미지는 썸네일과 같이 보여지게 하고 그 밑으로 헤딩 한줄과 간략한 정보를 담는 글들을 담아내기 위한 전형적인 카드 박스를 만들자는 생각이였습니다.
<div id="box">
</div>카드 박스의 본체입니다. 이 내부로 모든 객체가 들어갑니다.
<div id="box">
<img class="img" src="./img.jpg" alt="">
</div>위 이미지가 카드의 썸네일을 담당해주고 가장 큰 크기의 카드 최상단으로 들어가서 우선적으로 보여지게 하여 정보의 흐름을 위에서 아래로 구성합니다.
<div id="box">
<img class="img" src="./img.jpg" alt="">
<h1 class="heading">HELLO WORLD!</h1>
<div class="data">
<span class="date">2021-10-21</span>
<span class="user-id">user ID</span>
</div>
<p class="texts">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>그 밑으로 헤딩을 넣어 게시물의 제목을 넣어주고
내부로 게시물 작성 일자와 아이디를 넣어 줬습니다.
*본 내용을 유기적으로 바꿔 부제목 등으로 사용가능 할 수 있도록 하였습니다.
이후 p 태그는 통하여 게시물의 간략한 정보를 담을 수 있게 해 두었습니다.
게시판의 성격에 따라 다른 내용을 담기 편리 할 수 있도록 하기 위함입니다.
본격 CSS를 통한 디자인
카드형 디자인을 통하여 만들 생각을 가지고 시작한 디자인이고 내부 색상은 성격에 따라 달라지기에 우선 기본적으로 놔 두었습니다.
중요한 점은 마우스 오버시 액션을 어떻게 구현 할 것인가였는데 썸네일이 오버시 영상이 재생되어야 할 수도 있으며 단순 이미지일 수도 있고 다양한 변수가 존재했습니다. 우선적으로 이미지만 사용될 점을 감안하여 만들어봤으며 이미지 사이즈와 조화로움을 신경썼습니다.
#box {
width: 300px;
border-radius: 8px;
overflow: hidden;
margin: 100px auto;
transition: all 0.3s cubic-bezier(0.42, 0.0, 0.58, 1.0);
}
#box:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
transform: translateY(-10px);
}세로로 긴 디자인을 생각하고 만들었기에 가로를 기준으로 너비를 고정했으며 중요한 점은 마우스 오버입니다.
박스 테두리를 주지 않고 기본적으로 박스 쉐도우를 안주며 박스의 형태를 명확하게 구분할 수 있게 하고 싶었고 가장 중요한 점은 마우스 오버 시 박스 전체를 위로 올려주어 약간 들어올려지는 듯한 느낌의 트랜지션을 적용하였습니다. 또한 cubic-bezier를 이용하여 ease-in-out으로 자연스럽게 흘러가게 해주었고 오버시에만 박스쉐도우를 적용하여 들어올려지는 느낌을 강조하였습니다.
#box * {
padding: 10px;
}
#box .img {
display: block;
width: 100%;
padding: 0;
}박스 내부에 padding을 10px씩 두어 이미지에 집중할 수 있도록 해주었습니다.
#box .heading {
font-size: 28px;
}
#box .data {
display: flex;
flex-direction: column;
font-size: 12px;
color: #666;
}
#box .data span {
padding: 0;
}
#box .data .date {
margin-bottom: 2px;
}
#box .data .user-id {
font-size: 16px;
color: #000;
font-weight: 600;
}
#box .texts {
font-size: 14px;
line-height: 18px;
}이 외 헤딩의 폰트를 지정해주고 정보에 대한 css를 정리하여 주면 디자인은 완료됩니다.
완성본
마주친 문제점과 고민
박스모델에 대한 이해 부족
웹에서 박스 디자인은 아주 많이 쓰입니다. 박스 모델에 대한 이해가 중요하다는 글 또한 많이 보았습니다. 좋은 디자인과 코드로 만들어져 있는 자료도 구글링 한번에 금세 찾을 수 있었지만 스스로 하나씩 만들어보려고 하니 생각보다 썩 쉽지 않았습니다.
첫번째로 느낀 문제점은 단순한 디자인의 문제가 아닌 스스로 박스 모델에 대한 기초 지식 자체가 부족하다고 느끼는 점이였습니다. 가볍게 써가려고 시작한 작은 목표였지만 다시 처음으로 돌아가야 할 수도 있다는 생각이 들게 해준 코드들이였습니다.
구조를 잘 정리하자...!
저는 웹에서는 결과적으로 html 구조가 가장 중요하다는 점을 항상 놓칩니다. 자랑은 아니지만 이번 박스 디자인을 통하여 더욱 뼈져리게 느낀 것 같습니다.
기능을 넣기 전 어떻게 구현할 것인가
최신 CSS를 통하여 과거 자료에 비하여 간단하고 쉽게 JS를 작성하지 않고 구현할 수 있는 것 같습니다.
하지만 내가 치는 지금 이 코드가 어떤 이유로 만들어야 하는지 무엇을 위해 쓰여지는지 표준에 맞게 작성되는지 등등 단순히 화려함을 위한 코드가 아닌 디자인과 목적에 맞춰 기능을 넣기전 어떤 기술을 이용하여 구현할 것인지가 중요한 점이라는걸 느끼게 되었습니다.
어떻게하면 줄이면서 컴포넌트화 시킬 수 있을까?
css를 적으면서 생각한 점이 코드를 줄일 수는 있겠으나 이 코드들을 단순히 한번에 작성 할 수는 없을지 고민을 하게되었습니다.
추가적으로 기능을 넣고 싶은데...
JS를 통하여 카드를 통하여 새로운 링크로 들어도 가게 하고 싶고 버튼을 통하여 라이크 버튼 등 추가적으로 기능을 넣고 싶지만 디자인적으로 고민이 더 필요한 부분 같아 보입니다.
처음 작성하는 포스트이다 보니 부족한 점이 아주 많아보이네요🥲
지속적으로 작성하며 노력해야겠습니다...!
