CSS Study9 웹 페이지 레이아웃 정리: 박스 모델, 마진, 패딩, 위치 속성 활용 박스 모델(Box Model)HTML 요소는 기본적으로 박스 모델(Box Model)로 구성되며, 이는 요소의 크기와 배치를 관리하는 데 중요한 개념입니다. 박스 모델은 다음과 같은 구성 요소로 이루어집니다:콘텐츠 영역(Content): 실제 내용이 들어가는 영역입니다.패딩(Padding): 콘텐츠 영역과 테두리 사이의 여백입니다.테두리(Border): 요소의 경계선입니다.마진(Margin): 요소와 다른 요소 사이의 공간입니다.속성들1. 패딩(Padding):콘텐츠 영역과 테두리 사이의 여백을 설정합니다.예시:padding: 20px;2. 테두리(Border):요소의 경계선을 설정합니다.border-style: 테두리 스타일을 지정합니다 (solid, dotted, dashed 등). 네 방향에 각각 .. 2024. 10. 3. 폰트, 텍스트 스타일링 및 목록과 표 스타일 1. 폰트 관련 속성1.1 font-family용도: 텍스트의 글꼴을 지정하는 속성.여러 폰트를 나열하여 브라우저가 해당 폰트가 없을 경우 순차적으로 대체 폰트를 사용할 수 있게 합니다.예시:body { font-family: 'Roboto', 'Arial', sans-serif;}위 예시에서 Roboto 폰트가 없으면, Arial이 적용되고, 그마저 없으면 기본 sans-serif 폰트가 적용됩니다.1.2 font-size용도: 텍스트의 크기를 지정하는 속성.단위는 px, %, em, rem 등이 있습니다.예시:p { font-size: 16px;}1.3 font-style용도: 텍스트의 스타일을 지정합니다. 주로 기울임꼴(italic)을 설정할 때 사용됩니다.예시:em { font-style: .. 2024. 10. 2. CSS의 기본 스타일링 규칙 CSS 스타일 적용 방법인라인 스타일 (Inline Style)개별 HTML 요소에 직접 스타일을 지정하는 방식입니다.가장 높은 우선순위를 가집니다.HTML 태그에 style 속성을 사용해 정의합니다.인라인 스타일내부 스타일 시트 (Internal Style Sheet)HTML 문서 내의 외부 스타일 시트 (External Style Sheet)스타일 규칙을 별도의 CSS 파일로 작성하고, 이를 HTML 문서에서 태그를 사용해 연결하는 방식입니다.재사용성이 높고 여러 페이지에서 같은 스타일을 적용할 수 있습니다.CSS 선택자 종류전체 선택자 (*)모든 HTML 요소에 스타일을 적용합니다.* { margin: 0; padding: 0;}타입 선택자 (Type Selector)특정 HTML 태그(요소).. 2024. 10. 2. 이전 1 2 다음