코딩으로 tistory 꾸미기 (3) 썸네일형 리스트형 코드블럭 커스텀하기 (Mac Style) BEFOREAFTER 1. CSS 편집CSS/* 코드 블럭 *//* 현재 코드블헉의 language 정보 표시 */pre { position: relative;}pre::after { content: attr(data-ke-language); position: absolute; bottom: 8px; right: 12px; color: #cfd2d1; font-size: 12px;}.hljs { display: flex !important; flex-direction: column; padding: 0 !important; font-size: 14px; border-radius: 8px; box-shadow: 0 12px 24px rgb(0 0 0 / 40%); color: .. 스크롤바 커스텀하기 BEFOREAFTER CSS/* Scrollbar */::-webkit-scrollbar { width: 14px; /* 세로축 스크롤바 길이 */ height: 14px; /* 가로축 스크롤바 길이 */}/* Top, Left 방향의 이동버튼 */::-webkit-scrollbar-button:start { background-color: rgba(255, 255, 255, 0);}/* Bottom, Right 방향의 이동버튼 */::-webkit-scrollbar-button:end { background-color: rgba(255, 255, 255, 0);;}/* 스크롤 바 배경 색상 */::-webkit-scrollbar-track-piece { background.. 상단바 고정하기 BEFOREAFTER CSS#header { position: fixed; z-index: 999; top: 0; width: 100%; background-color: rgba(255, 255, 255, 0.9);}#content{ margin-top: 80px;}/* Media Screen - Mobie */@media screen and (max-width:767px) { #content{ margin-top: 60px; } #header {1. position'relative' → 'fixed'로 변경할 경우 위 쪽에 있던 상단바의 컴포넌트가 말 그대로 항상 고정되어 스크롤을 하더라도 화면상에 나타나게 된다. 2. z-indexz-index란 3차원의 개념으로 화면상의 가로와.. 이전 1 다음
