웹 페이지 본문에 CSS 스타일을 설정하는 방법은 무엇입니까?

웹 디자인에서는 CSS를 사용하여 웹 페이지 스타일을 제어하는 ​​경우가 많습니다. 그 중 웹 페이지 본문 스타일 설정은 매우 기본적인 작업입니다. 이 작업은 웹 페이지의 배경색, 글꼴 스타일과 같은 모양 속성을 변경할 뿐만 아니라 웹의 레이아웃 및 조판에도 영향을 줍니다. 페이지. 이 기사에서는 웹 페이지 본문에 CSS 스타일을 설정하는 방법에 대한 심층적인 이해를 제공합니다.

1. 웹페이지의 본문은 무엇인가요?

웹페이지 본문에 CSS 스타일을 설정하는 방법을 소개하기 전에 먼저 웹페이지 본문이 무엇인지 이해해야 합니다. 일반인의 관점에서 보면 본문은 웹 페이지의 주요 콘텐츠이자 우리가 보는 모든 웹 페이지 요소의 루트 컨테이너입니다. HTML 페이지에서 body 태그는 head 태그 뒤, html 태그 내에 위치합니다.

2. 웹페이지 본문에 CSS 스타일을 설정하는 방법은 무엇인가요?

본문의 CSS 스타일을 설정하면 웹페이지의 모양과 레이아웃 속성 대부분을 제어할 수 있습니다. 아래에서는 다양한 속성을 설정하는 방법을 하나씩 소개합니다.

1. 배경색 설정

CSS에서 본문의 배경색을 설정하려면 background-color 속성을 색상 값으로 설정해야 합니다. 예를 들어 배경색을 회색으로 설정하려면 다음 코드를 사용할 수 있습니다.

body {
  background-color: gray;
}

여기에서 "body"는 웹 페이지의 body 요소를 나타내며 중괄호 안의 코드는 정의입니다. 스타일의. 그 중 background-color는 배경색 속성을 의미하고, grey는 색상값을 의미합니다.

2. 배경 이미지 설정

웹 페이지의 배경 이미지를 설정하려면 background-image 속성을 사용할 수 있습니다. 예를 들어, 웹 페이지의 배경 이미지를 "Background.jpg"라는 이미지로 설정할 수 있습니다.

body {
  background-image: url('background.jpg');
}

보시다시피 여기의 배경 이미지는 URL 주소를 사용하여 지정해야 합니다. 이 예에서는 작은따옴표를 사용하여 이미지 주소를 래핑합니다.

3. 글꼴 설정

웹 페이지에서 글꼴을 설정하려면 글꼴 모음 속성을 사용해야 합니다. 이 속성에서는 하나 이상의 글꼴 이름을 웹 페이지의 기본 글꼴로 지정할 수 있습니다. 예를 들어 다음 코드는 웹 페이지의 기본 글꼴을 Arial로 설정합니다.

body {
  font-family: SimSun, Arial, sans-serif;
}

여기에서는 쉼표를 사용하여 여러 글꼴 이름을 구분합니다. 브라우저는 나열된 순서대로 이러한 글꼴을 로드하려고 시도합니다. 첫 번째 글꼴이 로드되지 않으면 브라우저는 두 번째 글꼴을 사용하려고 시도합니다.

4. 글꼴 크기 설정

웹 페이지의 글꼴 크기를 변경하려면 글꼴 크기 속성을 사용할 수 있습니다. 여기서는 절대 픽셀 값을 설정하거나 보다 추상적인 상대 크기를 사용할 수 있습니다. 예를 들어, 다음 코드는 웹 페이지의 글꼴 크기를 16픽셀로 설정합니다.

body {
  font-size: 16px;
}

또는 다음 코드를 사용하여 글꼴 크기를 상대적인 크기로 설정할 수도 있습니다.

body {
  font-size: medium;
}

이 예에서는 글꼴 크기를 설정합니다. 크기를 "중간" 상대 크기로 설정합니다. 이러한 방식으로 글꼴 크기가 대부분의 사람들의 독서 습관에 적합한지 확인할 수 있습니다.

5. 줄 높이 설정

웹 페이지에서 텍스트 줄 사이의 간격을 변경하려면 line-height 속성을 사용할 수 있습니다. 이 속성에서는 절대 픽셀 값을 설정하거나 글꼴 크기에서 계산된 상대 크기를 사용할 수 있습니다. 예를 들어 다음 코드는 줄 높이를 글꼴 크기의 1.6배로 설정합니다.

body {
  line-height: 1.6;
}

6. 텍스트 색상 설정

웹 페이지의 텍스트 색상을 변경하려면 color 속성을 사용할 수 있습니다. 이 속성은 색상 값을 입력 매개변수로 허용합니다. 예를 들어 다음 코드는 웹 페이지의 텍스트 색상을 검은색으로 설정합니다.

body {
  color: black;
}

7. 텍스트 정렬 변경

웹 페이지의 텍스트를 왼쪽, 가운데 또는 오른쪽으로 정렬해야 하는 경우 다음을 사용할 수 있습니다. 텍스트 정렬 속성. 예를 들어, 다음 코드는 웹 페이지의 텍스트를 가로 중앙에 배치할 수 있습니다.

body {
  text-align: center;
}

8. 페이지 패딩 설정

콘텐츠가 브라우저 창에서 어느 정도 떨어져 있도록 웹 페이지 주위에 약간의 공간을 남겨두어야 하는 경우 다음을 수행할 수 있습니다. padding 속성을 사용하세요. 예를 들어, 다음 코드는 웹 페이지 주위에 100픽셀의 공백을 남깁니다.

body {
  padding: 100px;
}

3. 요약

웹 페이지 본문의 CSS 스타일을 설정하여 웹 페이지의 모양과 레이아웃을 제어할 수 있습니다. . 그중에서도 웹페이지의 배경색, 글꼴 스타일, 텍스트 색상, 정렬, 채우기 및 기타 속성을 변경할 수 있습니다. 이러한 기본 CSS 스타일 설정을 통해 웹페이지의 독특한 모양을 만들고 사용자의 액세스 경험을 향상시킬 수 있습니다.

위 내용은 웹 페이지 본문에 CSS 스타일을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!