CSS 배경 및 색상: 웹 페이지 스타일링

소개

CSS 색상 및 배경 랩에 오신 것을 환영합니다! 웹 디자인에서 색상과 배경은 시각적으로 매력적이고 사용자 친화적인 웹사이트를 만드는 데 필수적입니다. 톤을 설정하고, 가독성을 향상시키며, 사용자의 주의를 유도하는 데 도움이 됩니다.

이 랩에서는 요소의 모양을 제어하는 데 사용되는 가장 일반적인 CSS 속성에 대한 실습 경험을 쌓게 됩니다. 배경색 설정 방법, 텍스트 색상 적용 방법, 배경 이미지 사용 방법 및 이미지 표시 방법 제어 방법을 배우게 됩니다. 다음 속성을 다룰 것입니다: background-color, color, background-image, background-repeat, background-position.

이 랩이 끝나면 웹 페이지의 색상 및 배경 스타일링 방법에 대한 확실한 이해를 갖게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 99%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

16 진수 코드를 사용하여 background-color 속성 설정하기

이 단계에서는 전체 페이지의 배경색을 변경하는 방법을 배우게 됩니다. background-color 속성과 16 진수 (hex) 색상 코드를 사용할 것입니다. Hex 코드는 웹 개발에서 색상을 표현하는 일반적인 방법으로, #으로 시작하고 여섯 개의 문자 (0-9, a-f) 가 뒤따릅니다.

먼저 styles.css 파일을 편집해야 합니다. 이 파일은 WebIDE 왼쪽의 파일 탐색기에서 찾을 수 있습니다.

styles.css 파일을 클릭하여 편집기에서 엽니다.
<body> 요소의 배경색을 설정하기 위해 다음 CSS 규칙을 추가합니다. 이렇게 하면 전체 페이지에 스타일이 적용됩니다.

body {
  background-color: #f0f8ff;
}

이 규칙은 body 요소를 선택하고 배경색을 "AliceBlue"로 알려진 연한 파란색으로 설정합니다.

코드를 추가한 후 파일을 저장합니다 (Ctrl+S 또는 Cmd+S 사용 가능). 변경 사항을 보려면 인터페이스 상단의 Web 8080 탭을 클릭합니다. 페이지 배경이 흰색에서 연한 파란색으로 변경된 것을 볼 수 있습니다.

RGB 값을 사용하여 color 속성 적용하기

배경색을 설정했으니, 이제 메인 제목 텍스트의 색상을 변경해 보겠습니다. 요소의 텍스트 콘텐츠 색상을 설정하는 color 속성을 사용할 것입니다. 이를 위해 rgb() 색상 형식을 사용할 것입니다.

rgb() 함수는 빨강 (Red), 초록 (Green), 파랑 (Blue) 구성 요소를 사용하여 색상을 정의하며, 각 값은 0 에서 255 까지 범위를 가집니다.

styles.css 파일 편집을 계속합니다.

<h1> 요소를 대상으로 하는 새로운 CSS 규칙을 추가합니다.
이 규칙 안에서 color 속성을 rgb(60, 60, 60)을 사용하여 어두운 회색으로 설정합니다.

다음 코드를 styles.css 파일에 추가합니다:

h1 {
  color: rgb(60, 60, 60);
}

파일을 저장하고 Web 8080 탭으로 전환하여 변경 사항을 미리 봅니다. "Welcome to LabEx" 제목이 이제 어두운 회색으로 표시되어 연한 파란색 배경과 대비를 이룰 것입니다.

url 을 사용하여 background-image 속성 사용하기

단색 외에도 CSS 는 이미지를 배경으로 사용할 수 있게 해줍니다. background-image 속성이 이 목적으로 사용됩니다. url() 함수를 사용하여 이미지 경로를 지정합니다.

이 단계에서는 페이지의 body에 배경 이미지를 추가할 것입니다. 설정 스크립트가 이미 프로젝트 디렉토리에 labex.svg라는 이름의 이미지 파일을 생성했습니다.

styles.css 파일로 돌아갑니다.
기존 body 규칙을 수정하여 background-image 속성을 추가합니다.

body 선택자의 중괄호 안에 다음 줄을 추가합니다:

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
}

파일을 저장한 후 Web 8080 탭을 확인합니다. 페이지에 이미지 (labex.svg) 가 나타나는 것을 알 수 있습니다. 기본적으로 배경 이미지는 요소 전체를 채우기 위해 가로 및 세로로 반복됩니다. 다음 단계에서는 이 동작을 제어하는 방법을 배울 것입니다.

background-repeat 속성을 no-repeat 로 구현하기

이전 단계에서 보았듯이 배경 이미지는 기본적으로 반복됩니다. background-repeat 속성은 이 동작을 제어할 수 있게 해줍니다. 이 속성은 repeat (기본값), repeat-x (가로 반복), repeat-y (세로 반복), no-repeat를 포함한 여러 값을 가질 수 있습니다.

이 단계에서는 배경 이미지가 반복되지 않도록 할 것입니다.

styles.css 파일에서 body 규칙 편집을 계속합니다.
background-repeat 속성을 추가하고 값을 no-repeat로 설정합니다.

이제 body 규칙은 다음과 같이 보일 것입니다:

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
  background-repeat: no-repeat;
}

파일을 저장하고 Web 8080 탭을 새로고침합니다. 이제 배경 이미지의 단일 인스턴스만 페이지의 왼쪽 상단 모서리에 위치한 것을 볼 수 있습니다.

background-position 속성을 center 로 추가하기

현재 단일 배경 이미지는 페이지의 왼쪽 상단 모서리에 위치해 있습니다. background-position 속성을 사용하여 위치를 변경할 수 있습니다. 이 속성은 left, right, top, bottom, center와 같은 값뿐만 아니라 특정 길이 또는 백분율 값도 허용합니다.

마지막 단계에서는 배경 이미지를 가로 및 세로로 모두 가운데 정렬할 것입니다.

styles.css 파일에서 body 규칙에 background-position 속성을 추가합니다.
값을 center로 설정합니다.

이제 완전한 body 규칙은 다음과 같습니다:

body {
  background-color: #f0f8ff;
  background-image: url("labex.svg");
  background-repeat: no-repeat;
  background-position: center;
}

변경 사항을 저장하고 Web 8080 탭에서 결과를 확인합니다. 이제 배경 이미지가 페이지 중앙에 완벽하게 배치되어야 합니다.

요약

실습을 완료하신 것을 축하드립니다! 기본적인 CSS 속성을 사용하여 웹 페이지의 색상과 배경을 스타일링하는 방법을 성공적으로 배우셨습니다.

이번 실습에서는 다음을 연습했습니다:

background-color와 16 진수 코드를 사용하여 페이지의 배경색 설정하기.
color 속성과 rgb() 값을 사용하여 텍스트 색상 변경하기.
url() 함수를 사용하여 background-image 추가하기.
background-repeat: no-repeat;로 이미지 타일링 제어하기.
background-position: center;로 배경 이미지 위치 지정하기.

이러한 속성들은 모든 웹 개발자에게 필수적인 도구입니다. 값을 변경하거나 다른 이미지를 시도하여 무엇을 만들 수 있는지 자유롭게 실험해 보세요.