본문 바로가기
728x90

CSS46

[CSS] 페이지 제작하기 이런 페이지 만들기.간단하게 3페이지 정도 만들 예정.코드에서 이미지 태그 없이 화살표 아이콘을 사용한 것은 Font Awesome 같은 아이콘 폰트나,CSS ::before 의사 클래스와 함께 사용된 CSS content 속성을 통해 이미지를 대체한 방식참고할 글  >>after, before 부분 알아보기 - 글 하단[CSS] Draw Underline Link Hover Effect (tistory.com) [CSS] Draw Underline Link Hover EffectDraw Underline Link Hover Effect | CSS Menu Hover Effect (youtube.com)아래에 선 맞춰줌.HTML Home Services Contact About CSS*,*:before,.. 2024. 9. 6.
[CSS] 스크롤 바 꾸미기 ::-webkit-scrollbar { width: 26px; /* 세로 스크롤바 너비 */ height: 26px; /* 가로 스크롤바 높이 */}::-webkit-scrollbar-thumb { background-image: url("scrollbar.png"); /* background-position: center; background-size: contain; */}::-webkit-scrollbar-track { background: rgba(2, 39, 253, 0.5); /*스크롤바 뒷 배경 색상*/}width 와 height 를 동일하게 줘서 스크롤바 크기를 동일 시 만듦.아래 스크롤 바 삭제 ::-webkit-scrollbar { width: 26px; /* 세로 스크롤.. 2024. 8. 20.
[CSS] Draw Underline Link Hover Effect Draw Underline Link Hover Effect | CSS Menu Hover Effect (youtube.com)아래에 선 맞춰줌.HTML Home Services Contact About CSS*,*:before,*:after { padding: 0; margin: 0; box-sizing: border-box;}body { background-color: pink;}nav { height: 100vh; width: 70vw; min-width: 600px; display: flex; align-items: center; justify-content: space-around; margin: auto;}a { p.. 2024. 8. 5.
[CSS] aisde 2개 페이지 만들기 보호되어 있는 글 입니다. 2024. 7. 30.
[CSS] Play and Pause in Infinite Slider with CSS Only (2) Play and Pause in Infinite Slider with CSS Only (youtube.com).slider { width: 100%; border: 1px solid red; height: var(--height); overflow: hidden;}.slider .list { display: flex; width: 100%; min-width: calc(var(--width) * var(--quantity)); position: relative;}.slider .list .item { width: var(--width); height: var(--height); position: absolute; left: 100%; animation: autoRun 10s lin.. 2024. 7. 24.
[CSS] Play and Pause in Infinite Slider with CSS Only (1) Play and Pause in Infinite Slider with CSS Only (youtube.com)HTML .. 2024. 7. 23.
728x90