CSS 시작하기: 웹 페이지 스타일 지정

CSS(Cascading Style Sheets)는 웹 디자인의 초석입니다. 이를 통해 색상 글꼴부터 레이아웃 및 애니메이션까지 웹사이트의 모양과 느낌을 제어할 수 있습니다.

1. CSS란 무엇인가요?

CSS는 HTML로 작성된 문서의 표현을 설명하는 데 사용되는 언어입니다. HTML 요소가 화면, 종이 또는 기타 미디어에 어떻게 표시되어야 하는지 정의합니다.

2. 기본 구문

CSS 규칙은 선택기와 선언 블록으로 구성됩니다.

selector {
  property: value;
}

예:

body {
  background-color: lightblue;
}

페이지 배경색이 연한 파란색으로 변경됩니다.

3. 선택자

선택기를 사용하면 특정 HTML 요소를 타겟팅하여 스타일을 적용할 수 있습니다. 다음을 통해 요소를 선택할 수 있습니다.

• 유형: p {}는 모든 단락을 대상으로 합니다.
• 클래스: .my-class {}는 "my-class" 클래스가 있는 요소를 대상으로 합니다.
• ID: #my-id {}는 ID가 "my-id"인 요소를 대상으로 합니다.

4. 박스 모델

모든 HTML 요소는 다음으로 구성된 상자로 생각할 수 있습니다.

• 내용 : 실제 텍스트나 내부 미디어
• 패딩: 콘텐츠와 테두리 사이의 공간
• 테두리: 요소 주변의 윤곽선입니다.
• 여백: 요소를 구분하는 테두리 밖의 공간

5. 공통 속성

색상: 색상: 빨간색; 텍스트 색상이 변경됩니다.

• 글꼴: 글꼴 크기: 16px; 텍스트 크기를 설정합니다.
• 배경: 배경색: 밝은 회색; 배경색이 변경됩니다.
• 너비/높이: 너비: 100%; 높이: 200px; 요소 크기를 정의합니다.

6. 반응형 디자인

미디어 쿼리를 사용하여 웹페이지가 모든 기기에서 보기 좋게 보이도록 만드세요. 예:

@media screen and (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}

화면 너비가 600px 이하일 때 배경색을 연한 노란색으로 변경합니다.

위 내용은 CSS 시작하기: 웹 페이지 스타일 지정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!