- 분류 전체보기 (1805)
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
Tags
- 혼공머신
- rnn
- 자바 실습
- 컴퓨터비전
- 중학1-1
- 스프링프레임워크
- 딥러닝
- JDBC
- 디버깅
- SQL
- 머신러닝
- 쇼핑몰홈페이지제작
- 연습문제
- 자바
- 정보처리기사필기
- 정보처리기사실기
- ChatGPT
- 파이썬
- 자바스크립트심화
- JSP
- 순환신경망
- 중학수학
- 타입스크립트심화
- 자바스크립트
- 데이터베이스
- html/css
- 상속
- 데이터분석
- 개발일기
- JSP/Servlet
Archives
- Today
- Total
클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지
이미지와 그라데이션 효과로 배경 꾸미기 1 - 배경색과 배경 범위 지정하기 본문
이제 새로운 단원 학습에 들어갔다. 공부할 시간이 1시간 반밖에 남지 않아서 정말 아쉽지만 그래도 할 수 있는 데까지 해볼 것이다. 9장까지는 모두 학습을 마치고 오늘 수업에 나가려고 한다.
웹 문서에는 내용 전체뿐만 아니라 특정 부분이나 글자 등 여러 요소에 배경을 넣을 수 있다.
1. 배경색을 지정하는 background-color 속성
배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 사용한다. 이 속성은 앞에서 설명한 16진수나 rgb값, 색생 이름을 사용해서 지정한다.
background-color: #008000;
background-color: rgb(0,128,0);
background-color: green;
<body> 태그 선택자에서 지정하면 문서 전체에 상속된다. 따라서 하위 요소에서 스타일을 수정하지 않는 한 문서 전체에 똑같이 적용이 되었다. 하지만 background-color값은 상속되지 않는다.
2. 배경색의 적용 범위를 조절하는 background-clip 속성
배경을 넣고 싶은 요소마다 속성을 입력하면 되지만 박스 모델 관점에서 배경의 적용 범위를 조절할 수도 있다. 즉, 박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 패딩 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있다.
배경 적용 범위 지정하기
border와 padding은 별 차이가 없어보인다. 패딩은 테두리를 뺀 패딩 범위까지 지정하는 것이고, contents-box는 콘텐츠 영역만 배경색을 표현한다.
학습을 마치고
이번 단원은 조금 짧아서 여기까지 진행해보았다. 다음 포스트에서는 배경 이미지를 지정하는 방법에 대해 학습해 볼 것이다.
'웹 · 앱 개발 > HTML & CSS' 카테고리의 다른 글
| 이미지와 그라데이션 효과로 배경 꾸미기 3 - 그라데이션 효과로 배경 꾸미기 (0) | 2024.08.06 |
|---|---|
| 이미지와 그라데이션 효과로 배경 꾸미기 2 - 배경 이미지 지정하기 (0) | 2024.08.06 |
| 레이아웃을 구성하는 CSS 박스 모델 7 - 단원 마무리 및 연습문제 풀기 (0) | 2024.08.06 |
| 레이아웃을 구성하는 CSS 박스 모델 6 - 수업 시간에 배운 내용 정리하기 (0) | 2024.08.06 |
| 웹 사이트 레이아웃에 영향을 미치는 요소 - 단원 마무리하기 (0) | 2024.08.06 |
'웹 · 앱 개발/HTML & CSS' Related Articles
more
