등록한 글의 하단에 배치되어 현재 글과 관련 있는 글들을 보여 주는 메뉴입니다. PC 화면에서는 가로로 4개, 모바일 화면에서는 가로 2개씩 2줄로 역시 4개의 글 링크가 있습니다.
그대로 사용해도 괜찮은 기능입니다. 단지 자신이 원하는 형태로 수정하려면 거의 불가능할 정도로 코드가 복잡합니다. CPU 연산을 필요로 하는 CSS 코드로 짜여 있습니다.
width: 101.621621621621622%;
margin-left: -1.621621621621622%;
padding-left: 1.621621621621622%;
padding-bottom: 68.181818181818182%;
width: 103.571428571428571%;
margin-left: -3.571428571428571%;
padding-left: 3.448275862068966%;
페이지 로딩 과정에 연산이 필요한 코드들입니다. 코드 자체가 손대기 힘들 정도로 난해하기 때문에 inline-block으로 되어 있는 현재의 컨테이너 구조를 간단한 flex box로 변경하면 차후에 수정하기 간편합니다. 예전에는 구 버전의 웹브라우저와 호환성에 문제가 있었지만 현재는 대부분의 브라우저들이 Flex를 지원합니다.
필요할 경우 테스트 용도로 사용해 보세요. 코드를 수정할 때에는 항상 원본을 백업해 놓습니다. 수정한 코드에 오류가 있을 경우 다시 북클럽 본래의 코드를 복구하기 위한 목적입니다.
※ 북클럽 스킨의 style.css 파일을 변경하는 작업입니다.
※ 수정 코드에서는 관련글 링크의 타이틀을 PC/모바일 2줄로 보여 줍니다. 원래 코드는 PC 1줄, 모바일 2줄이었습니다.
※ 오류 발생하면 원래 코드로 복구합니다. 개인적으로 수정한 내용 때문에 호환이 안될 수 있습니다.
※ 수정 방법 텍스트 파일로 첨부합니다.
Flex Box 레이아웃을 Block 레이아웃과 비교하면 하나의 큰 장점이 있습니다.
Flex container(parent element)와 Flex items(child elements)로 이루어진 Flex Box는 그 사이에 의도하지 않은 공백(whitespace)이 생기지 않습니다. empty space 혹은 blank space라고도 부릅니다.
Block 레이아웃으로 여러 개의 elements를 나열하면 그 사이에 몇 픽셀 단위의 공백이 발생하는 경우가 있습니다. 폭 1000px인 컨테이너에 250px인 박스를 4개 넣으면 이론적으로 완벽합니다. 하지만 이러한 의도하지 않은 공백이 그 사이에 끼어들면 전체 프레임이 깨질 수 있고 브라우저가 이것을 감안하여 보정 작업을 하는 경우가 있습니다.
이러한 이유로 Block 레이아웃을 사용할 때에는 위의 경우 박스의 폭을 246px 정도로 줄이거나 HTML 코드를 하나의 줄로 작성하여 불필요한 여백이 발생할 여지를 줄여야 합니다. 높이의 경우도 동일합니다.
만약 정확한 계산에만 의존하여 250px로 코드를 짜면 overflow가 발생하여 1개의 박스가 다음 줄로 넘어가거나 틀이 깨지는 오류가 발생합니다.
Flex Box 레이아웃은 이런 종류의 공백(whitespace)이 발생하지 않습니다.
PC용 코드 삭제
- Flex Box에서 불필요한 항목
.related-articles ul li:first-child {
margin-left: 0;
}
PC용 코드 수정
- 원본 코드를 변경한 수정 코드
.related-articles ul {
display: flex;
flex-wrap: wrap;
width: 100%;
vertical-align: top;
}
.related-articles ul li {
width: 25%;
padding: 0 8px;
box-sizing: border-box;
}
.related-articles ul li figure {
display: block;
width: 100%;
margin-bottom: 9px;
background-color: #f8f8f8;
}
.related-articles ul li .title {
overflow: hidden;
max-width: 95%;
font-size: 0.875em;
line-height: 1.4;
text-overflow: ellipsis;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
PC용 코드 그대로 유지
.related-articles {
margin-bottom: 55px;
}
.related-articles h2 {
margin-bottom: 15px;
font-weight: 600;
font-size: 1em;
}
.related-articles ul li a {
color: #555;
}
.related-articles ul li a:hover,
.related-articles ul li a:focus {
color: #333;
}
.related-articles ul li figure img {
width: 100%;
height: auto;
}모바일용 코드 삭제
- Flex Box에 불필요한 항목
@media screen and (max-width:767px)
.related-articles ul {
width: 103.571428571428571%;
margin-left: -3.571428571428571%;
}
.related-articles ul li figure {
margin-bottom: 9px;
}
.related-articles ul li .title {
height: 2.8em;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
모바일용 코드 수정
- 원본 코드를 변경한 수정 코드
@media screen and (max-width:767px)
.related-articles ul li {
width: 50%;
margin-bottom: 15px;
}
모바일용 코드 그대로 유지
@media screen and (max-width:767px)
.related-articles {
margin-bottom: 21px;
padding: 0 24px;
}
.related-articles h2 {
margin-bottom: 19px;
}
댓글