😢 커버 커스텀 도전기 : 갤러리 CSS 구조 분석!
갤러리 커버 HTML을 분석해 봤으니 이제는 스타일을 살펴볼 차례!
HTML이 뼈대라면 CSS는 그 위에 입히는 옷 같은 존재다.
어떤 색을 쓸지, 여백은 얼마나 둘지, 크기나 정렬은 어떻게 할지 등을 결정하는 게 CSS다.
그럼 포트폴리오의 갤러리 커버에는 어떤 스타일이 적용되어 있을까?
직접 CSS를 하나씩 뜯어보면서 어디를 수정하면 원하는 디자인을 만들 수 있을지 살펴보자!
💡 HTML에 대한 내용은 아래 링크를 참고해 주세요!
[Info🔍/HTML&CSS] - [Portfolio 스킨] 27. 홈 화면의 안 쓰는 커버 커스텀: 갤러리 HTML 구조 분석부터 시작!
🔧 포트폴리오 스킨 갤러리 CSS 구조를 하나씩 살펴보자!
✔ 티스토리 스킨의 CSS를 확인하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 화면으로 들어가면 된다.
💻 확인할 부분 : type_post
블로그의 메인 화면에서 게시글 목록을 갤러리 형식으로 보여준다.
/* type_post - 갤러리 커버 */
.type_post {
max-width: 1180px;
margin: 120px auto -20px auto;
overflow: hidden;
}
.type_post:after {
content: '';
display: block;
clear: both;
}
.type_post .list_post,
.category_type_post .list_category {
margin: 0 -10px;
padding: 0;
list-style: none;
}
.list_post .item_post,
.category_type_post .item_category {
float: left;
width: 25%;
margin-bottom: 20px;
}
.list_post .link_post,
.category_type_post .link_category {
position: relative;
display: block;
margin: 0 10px;
padding-top: 143%;
background-size: cover;
background-position: 50% 50%;
}
.list_post .item_post:hover .link_post:before,
.category_type_post .item_category:hover .link_category:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.65);
}
.list_post .info .date,
.category_type_post .date {
display: none;
margin-top: 40px;
font-size: 16px;
font-weight: 400;
line-height: 1.31;
}
.list_post .link_post:hover .info,
.category_type_post .link_category:hover .info {
display: flex;
}
.list_post .link_post .info,
.category_type_post .link_category .info {
position: absolute;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.list_post .link_post .info .name,
.category_type_post .link_category .info .name {
display: block;
width: calc(100% - 80px);
max-height: 65px;
margin: 0 auto;
font-size: 20px;
font-weight: 500;
line-height: 1.33;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* media query - mobile */
@media screen and (max-width: 1023px) {
.type_post {
margin: 60px auto 0 auto;
}
.title_section {
margin: 0 0 20px 0;
font-size: 16px;
text-align: left;
}
.type_post .title_section {
text-align: center;
}
.list_post, .category_type_post {
margin: 0 -1px;
}
.list_post .item_post,
.category_type_post .item_category {
margin-bottom: 1px;
}
.list_post .link_post,
.category_type_post .link_category {
margin: 0 0.5px;
}
.item_post .link_post:before,
.category_type_post .item_category .link_category:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.65);
}
.list_post .link_post .info,
.category_type_post .link_category .info {
display: flex;
}
.list_post .link_post .info .name,
.category_type_post .link_category .info .name {
width: calc(100% - 32px);
font-size: 16px;
}
}
/* media query - mobile specific */
@media screen and (max-width: 375px) {
.list_post .link_post .info .name,
.category_type_post .link_category .info .name {
width: calc(100% - 32px);
font-size: 13px;
}
}
📝 코드 하나씩 확인하기
🔹 갤러리 목록(.type_post)
📌 적용 위치
📌 코드 설명
.type_post {
max-width: 1180px;
margin: 120px auto -20px auto;
overflow: hidden;
}
.type_post:after {
content: '';
display: block;
clear: both;
}✔ max-width: 1180px; → 갤러리의 최대 너비를 1180px로 제한.
✔ margin: 120px auto -20px auto; → 갤러리 박스의 바깥 여백 설정 (위 120px, 오른쪽/왼쪽 자동, 아래 -20px).
✔ overflow: hidden; → 갤러리 내용이 너비보다 많아서 넘칠 경우 숨김 처리.
📍 :after 가상 요소로 float 정리
float 속성을 사용하면 부모 요소가 자식 요소의 높이를 인식하지 못하는 경우가 있다 → 이를 해결하기 위해 clear: both;를 적용해서 float 해제함.
🔹 갤러리 게시글(.list_post)
📌 적용 위치
📌 코드 설명
.type_post .list_post,
.category_type_post .list_category {
margin: 0 -10px;
padding: 0;
list-style: none;
}✔ margin: 0 -10px; → 내부 li (여기선 .itme_post) 요소의 좌우 여백을 균형 맞추기 위해 마이너스 마진 사용.
✔ padding: 0; → 기본적인 ul (여기선 .list_post)의 패딩 제거.
✔ list-style: none; → 기본 리스트 스타일 제거.
🔹 개별 게시글(.item_post)
📌 적용 위치
📌 코드 설명
.list_post .item_post,
.category_type_post .item_category {
float: left;
width: 25%;
margin-bottom: 20px;
}✔ float: left; → 가로로 정렬한다.
✔ width: 25%; → 4개씩 한 줄에 배치된다. (100% ÷ 4 = 25%)
✔ margin-bottom: 20px; → 개별 게시글 바깥 여백 아래에 20px 추가.
🔹 갤러리 게시글의 썸네일(.link_post)
📌 적용 위치
📌 코드 설명
.list_post .link_post,
.category_type_post .link_category {
position: relative;
display: block;
margin: 0 10px;
padding-top: 143%;
background-size: cover;
background-position: 50% 50%;
}✔ position: relative; → 내부 요소(제목, 오버레이 효과 등)를 배치할 때 기준점 역할.
✔ display: block; → a 태그를 블록 요소로 만들어 넓이와 높이 지정 가능하다.
✔ margin: 0 10px; → 썸네일 바깥 여백을 설정해 각 게시글 사이의 간격을 조정한다.
✔ padding-top: 143%; → 높이를 넓이 대비 143%로 자동 설정한다.
✔ background-size: cover; → 배경 이미지가 요소 크기에 맞게 꽉 차도록 설정한다.
✔ background-position: 50% 50%; → 배경 이미지의 중심을 가운데 정렬한다.
🔹 갤러리 게시글의 썸네일에 마우스를 올렸을 때
📌 적용 위치
📌 코드 설명
.list_post .item_post:hover .link_post:before,
.category_type_post .item_category:hover .link_category:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.65);
}마우스를 올리면 .link_post 위에 검은색 반투명 오버레이 효과가 추가된다.
✔ position: absolute;와 top: 0; left: 0; right: 0; bottom: 0; → 오버레이 효과가 완전히 덮도록 설정.
✔ background-color: rgba(0, 0, 0, 0.65); → 65% 투명도를 가진 검은색 배경
🔹 게시글 정보(.info)
📌 적용 위치
📌 코드 설명
.list_post .link_post .info,
.category_type_post .link_category .info {
position: absolute;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
top: 0;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.list_post .link_post:hover .info,
.category_type_post .link_category:hover .info {
display: flex;
}게시글 정보(.info)는 기본적으로 display: none;이지만 마우스를 올리면 display: flex;로 변경되어서 보이게 됨.
✔ position: absolute; top: 0; width: 100%; height: 100%; → 부모 요소(.link_post)를 꽉 채운다.
✔ display: none; flex-direction: column; align-items: center; justify-content: center; → 가운데 정렬.
✔ color: #fff; → 텍스트 색상 흰색.
✔ text-align: center; → 텍스트 가운데 정렬.
🔹 게시글 제목(.info .name)
📌 적용 위치
📌 코드 설명
.list_post .link_post .info .name,
.category_type_post .link_category .info .name {
display: block;
width: calc(100% - 80px);
max-height: 65px;
margin: 0 auto;
font-size: 20px;
font-weight: 500;
line-height: 1.33;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}✔ display: block; → 제목을 블록 요소로 변경한다.
✔ width: calc(100% - 80px); → 양쪽 40px씩 여백을 주기 위해 전체 너비에서 80px 빼기.
✔ max-height: 65px; → 두 줄까지만 표시하도록 높이 제한.
✔ text-overflow: ellipsis; overflow: hidden; → 넘치는 텍스트는 말줄임표(...) 표시.
✔ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; → 두 줄까지만 보이게 하고 나머지는 숨김.
🔹 게시글 날짜(.info .date)
📌 코드 설명
.list_post .info .date,
.category_type_post .date {
display: none;
margin-top: 40px;
font-size: 16px;
font-weight: 400;
line-height: 1.31;
}✔ display: none; → 기본적으로 날짜 숨김
📐 @media screen and (max-width: 1023px)
반응형 디자인(미디어 쿼리, media query)을 적용해서 모바일 환경에 따라 갤러리 커버의 스타일을 최적화한다.
max-width: 1023px → 태블릿 및 모바일(가로 모드 포함)에 대응하는 스타일
max-width: 375px → 작은 스마트폰(아이폰 SE, 갤럭시 미니 등)에 대응하는 스타일
🔹 갤러리 목록(.type_post)의 여백 변경
📌 적용 위치
📌 코드 설명
.type_post {
margin: 60px auto 0 auto;
}원래 margin: 120px auto -20px auto;였는데, 모바일에서는 margin: 60px auto 0 auto;로 변경됨 → 위쪽 여백을 줄여서 화면을 좀 더 타이트하게 정렬
🔹 커버 목록의 제목(.title_section)
📌 적용 위치
📌 코드 설명
.title_section {
margin: 0 0 20px 0;
font-size: 16px;
text-align: left;
}
.type_post .title_section {
text-align: center;
}기본적으로 커버 목록의 제목은 왼쪽 정렬이지만 갤러리 커버 목록의 제목(.type_post .title_section)은 예외적으로 text-align: center;로 가운데 정렬된다.
✔ margin-bottom: 20px; → 갤러리 목록의 바깥쪽 여백 아래에 20px 추가.
✔ font-size: 16px; → 글자 크기를 16px로 축소.
✔ text-align: left; → 기본적으로 왼쪽 정렬.
🔹 갤러리 게시글(.list_post)의 마진 조정
📌 적용 위치
📌 코드 설명
.list_post, .category_type_post {
margin: 0 -1px;
}✔ margin: 0 -1px; → 갤러리 게시글의 바깥쪽 여백 좌우에 20px 추가.
🔹 개별 게시글(.item_post)의 여백 조정
📌 적용 위치
📌 코드 설명
.list_post .item_post,
.category_type_post .item_category {
margin-bottom: 1px;
}원래 margin-bottom: 20px;이었는데 margin-bottom: 1px;로 변경 → 목록 간격을 최소화해서 화면을 꽉 채우는 효과.
🔹 갤러리 게시글의 썸네일(.link_post) 스타일 변경
📌 적용 위치
📌 코드 설명
.list_post .link_post,
.category_type_post .link_category {
margin: 0 0.5px;
}모바일에서는 .link_post(썸네일 이미지)의 좌우 마진을 0 0.5px로 조정 → 여백을 줄여서 화면이 꽉 차 보이게 한다.
🔹 갤러리 게시글의 썸네일에 오버레이 효과
📌 코드 설명
.item_post .link_post:before,
.category_type_post .item_category .link_category:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.65);
}PC에서는 마우스를 올려야(:hover) 오버레이가 나타나지만 모바일에서는 기본적으로 .link_post 위에 오버레이가 적용된다.
→ 마우스 hover가 없는 터치스크린 환경에서도 가독성을 높이기 위한 조치.
🔹 게시글 정보(.info) 기본 표시
📌 코드 설명
.list_post .link_post .info,
.category_type_post .link_category .info {
display: flex;
}PC에서는 마우스를 올려야(:hover) .info가 보였지만 모바일에서는 기본적으로 표시된다 → 터치스크린 환경에서 제목이 항상 보이게 설정.
🔹 (게시글 제목).info .name의 너비와 글자 크기 조정
📌 코드 설명
.list_post .link_post .info .name,
.category_type_post .link_category .info .name {
width: calc(100% - 32px);
font-size: 16px;
}제목 너비를 calc(100% - 32px);로 조정해서 좌우 여백을 확보한다.
폰트 크기를 16px로 줄였다.
📐 @media screen and (max-width: 375px)
🔹 갤러리 게시글의 썸네일(.link_post) 스타일 변경
📌 코드 설명
.list_post .link_post .info .name,
.category_type_post .link_category .info .name {
width: calc(100% - 32px);
font-size: 13px;
}작은 화면에서 제목이 너무 커서 줄바꿈 되지 않도록 폰트 크기를 13px로 조정.
✔ font-size: 16px; → font-size: 13px;
이제 갤러리 커버의 HTML과 CSS 구조를 모두 분석해 봤다.
어떤 요소가 어떤 역할을 하는지 하나씩 뜯어보니까 처음엔 복잡해 보였던 코드도 조금은 알 거 같기도?
하지만!
이제 진짜 중요한 단계가 남았다.
내 블로그에 맞게 커스텀하는 것!
분석만 하고 끝낼 순 없잖아? 😏
지금 갤러리 커버의 기본 스타일이 마음에 안 든다면 내 스타일대로 바꿔버리면 그만이지!
다음 편에서는 갤러리 커버를 내 취향에 맞게 커스텀해볼 거다.
썸네일 크기를 조정하고, 마우스 오버 효과까지 살짝 손봐서 지금보다 훨씬 마음에 디자인으로 만들 거다.
그럼 3탄에서 본격적으로 커스텀 작업 시작해 보자!
