[CSS ] 03. 박스 모델(Box Model)1. 박스 모델이란?CSS에서 모든 HTML 요소는 사각형 박스로 구성되어 있다.이 구조를 박스 모델(Box Model)이라고 한다.하나의 요소는 내용(Content)을 중심으로여백과 테두리를 포함한 형태를 가진다.2. 박스 모델 구성 요소 Content : 실제 내용 영역 Padding : 내용과 테두리 사이의 여백 Border : 요소의 테두리 Margin : 요소 바깥쪽 여백3. Content 영역텍스트나 이미지 등 실제 내용이 표시되는 영역이다.div { width: 200px; height: 100px;}4. PaddingContent와 Border 사이의 내부 여백을 의미한다.div { padding: 20p..
[CSS ] 02. CSS 선택자 정리1. 선택자란?CSS 선택자는 스타일을 적용할 HTML 요소를 지정하기 위한 문법이다.CSS는 선택자를 통해 어떤 요소에 스타일을 적용할지 결정한다.2. 태그 선택자HTML 태그 이름을 그대로 선택자로 사용한다.p { color: blue;}모든 태그에 동일한 스타일이 적용된다.3. 클래스 선택자class 속성을 가진 요소를 선택한다..text { color: red;}HTML 예시:내용 여러 요소에 동일한 스타일 적용 가능 가장 많이 사용되는 선택자4. 아이디 선택자id 속성을 가진 요소를 선택한다.#title { font-size: 32px;}HTML 예시:제목 문서 내에서 하나의 요소만 사용 고유한 요소에 스타일 적용5. ..
[CSS ] 01. CSS 개요와 기본 문법1. CSS란?CSS(Cascading Style Sheets)는 HTML 문서의 모양과 화면 표현을 담당하는 스타일 언어이다.HTML이 문서의 구조를 정의한다면, CSS는 색상, 크기, 간격, 배치 등 시각적인 요소를 정의한다.2. CSS의 역할텍스트 색상, 글꼴, 크기 지정요소의 배치와 정렬여백과 테두리 설정화면 크기에 따른 표현 조정3. CSS 기본 문법CSS는 다음과 같은 구조를 가진다.선택자 { 속성: 값;}예시:h1 { color: blue; font-size: 24px;}선택자 : 스타일을 적용할 대상속성 : 변경할 스타일의 종류값 : 적용할 스타일의 값4. CSS 적용 방법1) 인라인 방식텍스트HTML 태그에 직접 스타일을 작성하는..