CSS에서 스타일 설정

CSS(Cascading Style Sheets)는 웹 문서의 모양을 설명하는 데 사용되는 기술입니다. CSS는 글꼴, 색상, 간격, 배경 등과 같은 HTML 문서의 다양한 요소에 스타일을 적용할 수 있습니다. 이를 통해 개발자는 HTML 구조를 변경하지 않고도 페이지의 모양과 레이아웃을 변경할 수 있습니다. 이번 글에서는 CSS로 스타일을 지정하는 방법을 살펴보겠습니다.

1. 선택기

CSS에서 선택기는 스타일을 적용할 요소를 선택하는 데 사용됩니다. 다음과 같은 다양한 선택기 유형이 있습니다.

• 태그 선택기(예: p, h1, div,span)
• 클래스 선택기(예: .red, .blue)
• ID 선택기(예: #header, #footer)
• 속성 선택기(예: [type="text"])
• 의사 클래스 선택기(예:hover, :focus)

스타일을 설정하려면 하나 이상의 요소를 선택해야 합니다. 이는 하나 이상의 선택기를 사용하여 수행할 수 있습니다. 예를 들어, "red" 클래스가 있는 요소를 선택하려면 다음 CSS 코드를 사용할 수 있습니다.

.red {
    color: red;
}

그러면 "red" 클래스가 있는 모든 요소의 텍스트 색상이 빨간색으로 설정됩니다.

2. 스타일 속성

각 선택기는 하나 이상의 스타일 속성으로 스타일이 지정됩니다. 다음은 몇 가지 일반적인 스타일 속성입니다.

• color: 텍스트 색상 설정
• font-size: 글꼴 크기 설정
• font-family: 글꼴 유형 설정
• background-color: 배경 색상 설정
• margin: 요소의 여백 설정
• padding: 요소의 내부 여백 설정
• border: 요소의 테두리 설정
• width: 요소의 너비 설정
• height: 요소의 높이 설정
• text-align : 텍스트 정렬 설정

스타일 콜론은 일반적으로 속성과 속성값을 구분하는 데 사용되며, 세미콜론은 속성과 속성을 구분하는 데 사용됩니다. 예:

p {
    font-size: 16px;
    color: #333;
    font-family: sans-serif;
}

이렇게 하면 모든 단락의 글꼴 크기가 16px로, 색상이 어두운 회색(#333)으로, 글꼴이 산세리프로 설정됩니다.

3. Cascading

CSS의 계단식은 스타일의 계층적 효과를 나타냅니다. 동일한 요소에 여러 스타일 규칙이 적용되는 경우 브라우저는 특정 규칙을 사용하여 적용할 스타일을 결정합니다.

스타일은 요소의 태그, 클래스 및 ID 속성에 적용될 수 있습니다. 요소에 여러 스타일 규칙이 적용된 경우 CSS는 다음과 같이 특정 계층 구조를 사용하여 어떤 규칙의 우선순위가 가장 높은지 결정합니다.

• ID 스타일(#id)로 지정된 스타일
• 클래스 스타일 지정 스타일(.class) )
• 요소/태그에 의해 지정된 스타일(div, p, h1 등)
• 범용 스타일(*)
• 브라우저 기본 스타일

이것은 소위 "스타일 계단식 순서"이며 먼저 ID에 따라 스타일을 적용한 다음 스타일 시트에 나타나는 순서대로 클래스 및 요소 스타일을 적용합니다. 유니버설 스타일은 모든 요소에 적용되는 스타일을 지정하고, 브라우저 기본 스타일은 브라우저가 기본적으로 요소에 적용하는 스타일을 나타냅니다.

4. 상자 모델

CSS의 상자 모델은 HTML 요소의 레이아웃을 설명합니다. 요소의 상자 모델은 콘텐츠 영역, 패딩, 테두리 및 여백의 네 부분으로 구성됩니다.

• 콘텐츠 영역: 요소 내부의 텍스트 및 이미지.
• 패딩: 콘텐츠 영역과 요소 테두리 사이의 공간입니다.
• 테두리: 요소를 둘러싸는 선입니다.
• 여백: 요소의 테두리와 다른 요소 사이의 공간입니다.

CSS의 테두리 스타일(실선, 점선, 점선 등)과 테두리 색상을 수정할 수 있습니다.

CSS의 여백과 여백은 픽셀(px), 백분율(%) 및 기타 단위를 사용하여 지정할 수 있습니다.

5. 결론

이 글에서는 CSS 스타일링의 기본 사항을 다루었습니다. 선택기에서 요소를 선택하고, 스타일 속성을 사용하고, 필요에 따라 계단식 배열을 사용하여 스타일 순서를 결정함으로써 스타일을 설정합니다. 또한 CSS의 요소 레이아웃과 모양의 기초가 되는 CSS 상자 모델에 대해서도 배웠습니다. 이러한 기본 사항을 익히면 CSS를 사용하여 아름다운 웹 페이지 레이아웃을 만들 수 있습니다.

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