본문 바로가기

CSS

(2)
박스모델 CSS 박스 모델 (CSS Box Model)CSS 박스 모델은 웹 페이지에서 요소들이 어떻게 배치되고 크기 조정이 되는지를 정의하는 중요한 개념이다. 모든 HTML 요소는 박스 모델을 기반으로 렌더링되며, 이 모델은 요소의 내용(content), 패딩(padding), 테두리(border), 마진(margin) 영역으로 구성된다.1. 박스 모델 구성 요소박스 모델은 다음 네 가지 주요 영역으로 구성된다:내용 (Content):실제로 표시되는 요소의 내용이 위치한 영역이다.예를 들어, 텍스트나 이미지 등이 들어가는 공간이다.width와 height 속성으로 크기가 설정된다.패딩 (Padding):내용 영역과 테두리 영역 사이의 공간이다.이 공간은 요소의 배경색(background)과 함께 렌더링된다.pa..
다양한 css selector CSS에는 여러 가지 선택자가 있으며, 이를 통해 HTML 요소를 스타일링할 수 있다. 여기에서는 다양한 CSS 선택자와 그 예시를 소개한다.기본 선택자1. 전체 선택자 (*) : 문서 내의 모든 요소를 선택한다. * {margin: 0;padding: 0; }2. 태그 선택자특정 태그를 가진 모든 요소를 선택한다.p { font-size: 16px;}  3.클래스 선택자 (.)특정 클래스를 가진 모든 요소를 선택한다..highlight { background-color: yellow;}  4.아이디 선택자 (#)특정 아이디를 가진 요소를 선택한다.#header { background-color: blue; color: white;}후손 선택자특정 요소의 후손 요소를 선..