HTML과 CSS만으로 이것저것 만들어보기
스케치
포트폴리오 홈을 이렇게 만들까 싶어서 그려놓은 스케치다. 세세하게 정리한 건 아니고 그냥 대략적으로 이렇게 만들어야지 정도만 기록해두었다. 아직 포트폴리오를 만들 정도는 아닌 것 같아서 그냥 작은 프로젝트로 만들어봤다.
개발 기록
주요 개발 내용을 정리해보았다. 신경 썼던 부분이나 새로 알게된 부분을 주로 적어보려고 한다. 소스 코드의 경우 관련 부분만 정리했다. (전체 소스 코드는 포스트 마지막 부분의 codepen or github 참고)
HTML 구조
<body>
<div class="cards">
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
</body>cards 컨테이너 안에 5장의 card 아이템이 있는 구조로 만들었다.
처음에 cards 외부에 containers 클래스를 하나 더 만들어서 개발했는데,
의미 없는 요소가 되어서 제거했다.
부채꼴로 겹쳐진 카드 형태로 모양 변경 + 밝기 어둡게
flex로 수평 정렬은 이미 해준 상태다. 이제 이 카드를 곡선 모양으로 겹쳐진 형태로 만들기 위해서 아래와 같이 구현을 했다.
.cards .card {
/* overlap cards */
margin: 0 -40px;
/* if not hovered : dark */
filter: brightness(50%);
}
.cards .card:nth-child(1) {
background-image: url("../images/child.jpg");
/* rotate each card properly */
transform: rotate(-30deg);
}
.cards .card:nth-child(2) {
background-image: url("../images/child2.jpg");
transform: rotate(-15deg) translateY(-60px);
}
...rotate로 회전을 시키고 중앙으로 갈수록 카드를 위쪽으로 살짝 이동(translateY)했다.
카드를 겹치게 하기 위해서 margin 값을 음수로 설정했고, 어둡게 하려고 filter 속성의 brightness값을 50%로 변경했다.
cards 컨테이너 화면 중앙에 위치하기
이제 카드가 부채꼴로 겹쳐진 형태로 잘 나타난다. 하지만 위 사진처럼 컨테이너가 화면의 좌측 상단으로 치우쳐서 나타나서 컨테이너를 화면 중앙으로 옮기기 위해 아래와 같이 처리를 해주었다.
body {
position: relative;
height: 100vh;
}
.cards {
width: 900px;
height: 400px;
/* center the cards container (horizontally & vertically) */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}화면의 중앙에 .cards 컨테이너를 위치시키기 위해서 컨테이너의 position을 absolute로, 부모 요소인 body의 position을 relative로 설정했다.
수직 가운데 정렬을 하기 위해 top, bottom 값을 0, margin 값을 auto로 주었다. 이 경우, height 값이 정의되어 있어야 정렬이 된다. 수평 정렬도 같은 방법으로 left와 right의 값을 0으로, margin 값을 auto로 설정하고 width값도 내부의 card item 전체를 포함할 수 있는 길이인 900px로 설정했다.
card item을 cards container의 중앙으로
container는 중앙 정렬이 되었지만, 내부의 item들이 좌측 상단으로 치우친 걸 확인할 수 있다. container 내부의 item들을 정렬을 해주기 위해 아래 내용들을 추가했다.
.cards {
display: flex;
/* center the items of flex horizontally */
justify-content: center;
/* center the items of flex vertically */
align-items: center;
}
이제 내부의 item들이 컨테이너 중앙에 위치한다. 위쪽에 overflow가 발생한 이유는 item이 rotate 되었기 때문이니 수직 중앙 정렬도 정상적으로 처리된 것이다. 살짝 위로 치우친 부분은 padding-top을 조금 주어서 해결했다.
hover시 transition 처리
마우스를 올렸을 때 다양한 변화를 주기 위해서 아래 코드를 추가했다.
.cards .card {
/* if not hovered : dark */
filter: brightness(50%);
z-index: 0;
transition:
transform .4s,
filter .4s,
z-index .2s;
}
.cards .card:hover {
/* if hovered : light, move up(set on each item), stack on the top */
filter: brightness(100%);
box-shadow: 0 15px 20px 10px rgba(0, 0, 0, .15);
z-index: 1;
}
...
.cards .card:nth-child(2) {
background-image: url("../images/child2.jpg");
/* rotate each card properly */
transform: rotate(-15deg) translateY(-60px);
}
.cards .card:nth-child(2):hover {
/* if hovered, move up a little bit */
transform: rotate(-15deg) translateY(-90px);
}
...
hover시에 z-index를 1로 설정하여 맨 위에 쌓이게 만들었다.
brightness 값을 증가시켜 밝아지게 만들고, box-shadow로 그림자 처리도 해주었다.
변경되는 속성들을 transition으로 자연스럽게 보이게 했다.
브라우저 세로 길이 줄였을 때 잘림 현상 해결
body {
/* do not let the cards go out of the screen */
min-height: 600px;
}min-height를 설정해주어 일정 길이 이하로 작아지지도 않도록 처리해주었더니 잘리지 않고 잘 나타난다!
전체 소스코드
codepen에서 확인하기
https://codepen.io/choiiis/pen/bGYQGVY
github에서 확인하기
https://github.com/choiiis/html-css-toy-projects/tree/main/card
