scroll-snap 페이지 스크롤 시 사용자에게 보여주고 싶은 영역에서 멈추게 해주는 기능 큰 이미지를 사용하는 풀스크린 레이아웃이나 갤러리용 상이트에 적용 하기 좋음. scroll-snap 시 꼭 필요한 css 속성 height:100vh; 감싸고 있는 영역의 높이와 요소의 높이를 100vh로 맞춰줘야한다. scroll-snap-type 속성 값 종류 scroll-snap-type : value 의미 x 가로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다. y 세로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다. both 상하좌우 스크롤시 빠르게 지나가거나 멈추게 할 수 있다. scroll-snap-type 위치 지정 속성 종류 의미 mandatory 현재 표시되는 영역이나 다음 영역 ..
본 글은 개인 공부용으로 제작되었으며 틀린 부분이 있어서 알려주시거나 글에 없는 내용을 댓글로 남겨주시면 감사하겠습니다 ' U ' CSS 코드 구분하기 예제 코드 #gnb{ position:absolute; } 셀렉터(선택자) : #gnb 선언 블록 : { position:absolute} 선언 : position:absolute; 속성 : position 값 : absolute Class 명 & ID명 생성 규칙 첫 글자는 반드시 영어로 시작한다. 공백은 사용하지 않는다. 영어,숫자, -(하이픈), _(언더바) 만 사용한다. CSS 적용 우선순위 계산 종 류 값 !important 최고 순위 #id 100 .class 10 tag 1 * 0 예시코드 div#hello -> 1+ 100 = 101 로 우..
HTML은 물론 CSS 조차 몇 백줄이 나오고.. 클래스는 못찾겠고.. 뒤죽박죽인 나의 코드들.. 해결점을 찾기 위해 뒤적거리다 나도 모르게 안좋은 습관을 가지고 있었다..! CSS 안좋은 습관, 본인한테 해당되는지 한 번 확인해 보는 것도 괜찮을 듯 합니다. 1.HTML 기본 속성 무시하지 말기 HTML 에는 인라인 태그, 블록 태그 등 여러 태그들이 존재한다. 하지만 그 태그들의 본연의 성질을 무시하고 인라인태그에 block 요소를 주어서 굳이 크기를 주는 경우가 있는데 이것은 잘못 사용하는 예이다. 예를 들어 태그는 인라인 태그 이다. 굳이 인라인 태그에다 display:block;을 준 뒤 크기를 주는 경우가 있는데 이것은 잘못 된 습관이니 고치도록 하자. 2. !important 난사하지 말기...
JavaScript를 쓰지않고 CSS 로만 Dropdown 메뉴를 만들어 보도록 하겠습니다. 핵심은 :hover 효과와 display:none; 속성을 잘 활용하는 것. :hover = mouse를 올렸을 때 라는 경우의 수 display = 요소를 어떻게 보여줄지 결정하는 css 속성 1. dropdown menu를 ul li ul 로 html 짠 경우 html 코드 (일부) slide1 ▼ sub_slide1 sub_slide2 css 적용 (일부) /* 서브메뉴 숨기기 */ #gnb li ul{ display:none; } /*메인메뉴 마우스가 올라가면 텍스트 아래 검은 테두리 만들기 */ #gnb > li:hover > a{ border-bottom:3px solid black; } /* 메인메뉴..
