Ju

자바스크립트 없이 scroll 이벤트와 같은 효과를 나타내는 scoll-snap css 예제.html scroll-snap-type - 부모 요소에 적용 - 축 설정과 스크롤 넘어가는 스타일 지정 - mandatory = 스크롤을 조금만 내려도 다음 자식요소로 넘어감. - proximity = 스크롤을 조금씩 넘겨도 그대로 유지되지만, 스크롤이 다음 요소에 근접하면 다음 자식요소로 넘어감. - both = 가로 세로 축 모두 /* 부모 요소에 적용 */ .scroll-snap-box { scroll-snap-type: y mandatory; /* [축] [넘어가는방식] */ scroll-snap-type: y proximity; scroll-snap-type: x mandatory; scroll-snap..

javascript 없이 css로만 커스텀 라디오 버튼 만들기 custom radio html custom radio css (효과 O) [type="radio"]:checked, [type="radio"]:not(:checked) { /* input 태그 숨기기 */ position: absolute; left: -9999px; } [type="radio"]:checked + label, [type="radio"]:not(:checked) + label { position: relative; padding-left: 28px; /* padding은 label 영역 */ cursor: pointer; line-height: 20px; } [type="radio"]:checked + label:before..

javascript 없이 css로만 커스텀 체크박스 custom checkbox html custom checkbox css [type="checkbox"], [type="checkbox"]:not(:checked) { /* input 태그 none 처리 */ display: none; } [type="checkbox"] + label { position: relative; display: inline-block; width: 24px; height: 24px; margin: 0 2px; background-color: #fff; border: 2px solid steelblue; border-radius: 4px; box-sizing: border-box; vertical-align: middle; }..

1. 체크 html css .check-icon { display: inline-block; width: 20px; height: 34px; border-bottom: 10px solid rgb(65, 100, 255); border-right: 10px solid rgb(65, 100, 255); transform: rotate(45deg); } 결과 2. 삼각형 html css .arrow-icon { display: inline-block; border-top: 20px solid transparent; border-left: 40px solid gray; border-bottom: 20px solid transparent; } 결과 3. 사다리꼴 html css .trapezoid-icon { d..

filter 전체 속성 (이미지에 그래픽 효과 적용) filter : none; (효과 없음) filter : blur(); (블러 효과) filter : brightness(); (밝고 어두움 정도) filter : contrast(); (대비) filter : drop-shadow(); (그림자) filter : grayscale(); (그레이스케일) filter : hue-rotate( deg); (색조) filter : invert(); (반전) filter : opacity(); (투명도) filter : saturate(); (채도) filter : sepia(); (세피아 효과) filter : url(); (이미지 경로) · 다중 효과 가능 (filter: grayscale(0.5) blu..

Flex Container(부모 요소) flex container 지정 display: flex; => 기본 가로방향 배치. 자신이 가진 내용의 width 만큼 차지. height는 컨테이너의 높이만큼 display: inline-flex; => block과 inline-block의 관계와 동일. inline-block처럼 동작(컨테이너가 요소만큼만 차지) flex-direction - flex container의 자식 요소 방향 설정 flex-direction: row; => 가로방향(기본값) flex-direction: column; => 세로방향 flex-direction: row-reverse; => 역순으로 가로방향 flex-direction: column-reverse; => 역순으로 세로방향..

변수 - 중괄호 안에서 선언 되었으면 내부에서만 사용 가능 - 중괄호 안에서 선언 되었어도 전역변수로 설정 시 !global 속성 추가 // 변수 선언 $변수이름: blue; // 사용 시 .text { color: $변수이름; } .box1 { $color: #111 !global; // 내부에서 선언 했지만 전역변수 background: $color; } .box2 { background: $color; // 전역변수기에 에러 안남 } 부모 선택자 (&) // & 사용하여 부모 선택 .fs { &-small { font-size: 12px; } &-medium { font-size: 14px; } &-large { font-size: 16px; } } // 컴파일 시 .fs-small { font-s..

html 어디에서나 쓸 수 있는 전역변수를 선언할 땐, :root { --변수이름: 값; } :root 안에 지정하여 주면 됩니다. 변수이름을 직접 설정하여 사용하고, 변수 앞에 '--'를 붙여 사용해줍니다. 값은 css에서 사용하는 모든 값을 넣을 수 있습니다. 선언한 변수를 사용할 때, p { color: var(--변수이름); } 지정한 변수이름을 var() 안에 넣어주면 됩니다. 예를 들어 메인 컬러를 지정하여 모든 곳에서 사용하고 싶을 때, :root { --main-color: #eee; } .text { color: var(--main-color); } :root 의사 클래스에 전역변수를 지정하여 사용합니다. css 변수는 대소문자를 구분하기 때문에 주의하셔야 합니다. :root { --ma..