배경(background)

2016-09-05 22:44:14

소개

CSS를 이용하면 엘리먼트의 배경을 지정할 수 있습니다. 여기서는 배경과 관련된 중요속성들을 알아봅니다.

background-color : red
background-image : url("bg.png")
background-repeat : repeat, no-repeat, repeat-x, repeat-y
background-attachment : scroll, fixed
background-position : left top or x% y% or x y
background-size : 100px 100px or cover or contain

참고

w3schools.com

곤비9개월 전

0219

답글
새콤달콤10개월 전

완료

답글
DreamBoy1년 전

2023.09.22. CSS - 그래픽 - 배경(background) 파트를 시작합니다.

답글
AgainstartJH2년 전

2022년 11월 23일 수요일 학습완료!

답글
이슬유치원2년 전

22.7.8완료

답글
09년생개발자2년 전

22.3.21

답글
INJE2년 전

22/03/18

답글
드림보이3년 전

2021.11.16. 배경(background) 파트 수강완료

답글
vogueupp3년 전

완료

답글
choi3년 전

완료

답글
jeisyoon3년 전

2021.06.24 Background _ OK

답글
yogg3년 전

background 잘쓰면 좋겠네여 ~

답글
임태경3년 전

완료했어요 감사해요

답글
스마일가이3년 전

2021.01.29 완료 감사합니다

답글
따뜻한츄르3년 전

210101
축약형
background:tomato url('run.png') no-repeat fixed center;

답글
SRC3년 전

20`1218

답글
switpotato3년 전

20201129 2차 학습 완료

답글
만듀4년 전

20201118

답글
uin4년 전

감사합니다

답글
jaehyunlee4년 전

완료

답글
박병진4년 전

감사합니다.

답글
콜라4년 전

20200930 완료

답글
김성곤4년 전

20200725 감사합니다!

답글
007bbang4년 전

background 속성을 한방에 정리해주셔서 감사합니다~

답글
한강4년 전

background 속성들 잘 배웠습니다.
오늘도 화이팅~~^^!
200611

답글
green diseny4년 전

background 속성들에 대해서 알아서 재미있었다!!

답글
무지개반사4년 전

완료

답글 수정 삭제
Blanc4년 전

2020.01.06

답글
gogossing4년 전

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
div {
font-size: 100px;
border: 5px solid gray;
background-color: tomato;
background-image: url(566546546.JPG);
</style>
</head>
<div>
gogh
</div>

</body>
</html>

답글 수정 삭제
gogossing4년 전

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
div {
font-size:100px;
border:5px solid gray;
background-color: tomato;
background-image: url('https://www.yourtripagent.com/img/usa-2018/with-turbulent-mind-vincent-van-gogh-painted-an-unsolved-mystery-7.jpg');
</style>
</head>
<div>
gogh
</div>

</body>
</html>

답글 수정 삭제
다나가5년 전

190807 수강완료!!!

답글
FIRE5년 전

20190731 완료

답글 수정 삭제
박지성5년 전

치타가 달려가는 모습은 마치 호나우두를연상 시켰기 때문에

답글 수정 삭제
노혜주5년 전

완료

답글
lygon5년 전

2019-03-06 완료

답글
숨이5년 전

완료햇습니당

답글
김민영6년 전

완료

답글 수정 삭제
Asy1ess6년 전

영상 제목이 CSC 수업 - 배경으로 되어있네요 ㅎㅎ

답글 수정 삭제
ㅅㅈㅎ6년 전

감사합니다!!

답글
javaz6년 전

정말 감사드립니다ㅜㅜ

답글 수정 삭제
스페이스몽키6년 전

감사합니다!

답글
가즈아6년 전

내용 잘 봤습니다.
롤오버 버튼을 만들 때 일반 버튼이미지와 오버시 버튼 이미지를 한 이미지에 넣고
background-position으로 롤오버 효과를 주는 예제도 보충해 주시면 감솨합니다.
한 이미지 파일에 여러 이미지의 좌표를 찾아 바꿔주는 방법을 보충 설명 해 주세요..

항상 좋은 강의 자료 감솨합니다.

답글 수정 삭제
푸른하늘6년 전

11일차 공부 감사합니다

답글
이경일7년 전

background-size : width height / cover / contain; (cover는 width 꽉채우기)
background-attachment : scroll / fixed;
background-position: center right /top bottom /left ;
background-image: url(' ');
background-repeat: no-repeat,repeat;

답글 수정 삭제
오빠는다르다7년 전

감사합니다~!!!!

답글
sunday007년 전

현재 만들고 있는 html과 같은 폴더에 있으면 되고, 되도록 파일 이름을 영문으로 해보세요.
확장자와 파일명이 맞는지도 체크해 보세요.
대화보기
답글
kchee7년 전

머리에 속속 들어오게 가르치시네요. 땡큐

답글 수정 삭제
오들오들오드리7년 전

그림을 다운 받아서 어느 경로에 저장하면 될까요?
이고잉님을 따라서 잘 해왔는데... 그림 부분에서 막혔습니다 ㅠㅠ
도와주세요~~

답글 수정 삭제
세븐나이츠7년 전

감사합니다

답글
sang7년 전

대단한 수업입니다. 다 알았다 생각했는데 여기와서 모르고 지냈던 10년을 보충해주네요. 초특급감사!

답글 수정 삭제