파이썬 킹냥이😺

✅CSS Box Model웹페이지의 모든 HTML 요소를 감싸는 사각형 상자 모델1️⃣ Box의 구성 요소Content  : 콘텐츠가 표시되는 영역Padding : 콘텐츠 주위의 공백Border : Padding 주위의 테두리Margin : 콘텐츠, 패딩 및 테두리들 랩핑하고 있는 영역박스와 다른 요소사이의 공백

✅ CSS Inheritance (CSS 상속)CSS에서는 특정 속성이 부모 요소에서 자식 요소로 전달되는 상속(Inheritance) 개념이 존재합니다. 이를 활용하면 코드의 재사용성을 높이고, 스타일을 더욱 효율적으로 관리할 수 있습니다.📌 CSS 속성의 2가지 분류CSS 속성은 상속되는 속성과 상속되지 않는 속성으로 나뉩니다.✅ 상속되는 속성주로 텍스트 관련 속성이 포함됩니다.font, color, text-align, visibility, opacity 등이 상속됩니다.✅ 상속되지 않는 속성주로 레이아웃 및 박스 모델 관련 속성이 포함됩니다.width, height, border, box-sizing, position, z-index 등은 상속되지 않습니다.📌 CSS 상속 예제✅ HTML 코드..

✅Specificity (명시도)CSS에서 특정 요소에 적용할 스타일을 결정하는 중요한 개념 중 하나가 Specificity (명시도)입니다. 동일한 요소를 가리키는 여러 개의 CSS 규칙이 존재할 경우, 어떤 스타일이 적용될지를 결정하는 우선순위를 계산하여 적용됩니다.📌 Cascading (위에서 아래로 흐름)CSS는 "Cascading"이라는 개념을 따르며, 이는 스타일이 위에서 아래로 흐르는 방식으로 적용된다는 의미입니다. 동일한 요소를 대상으로 여러 개의 스타일 규칙이 존재하면, 가장 마지막에 선언된 스타일이 우선 적용됩니다.✅ 하지만 단순한 선언 순서만으로 스타일 적용을 판단할 수 없습니다. **선택자들의 명시도(Specificity)**에 따라 최종 스타일이 결정됩니다.📌 명시도 (Spec..

✅ CSS 선택자 (Selectors)CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용하는 역할을 합니다.🔹 기본 선택자선택자설명예제*전체 선택자* { margin: 0; }태그 선택자특정 태그를 선택p { color: red; }.클래스클래스 속성을 가진 요소 선택.box { width: 100px; }#아이디특정 아이디를 가진 요소 선택#header { background: black; }📌 클래스 선택자 (.) → 가장 많이 사용됨! 📌 아이디 선택자 (#) → 문서 내에서 하나만 존재해야 함📌 CSS 결합자 (Combinators)CSS에서는 특정 관계를 가진 요소를 선택할 때 **자손 결합자( )**와 **자식 결합자(>)**를 사용할 수 있습니다.결합자설명예제(공백)특정 요소..

✅CSS (Cascading Style Sheets)📌 CSS 구문CSS는 선택자(Selector), 속성(Property), 값(Value)으로 구성됩니다. 기본적인 구문 구조는 다음과 같습니다.선택자 { 속성: 값;}✅ 예제h1 { color: red; font-size: 30px;}h1 → 선택자(Selector)color → 속성(Property)red → 값(Value)font-size: 30px; → 선언(Declaration)🔹 CSS 스타일 시트 종류CSS는 스타일을 적용하는 방식에 따라 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 나뉩니다.1️⃣ 인라인 (Inline) 스타일HTML 요소 내부에 style 속성을 사용하여 적용합니다.Hello World!📌..