파이썬 킹냥이😺

✅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!📌..

✅Web : World Wide Web웹(Web)은 인터넷을 통해 연결된 컴퓨터들이 정보를 공유하는 거대한 정보공간입니다. 우리는 웹을 통해 정보를 찾고, 콘텐츠를 소비하며, 다양한 서비스를 이용합니다. 오늘날 웹은 단순한 문서 공유를 넘어 소셜 미디어, 전자상거래, 클라우드 서비스 등 필수적인 기술로 발전했습니다.1️⃣ 웹 페이지의 3가지 핵심 요소웹 페이지는 구조(Structure), 스타일링(Styling), 동작(Behavior) 세 가지 요소로 구성됩니다.요소역할예제 코드설명요소역할예제 코드설명HTML구조제목웹 페이지의 뼈대 (제목, 단락, 이미지 등)CSS스타일링h1 { color: red; }디자인 및 레이아웃 적용JavaScript동작alert('안녕하세요!')버튼 클릭, 애니메이션 등 동..