Home-theater-designers
신진 프론트엔드 개발자의 경력에서 가장 흥미로운 순간 중 하나는 웹 페이지의 배경색을 변경하는 방법을 배우는 것입니다.
HTML로 작업하는 것은 훌륭하지만 CSS 몇 줄만 사용하면 페이지와 프로그래밍 여정을 생생하게 만들 수 있습니다.
이 가이드는 CSS로 배경색을 변경하는 방법에 대해 알아야 할 모든 것을 다룹니다.
설정하기
약간의 사전 작업을 노크합시다.
Xbox One 컨트롤러를 분해하는 방법
메모 : 나는 사용하는 것이 좋습니다 비주얼 스튜디오 코드 이랑 라이브 서버 확장 HTML 및 CSS를 업데이트할 때 실시간으로 변경 사항을 확인합니다.
- 프로젝트 파일을 위한 폴더를 만듭니다.
- 만들기 index.html HTML을 보관할 파일입니다. 상용구 코드를 사용하거나 일부만 설정할 수 있습니다. , , 그리고 태그.
- 만들기 스타일.css CSS 파일입니다.
- 다음을 배치하여 CSS 파일을 HTML과 연결합니다. 안에 태그.
이제 CSS 편집을 시작할 준비가 되었습니다.
관련된: 상용구 웹사이트를 만드는 방법
CSS로 배경색을 변경하는 방법
배경색을 변경하는 가장 간단한 방법은 신체 꼬리표. 그런 다음 편집 배경색 재산. Google Color Picker 브라우저 확장 프로그램을 검색하고 사용하여 색상 코드를 찾을 수 있습니다.
body {
background-color: rgb(191, 214, 255);
}
이 코드는 배경을 멋진 하늘색으로 변경합니다.
NS 배경색 속성은 6가지 형식의 색상을 허용합니다.
- 이름 : 밝은 하늘색; (가까운 근사치를 위해)
- 16진수 코드 : # bfd6ff;
- RGB : RGB(191, 214, 255);
- RGBA : rgba(191, 214, 255, 1); 어디 에게 알파(불투명도)
- HSL : hsl(218°, 100%, 87%);
- HSLA : hsla(218°, 100%, 87%, 1); 어디 에게 알파(불투명도)
약어 사용 배경 대신하는 재산 배경색 추가 코드를 자르기 위해. 이 방법을 사용하여 HTML 요소의 배경색을 변경할 수 있습니다.
만들기 요소를 만들고 클래스를 지정합니다. 이 경우 클래스는 다음과 같습니다. 패널 . 설정 키 그리고 너비 CSS의 속성. CSS에서 요소를 선택하고 색상을 제거합니다.
body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}
여기에서 볼 수 있습니다 신체 배경 속성은 독립적으로 스타일이 지정됩니다. .패널 배경 재산.
background 속성은 그라디언트도 허용합니다.
body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}
CSS에서 배경 이미지를 변경하는 방법
배경을 단색이나 그라디언트가 아닌 이미지로 만들고 싶다면 어떻게 해야 할까요? 속기 배경 재산은 친숙한 친구입니다.
이미지가 HTML 및 CSS 파일과 동일한 폴더에 있는지 확인하십시오. 그렇지 않으면 이름 대신 괄호 안에 파일 경로를 사용해야 합니다.
body {
background: url(leaves-and-trees.jpg)
}
와! 이미지가 너무 확대된 것 같습니다. 배경 크기 재산.
body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}
단축어를 사용하려면 배경 재산과 함께 배경 크기 재산 씌우다 , 또한 지정해야 합니다. 배경 위치 속성을 지정하고 백슬래시로 값을 구분합니다. (다음과 같은 기본 위치 값이더라도 왼쪽 상단 .)
body {
background: url(leaves-and-trees.jpg) top left / cover;
}
저기요! CSS 한 줄에 적절한 크기의 배경 이미지.
더 읽어보기: CSS에서 배경 이미지를 설정하는 방법
메모 : 저장 공간을 많이 차지하는 큰 배경 이미지를 포함하지 않도록 주의하십시오. 모바일에서는 로드하기 어려울 수 있습니다. 모바일에서는 사용자에게 페이지에 머물 이유를 제공할 수 있는 2초가 모두 주어집니다.
CSS box-shadow로 CSS 게임 향상
귀하와 같은 개발자에게 background-color 및 background-image 속성은 오래된 소식입니다. 다행히도 항상 새로운 것을 배울 수 있습니다.
CSS box-shadow를 사용하여 상자를 강화하십시오. HTML 요소가 그 어느 때보다 좋아졌습니다!
공유하다 공유하다 트위터 이메일 CSS box-shadow 사용 방법: 13가지 요령과 예단조로운 상자는 지루해 보입니다. CSS 상자 그림자 효과로 멋지게 꾸며보세요!
다음 읽기 관련 항목- 프로그램 작성
- 웹 개발
- 웹 디자인
- CSS
Marcus는 MUO의 평생 기술 애호가이자 작가 편집자입니다. 그는 2020년에 프리랜서 작문 경력을 시작했으며 최신 기술, 가제트, 앱 및 소프트웨어를 다룹니다. 그는 프론트엔드 웹 개발에 중점을 두고 대학에서 컴퓨터 공학을 공부했습니다.
마커스 미어스 III에서 더 많은 것뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.