728x90 300x250 Front-end/CSS63 스크롤 모양 변경하기 *::-webkit-scrollbar { width:6px; height: 16px; } *::-webkit-scrollbar-thumb { background-color: #e0e0e0; border-radius: 100px; } *::-webkit-scrollbar-track { background-color: transparent; } 2023. 5. 1. position sticky 안될때 사용법 position:static static 속성은 기본값으로 요소를 일반인 문서의 흐름에 따라 배치한다. top, left, right, bottom, z-index 속성이 아무런 영향도 주지 안는다. positon:fixed fixeld 속성은 일반적인 흐름에서 제거하고 페이지 레이아웃에 공간도 배정하지 않고 뷰포트를 기준으로 고정값을 가진다. position:sticky sticky 속성은 평소에는 position:relative 상대 위치 요로 처리하지만 스크롤이 특정 영역에 들어오면 fixed 처럼 화면에 고정된다. sticky박스의 부모 박스가 스크를box를 벗어나게 되면 다시 일반적인 흐름에 따라 움직이게 된다. sticky 속성이 안될때 top, left, right, bottom 속성 중 하.. 2022. 8. 6. css background-image 여러개 적용하기 .bg{ width: 62px; height: 34px; background-size: 26px 34px, 26px 34px; background-position:0px 0px, 36px 0px; background-repeat: no-repeat; background-image: url(../images/icon1.png), url(../images/icon2.png); } background-image 에 ','로 구분하여 background 이미지 개수 만큼 작성한다. 여러 개의 이미지를 나란히 적용하기 위해 width 값을 이미지 전제 넓이로 작성한다. background-position 을 이용해 각각의 위치를 잡아준다. 2022. 8. 3. a태그 안에 img 공백 없애기 a>img 태그 안에 공백 생기는 오류 해결하기 해결방법 1 - 이미지 태그를 블럭 속성으로 만들면 공백이 어진다. img{display:block;} 해결방법2 - 이미지 정렬 img{vertical-align:bottom;} /*vertical-align:top을 해도 상관없다.*/ 2022. 7. 18. 이전 1 2 3 4 5 ··· 16 다음 728x90 반응형