CSS / 이미지 위에 글자를 올리고, 아이콘을 그 위에 올리고, 글자위치를 이미지 위에서 고정하는 방법

+ 텍스트 중앙 정렬 방법   text-align: center;  내가 했지만 CSS 어떻게 넣었는지 모르겠다뭔가 열심히 집어넣어보다가 성공한 거라   이 코드가 작동하는 원리는: #main에 position: relative를 설정하여 자식 요소들의 기준점을 만듦.아이콘에 position: absolute를 적용하여 부모 요소(#main)를 기준으로 위치를 지정top: 50%는 아이콘의 상단을 부모 요소 높이의 50% 위치에 배치합니다.transform: translateY(-50%)는 아이콘을 자신의 높이의 50%만큼 위로 올려 정확히 중앙에 위치하게 합니다.left: 20px와 right: 20px로 좌우 여백을 지정합니다. 핵심 CSS 개념 정리 Position: relative : 요소의 원래..

• format_list_bulleted HTML
• · 2025. 3. 19.

📌 Flexbox 기본 개념

📌 Flexbox 기본 개념Flexbox는 "유연한 배치" 를 위한 레이아웃 모델이야.쉽게 말해, "한 줄(가로) 또는 한 열(세로)로 원하는 대로 배치할 수 있는 기능" 이야.🔹Flex 컨테이너 & 항목Flex 컨테이너: display: flex; 를 설정하면, 그 안의 요소들이 Flex 항목이 돼.Flex 항목: Flex 컨테이너 안의 직접적인 자식 요소들.📌 Flex 컨테이너 속성🔹 display: flex; → Flex 컨테이너를 만들어 줘.🔹 flex-direction → 요소 배치 방향 결정row (기본값) → 왼쪽 → 오른쪽column → 위 → 아래🔹 justify-content → 가로 정렬center → 가운데 정렬space-between → 요소 사이에 균등한 간격space..

• format_list_bulleted HTML
• · 2025. 3. 16.

25.03.14 ✨ CSS 핵심 개념 정리 ✨

✨ CSS 핵심 개념 정리 ✨1. 선택자 (Selectors)선택자는 HTML 요소에 스타일을 적용하기 위해 어떤 요소를 선택할지 알려주는 역할을 해요. 종류문법적용하는 곳예시전체 선택자*모든 HTML 요소에 스타일을 적용/주로 초기화시 사용.* { margin: 0; padding: 0; } (모든 요소의 기본 마진과 패딩 제거)타입 선택자태그이름지정한 HTML 태그를 사용하는 모든 요소에 적용p { color: blue; } (모든  태그의 글자색을 파란색으로)클래스 선택자.클래스이름HTML 요소의 class 속성에 지정된 이름으로 선택합니다..important { font-weight: bold; } (class="important"인 요소 굵게)아이디 선택자#아이디이름HTML 요소의 id 속성에 ..

• format_list_bulleted HTML
• · 2025. 3. 16.

CSS에서 요소를 숨기는 방법

CSS 속성 및 값구조공간차지 여부투명도 조절애니메이션 display: none;공간 차지 ❌ (요소가 완전히 사라짐)❌ 불가능❌ 불가능visibility: hidden;공간 차지 ⭕ (보이지만 않을 뿐 공간 유지됨)❌ 불가능✔️ 가능opacity: 0;공간 차지 ⭕ (보이지만 않을 뿐 공간 유지됨)✔️ 가능✔️ 가능 추가 설명:display: none;요소가 페이지 레이아웃에서 완전히 제거되어 공간을 차지하지 않습니다. 애니메이션이나 투명도 조절도 불가능합니다.visibility: hidden;요소는 화면에서 보이지 않지만, 요소가 차지하는 공간은 유지됩니다. 애니메이션 적용이 가능합니다.opacity: 0;요소의 투명도가 0이 되어 보이지 않지만, 요소는 실제로 존재하며 공간도 차지합니다. 투명도 조..

• format_list_bulleted HTML
• · 2025. 3. 13.

CSS Position 속성의 실전 응용 예제

📚 Position 속성의 실전 응용 예제🔖 실제 많이 쓰이는 3가지 예시✅ 예시1: position: relative의 실전 활용평소보다 살짝 이동하고 싶을 때 사용합니다.버튼이나 배너를 원래 위치에서 조금만 움직이고 싶을 때예시: "버튼을 원래 위치에서 살짝 위로 이동시키기"HTML버튼CSS.box { position: relative; top: -10px; /* 원래 위치보다 위로 10px 이동 */ left: 20px; /* 원래 위치보다 오른쪽으로 20px 이동 */}결과 설명원래 위치를 기준으로 위쪽으로 10px, 오른쪽으로 20px 이동합니다.✅ 예시2: position: absolute의 실전 활용부모 요소 내에서 원하는 위치에 정확히 배치하고 싶을 때 사용합니다.사진 위에 글씨(..

• format_list_bulleted HTML
• · 2025. 3. 13.

CSS 선택자 기본 개념

🔍 자세한 CSS 선택자(selector) 개념 정리CSS 선택자는 HTML 요소들을 선택하여 스타일(색깔, 크기, 위치 등)을 적용할 때 사용하는 규칙입니다.📌 CSS 선택자 종류설명사용법 예시1. 요소 선택자 (Element Selector)특정 HTML 태그 이름을 가진 모든 요소를 선택합니다.p → 모든  요소2. 아이디 선택자 (ID Selector)HTML 요소의 고유 ID를 선택합니다. (ID는 HTML 문서 내에서 중복 불가능)#title → ID가 "title"인 요소3. 클래스 선택자 (Class Selector)특정 클래스 이름을 가진 요소들을 선택합니다. (클래스는 중복 가능).active → 클래스 이름이 "active"인 요소들4. 하위 선택자 (Descendant Selec..

• format_list_bulleted HTML
• · 2025. 3. 13.