티스토리 스킨 "BookClub"
skin.html
main-slider 실행 조건 수정
원본 코드를 수정하게 되면,
- 일부 구간에서 실행 조건이 2개에서 1개로 줄어듭니다.
- 사진 전체의 URL 링크에서 "바로가기" 버튼에 한정된 링크로 변경됩니다.
- 불필요한 코드를 삭제했으므로 skin.html 파일의 크기도 약간 줄어듭니다.
※ 슬라이더 관련 코드 원본 91행에서 수정 58행으로 축소
- 초기 페이지 로딩 속도가 아주 조~금 빨라질 것입니다.
skin.html 원본의 조건문 구조
<s_if_var_promotion-1-image>
......
<!-- 조건1 -->
promotion-1-url이 있으면
inner 컨테이너 만들고
박스 만들고
promotion-1-text가 있으면 등록하고
promotion-1-color가 있으면 등록하고
바로가기 버튼 등록
<!-- 조건2 -->
promotion-1-url이 없으면
inner 컨테이너 만들고
박스 만들고
promotion-1-text가 있으면 등록하고
promotion-1-color가 있으면 등록하고
바로가기 버튼 제외
promotion-2
promotion-3
동일한 코드
......
</s_if_var_promotion-1-image>
원본 코드의 URL 링크가 사진 전체에 걸려 있습니다. 조건 1과 2의 차이가 URL 링크 유무입니다. 그것 때문에 조건문을 2개 사용하여 동일한 작업을 2회 반복하였습니다. 링크 위치를 수정하면 코드 단축이 가능합니다.
skin.html 수정 조건문 구조
<s_if_var_promotion-1-image>
......
<!-- 조건 -->
inner 컨테이너 만들고
박스 만들고
promotion-1-text가 있으면 등록하고
promotion-1-color가 있으면 등록하고
promotion-1-url이 있으면
바로가기 버튼 등록하고 url 링크
promotion-2
promotion-3
동일한 코드
......
</s_if_var_promotion-1-image>
수정 코드의 URL 링크는 "바로가기" 버튼으로 한정하였습니다. 이처럼 수정하면 조건문 1개로 전체 작업을 진행할 수 있습니다. 수정 작업에 필요한 설명과 소스 파일 등록합니다.
skin.html main-slider 수정용 코드
<s_if_var_promotion-1-image>
<div class="main-slider">
<ul>
<li style="background-image: url();">
<span class="inner">
<span class="box">
<s_if_var_promotion-1-text>
<span class="text"<s_if_var_promotion-1-color> style="color:"</s_if_var_promotion-1-color>>
</span>
</s_if_var_promotion-1-text>
<s_if_var_promotion-1-url>
<a href="">
<span class="btn">바로가기</span>
</a>
</s_if_var_promotion-1-url>
</span>
</span>
</li>
<s_if_var_promotion-2-image>
<li style="background-image: url();">
<span class="inner">
<span class="box">
<s_if_var_promotion-2-text>
<span class="text"<s_if_var_promotion-2-color> style="color:"</s_if_var_promotion-2-color>>
</span>
</s_if_var_promotion-2-text>
<s_if_var_promotion-2-url>
<a href="">
<span class="btn"<s_if_var_promotion-2-btn-color> style="background-color:"</s_if_var_promotion-2-btn-color>>바로가기</span>
</a>
</s_if_var_promotion-2-url>
</span>
</span>
</li>
</s_if_var_promotion-2-image>
<s_if_var_promotion-3-image>
<li style="background-image: url();">
<span class="inner">
<span class="box">
<s_if_var_promotion-3-text>
<span class="text"<s_if_var_promotion-3-color> style="color:"</s_if_var_promotion-3-color>>
</span>
</s_if_var_promotion-3-text>
<s_if_var_promotion-3-url>
<a href="">
<span class="btn"<s_if_var_promotion-3-btn-color> style="background-color:"</s_if_var_promotion-3-btn-color>>바로가기</span>
</a>
</s_if_var_promotion-3-url>
</span>
</span>
</li>
</s_if_var_promotion-3-image>
</ul>
</div>
</s_if_var_promotion-1-image>
main-slider 바로가기 버튼 CSS 수정
style.css
/* style.css 파일 490행 */
.main-slider ul li a {
display: table;
width: 100%;
height: 100%;
text-decoration: none;
background-color: rgba(0,0,0,0.15);
}버튼의 크기가 컨테이너 역할을 하는 박스의 "width: 100%;" 폭을 차지하고 "display: table;" 지정되어 있습니다. 박스의 폭이 버튼보다 길기 때문에 마우스 커서가 반응하는 범위가 넓습니다.
버튼 크기에 맞게 링크 크기를 줄이려면 코드를 수정해야 합니다.
- "display: inline-block;"으로 변경
- "width: 100%;" 삭제
수정한 결과는 아래와 같습니다. 이 작업은 꼭 해야 하는 것은 아닙니다. 필요할 경우 응용하세요!
.main-slider ul li a {
display: inline-block;
height: 100%;
text-decoration: none;
background-color: rgba(0,0,0,0.15);
}main-slider 바로가기 버튼 스타일 오류 복구
skin.html
2022년 4월 15일 추가
오늘 갑자기 바로가기 버튼의 hover 색 변화 코드가 작동하지 않습니다. CSS 파일의 다른 부분 수정에 문제가 있었거나 그럴리는 없겠지만 티스토리 서버로 인한 문제 발생(?) 가능성도 배제할 수 없습니다.
어쨌든 재발 여지를 없애기 위하여 버튼 hover에 "!important"를 추가하여 강제로 우선순위를 부여하였습니다. 문제없으면 수정하지 않습니다.
<!-- skin.html 파일 <head>, <style> 태그 안의 코드 수정 -->
다음 3줄 끝 부분에 " !important;"를 입력합니다.
.main-slider ul li:nth-child(1) .btn:hover {background-color: !important;}
.main-slider ul li:nth-child(2) .btn:hover {background-color: !important;}
.main-slider ul li:nth-child(3) .btn:hover {background-color: !important;}
댓글