25.03.04

자바스크립트 없이 만드는 슬라이더 3종 정리✅ 슬라이더 유형 요약 비교표구분고정 탭형 슬라이더고정 화살표형 슬라이더연결 슬라이드형 슬라이더조작 방식탭(label) 클릭상태에 따라 달라지는 화살표 클릭슬라이드 안쪽 화살표 클릭버튼 위치슬라이드 바깥 탭 영역에 고정슬라이드 바깥 화살표 컨트롤 박스각 슬라이드 안에 위치슬라이드 이동 원리.slides 전체 이동.slides 전체 이동.slides 전체 이동사용 요소 + (탭용) + (이전/다음용) + (이전/다음용)레이아웃 키워드.tabs, .slides { flex }.controlbox, .slides { flex }.slider-wrapper { overflow: hidden }, .slides { flex }라벨 개수슬라이드 수와 동일슬라이드 수 ..

CSS 탭 메뉴 (자바스크립트 없이) 순서input[type="radio"]를 사용해서 각각의 탭에 해당하는 선택 상태를 만든다.각 탭에 label을 달아서 클릭 시 input이 체크되도록 연결 (for, id 사용).탭에 맞는 컨텐츠는 div로 나눠서 각각의 영역을 만든다.CSS에서 input:checked ~ .contents .tab1 { display: block; } 이런 식으로체크된 input에 따라 어떤 내용이 보일지 결정한다.나머지 탭 내용은 display: none; 처리해서 안 보이게 함.탭 디자인은 Flex로.** → 하나만 선택할 수 있음.label → 탭 역할. 누르면 해당 input이 체크됨.:checked → 이걸로 "누른 탭" 찾기. CSS :checked 선택자를 이용~ ..

CSS의 display 속성에서 none과 block의 차이를 간단히 정리하면 다음과 같습니다:1. display: none특징: 요소를 화면에서 완전히 숨깁니다.해당 요소는 DOM(문서 객체 모델)에는 남아 있지만, 화면에는 표시되지 않고 공간도 차지하지 않습니다.마치 요소가 존재하지 않는 것처럼 동작합니다.사용 예시:메뉴 숨기기, 팝업 닫기 등 요소를 완전히 제거해야 할 때 사용됩니다..hidden { display: none;}2. display: block특징: 요소를 블록 레벨로 표시합니다.블록 요소는 기본적으로 가로 전체를 차지하며, 다른 요소는 그 아래로 밀려납니다.줄바꿈이 발생하며, width, height, margin, padding 등의 스타일을 적용할 수 있습니다.사용 예시:,, ..

flex 축약형 속성 이해하기flex 속성은 아래 3가지 속성을 한 번에 설정하는 축약형:flex: flex-grow flex-shrink flex-basis;세 가지 값의 의미첫 번째 값 (flex-grow):남는 공간을 얼마나 차지할 것인지의 비율기본값: 0 (늘어나지 않음)1 이상이면 남는 공간을 해당 비율만큼 차지두 번째 값 (flex-shrink):공간이 부족할 때 얼마나 줄어들지의 비율기본값: 1 (다른 요소와 동일하게 줄어듦)0이면 줄어들지 않음, 클수록 더 많이 줄어듦세 번째 값 (flex-basis):요소의 기본 크기px, %, em 등의 단위 사용auto는 요소의 원래 크기를 사용자주 쓰는 축약 표현들flex: 0 0 20%의미:늘어나지 않고 (flex-grow: 0)줄어들지도 않고 (..