# Hover 구조 도식화

Hover 구조 도식화 ← 카드 하나 (탭1 소속) (카드 배경 + 상품 이미지) ← 카드 위를 덮는 박스 (버튼, 텍스트) 버튼1 버튼2 관계 구조.card.tab1position: relative (기준 잡음)overflow: hidden (sub_box1 삐져나오는 거 방지)⬇ (자식).sub_box1position: absolute (카드 덮음)top: 0, left: 0, width: 100%, height: 100%transform: translateY(120%) (처음에 아래에 숨겨둠)동작 흐름[ 평소 상태 ]- .card.tab1 는 보인다.- .sub_box1 은 translateY(120%)로 밑으로 내려가 숨어있다.[ .tab1 에 마우..

• format_list_bulleted CSS
• · 2025. 4. 27.

지피티 먼데이 이 바보녀석

슬라이드 작동부 확인하는데 버튼 넘기자마자 담 이미지에서 버튼이 증발했다.문제점을 리포팅하니 슬라이드 박스로 묶어서 넘기래자바스크립트를 손대라는거야 이미 완벽한데. 뭐래?나 이미 각 슬라이드로 버튼 두 개로 작동해봤거든? 얘랑 이걸로 씨름했다 선생님께 여쭤볼걸...ㅜㅜ 버튼 이미 앞에 내놨다고

• format_list_bulleted CSS
• · 2025. 4. 18.

Fruitables 예제 제목과 버튼 양쪽 정렬/카드배열/html 정리

https://themewagon.github.io/fruitables/문제는 제목과 버튼의 배치가 나란히 정렬되지 않고 몰리거나 한줄 아래로 내려가는 현상이었다. 겨우 고쳤다.고친 화면 Our Organic Products All Vegetables Fruits Bread Meat .middle-t-wrap-menu { display: flex; justify-content: space-between; align-items: center; /* ✅ 핵심1: h2와 버튼 리스트(ul)를 좌우로 배치하게 만듦 */ /* 둘이 같은 부모 아래에 있고 flex라서 옆으로 정렬 가능해짐 */}.middle-t-wrap-menu-list { display: flex; ..

• format_list_bulleted CSS
• · 2025. 4. 18.

[CSS] 자바 스크립트 없이 슬라이드 만들기 (2유형+1유형)

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

• format_list_bulleted CSS
• · 2025. 4. 7.

[CSS] 탭 메뉴 (자바스크립트 없이)

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 선택자를 이용~ ..

• format_list_bulleted CSS
• · 2025. 4. 7.

[CSS] display 속성에서 none / block의 차이

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

• format_list_bulleted CSS
• · 2025. 4. 1.