선생님을 위한 프로그래밍 수업

코스 전체목록

닫기

배경 꾸미기

엘리먼트의 배경

엘리먼트의 배경에 색상을 부여하거나 이미지를 표시하고 싶을 때 background 효과를 사용한다. 이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나, 반복 할 수 있다. 

배경색

background-color:색상값

Hex 16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑)
RGB 붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현,  RGB(255,0,0), RGB(0,255,0), RGB(0,0,255)
별명 red, blue, green등 칼러코드 참고

배경 이미지

background-image: url('이미지의 URL');

배경 이미지의 반복

background-repeat: 반복방식

repeat 수직, 수평 모두 반복함
repeat-x 수평만 반복함
repeat-y 수직만 반복함
no-repeat 반복하지 않음

참고 : w3school.com

배경 이미지의 위치

background-position: 위치값

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
배경 위치를 지정
x% y% x%는 수평위치를 y%는 수직 위치를 의미하고, 이미지의 상대적인 위치를 지정한다.
xpos ypos 이미지의 절대적인 위치를 지정한다.

단축속성

body {background:#00ffff url('image.png') no-repeat right top;}

예제

example1.html - 이미지 대체 기법을 이용해서 <img> 태그 없이 로고 만들기 (github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style>
			#logo {
				background: url('https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png') no-repeat;
				width: 200px;
				height: 215px;
			}
			.hidden_text {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="logo">
    		<span class="hidden_text">생활코딩</span>
		</div>​
	</body>
</html>

example2.html - 조각 이미지를 이용해서 그라디언트 효과의 배경 만들기 (github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style>
			body{
				background-image:url('https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png');
				background-repeat:repeat-x;
			}
			h1{
				color:white;
			}
		</style>
	</head>
	<body>
		<h1>Hello world​</h1>
	</body>
</html>

댓글

댓글 본문
  1. 김종엽
    2016.08.24 완료!
  2. yihsang
    감사합니다.
  3. 그라디언트를 보다가 궁금한게 있습니다! http://uigradients.com/라는 사이트는 그라디언트를 만들어놓고 CSS로 적용할 수 있는 사이트인데, 이렇게 인터넷의 그라디언트를 가져와 적용할때에는 어떻게해야하나요?
  4. JustStudy
    고맙습니다
  5. 빨강머리앤
    감사합니다. ^^
  6. aristoi
    감사합니다. 열심히 따라하고 있으니 잘 되겠죠!!!
  7. 이웃집토토로
    [팁 - background--repeat 쓸 때 주의점 ]
    마지막 파트 강의에서 소개된 조각 이미지로 배경 이용 하는 방식을 응용해
    버튼을 만들기도 할텐데, 이런 것은 배경이미지 반복할 때 box 넓이를 정해야 할 것입니다.

    그런데 첫번째 파트의 예제처럼 body에 박스 사이즈와 repeat 속성을
    함께 넣어두면 반복되는 배경은 박스와 상관 없이 렌더링됩니다.
    그결과 박스 넓이와 상관없이 반복된 이미지가 박스를 빠져나옵니다.

    body 처럼 내용이 없는 상위 태그에 넣은 경우만 발생합니다.
    body 대신 p, h1 태그나 id 및 클래스를 셀렉터로 사용하는 것이 좋습니다.
    예제는 다음과 같습니다.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p{ width:500px; height:300px; border:1px solid; background-image:url('img_flwr.gif'); background-repeat: repeat-y; }


    </style>
    </head>
    <body>
    <p>button</p>
    </body>
    </html>
  8. 김시은
    좋은 강의 감사합니다.^^
  9. 크레용샘
    오늘도 유익한 강의 감사합니다!!
    화이팅하시죠!^^
  10. 초심80
    logo라는 id를 지정한 div의 크기가 연결을 한 이미지와 같은 크기로 인해서 하나만 보이고 있는거 같습니다.
    style을 지정한 logo의 width와 height의 크기를 임의로 크게 하셔서 해보면
    반복적으로 이미지가 나타나는 것을 확인 할 수 있습니다.
    대화보기
    • 궁금합니다
      CSS 배경꾸미기3 예제1에서요 background-repeat:repeat;를 해도 생활코딩로고가 하나만 나오는데 왜 그런건가요??
    • Kevin Kim
      좋은 강의 잘 듣고 있습니다.

      조각 이미지를 이용해서 그라디언트 효과의 배경 만들기 예제에서 "그라디언트" 이미지 대신에 생활코딩 로고가 링크되어 있네요...

      'https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png'

      참고하세요 ^^
    • egoing
      폭과 넓비 사이에 세미콜론이 없네요.^^
      대화보기
      • cooktaewoo
        좋은강의 잘 보고 있습니다. ^^;

        배경이미지 등록인 예제2번에서 동영상과 똑같이 하는데, 이미지가 안뜨네요.

        <div id="logo">123</div>

        이런식으로 엘리먼트에 123이라고 적어줘야 그 줄만 생깁니다.

        #logo{
        background-image:url('https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png');

        width: 500px
        height: 500px
        }

        동영상에선 xy에 픽셀값을 주면 엘리먼트 내용이 비여도 되던데.. 어디가 문제인걸까요
      • leeta
        친절한 답변 감사드립니다.^^
        대화보기
        • egoing
          경우에 따라서는 스타일 시트가 동작하지 않는 경우가 있고, 또 시각장애인들의 경우에는 일반적인 브라우저를 사용하지 않고 스크린 리더라는 프로그램을 사용하거든요. 검색엔진 같은 경우도 html을 통해서 페이지를 해석하기 때문에 이런 경우들이 이미지를 사용할 수 없는 경우라고 할 수 있습니다.
          대화보기
          • leeta
            오! 제가 궁금한것도 이것입니다.
            예제1 설명하시는 도중 로고 이미지를 사용할 수 없는 경우에는 텍스트 만이라도 사용할수 있도록 한다고 말씀하셨는데요.
            img없이 로고이미지를 사용하는게 정확히 어떤 의미 인지가 궁금합니다.
            아마hunsik님도 저와 같은 궁금함 이셨을거라 생각됩니다^^;
            앞강의중 img가 표시 안될때 alt에 대체 문구를 넣어 줬었잖아요?(잘못된 이미지 일경우 나타나는말로)
            저도 이것이 궁금합니다. alt태그가 스크린리더로 안읽히고 display none이 스크린리더로 읽히는게 무슨 차이인지요...
            대화보기
            • egoing
              음 질문 하신 의도를 정확하게 파악은 못했는데요. alt 속성은 스크린리더 등에서 그 이미지의 의미를 파악 할 수 있도록 사용하는 속성입니다. 더 궁금하신 것이 있으면 질문해주세요~
              대화보기
              • hunsik
                예제 1에서 display none으로 생활코딩이라는 텍스트를 숨긴 것과 image의 alt속성을 이용해서 이미지에 설명을 부여한 거랑은 뭐가 다른건가요? 혹시 alt태그를 이용하면 스크린 리더 등으로는 읽히지가 않나요?.?
              • Boterati
                아직 서버 수업을 안들으셨다면,
                이미지를 개인 블로그에 올리신 후에
                오른쪽 클릭 > 이미지 url 복사를 하셔서 적용해보세요~
                대화보기
                • egoing
                  일단 배경 이미지를 서버에 올리셔야 합니다.
                  그리고 그 서버에 존재하는 이미지의 URL을 사용하셔야 해요. 아래와 같은 형식이죠.
                  https://s3.ap-northeast-2.amazonaws.com......png

                  이 부분은 서버에 대한 지식이 선행이라서 지금 단계에서는 설명 드리기가 어렵습니다.
                  나중에 아래 수업을 완주하시면 이해가 될꺼예요.
                  http://opentutorials.org......488
                  대화보기
                  • 나이스에요
                    하나 궁금한게 있습니다~
                    제 컴퓨터에 있는 이미지를 백그라운드로 사용하려면 어떻게 설정해야하나요?
                  • 별모모
                    [ 단축속성과 display:none ] 1. 단축속성: background와 같이 개체에 여러 속성을 적용할 때에 선택자 { backgraoun: 속성 (공백) 속성 (공백) 속성 (공백) 속성} 처럼, 속성 사이에 공백을 두어 사용할 수 있습니다. 2. "display:none" : Html 코드에는 나타나지만, display(모니터)에는 표시하고 싶지 않을 때, dispaly:none를 사용하여 '시각 장애자 접근성'이나 특별한 디자인에 유용하게 활용할 수 있습니다.
                  • egoing
                    그러내요. 예제가 없어서 제거 했습니다. 감사합니다.
                    대화보기
                    • 빈누
                      +1 수정해주세요~ '배경이미지의 위치'에 대한 예제가 그 전의 예제인 '배경이미지의 반복'에 대한 예제의 링크로 되어있어요!
                      대화보기
                      • IWCTWTMG
                        잘 봤습니다~!
                        그런데 예제2번에서 이미지의 url이 생활코딩이미지네요. 예제 1번의 이미지 url과 같아요.
                        수정해주시면 감사하겠습니다.

                        메리 크리스마스
                      • egoing
                        본문의 내용 수정했습니다. URL 이제 나올꺼예요. 알려주셔서 고맙습니다
                        대화보기
                        • Jamesmoon
                          배경이미지 예제 해보려는데 이미지경로에 대한 이해가 부족해서인지 제가 이미지 파일을 로컬에 두고 해보려고 해도 안뜨네요;; 정확히 이미지는 어디에 어떻게 두고 url 값은 어떻게 입력하는 건가요? 혹시 요기 다른 페이지 있다면 위치좀^^;
                        • 용12
                          잘봤습니다!~! 감사합니다
                        • 용12
                          잘봤습니다!~! 감사합니다
                        • 구루비
                          그라데이션을 이미지를 사용해서 만들었군요..css만으로도 그라데이션을 할 수 있습니다. 아래 주소를 참고해보세요.http://webdesignerwall.com/tut...
                          css 그라데이션은 아직 브라우저별로 방법이 달라 약간의 트릭이 필요합니다.그래서 이번 설명에서는 빠진 것 같네요.
                        • 김유진
                          독타입에 따라서 안되는 경우도 있군여
                        • neO matpclub
                          이미지대체기법 감사합니다.
                        • egoing
                          빙고 ^^
                          대화보기
                          • 누노
                            1번예제에서, 생활코딩이라는 글자가, 화면상에서는 사라지지만 스크린리더로는 읽히는 거죠??
                          • Starmomo
                            [요약]background-color:색상값;background-image:url('이미지의 URL');background-repeat:repeat; (또는 no-repeat; repeat-x; repeat-y;)background-position: left top(또는 left right center, top center bottom, x% y%, xpos ypos)body { boacground: #00ffff url('image.png') repeat ; } 최소의 이미지로 repeat옵션을 주어 배경이미지를 작성.
                            ^^ 잘 보고 있습니다. 고맙습니다.
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기