생활코딩

Coding Everybody

배경(background)

토픽 생활코딩 > 클라이언트 > CSS > CSS 수업

소개

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

 

댓글

댓글 본문
  1. 곤비
    0219
    답글
  2. 새콤달콤
    완료
    답글
  3. DreamBoy
    2023.09.22. CSS - 그래픽 - 배경(background) 파트를 시작합니다.
    답글
  4. AgainstartJH
    2022년 11월 23일 수요일 학습완료!
    답글
  5. 이슬유치원
    22.7.8완료
    답글
  6. 09년생개발자
    22.3.21
    답글
  7. INJE
    22/03/18
    답글
  8. 드림보이
    2021.11.16. 배경(background) 파트 수강완료
    답글
  9. vogueupp
    완료
    답글
  10. choi
    완료
    답글
  11. jeisyoon
    2021.06.24 Background _ OK
    답글
  12. yogg
    background 잘쓰면 좋겠네여 ~
    답글
  13. 임태경
    완료했어요 감사해요
    답글
  14. 스마일가이
    2021.01.29 완료 감사합니다
    답글
  15. 따뜻한츄르
    210101
    축약형
    background:tomato url('run.png') no-repeat fixed center;
    답글
  16. SRC
    20`1218
    답글
  17. switpotato
    20201129 2차 학습 완료
    답글
  18. 만듀
    20201118
    답글
  19. uin
    감사합니다
    답글
  20. jaehyunlee
    완료
    답글
  21. 박병진
    감사합니다.
    답글
  22. 콜라
    20200930 완료
    답글
  23. 김성곤
    20200725 감사합니다!
    답글
  24. 007bbang
    background 속성을 한방에 정리해주셔서 감사합니다~
    답글
  25. 한강
    background 속성들 잘 배웠습니다.
    오늘도 화이팅~~^^!
    200611
    답글
  26. green diseny
    background 속성들에 대해서 알아서 재미있었다!!
    답글
  27. 무지개반사
    완료
    답글수정삭제
  28. Blanc
    2020.01.06
    답글
  29. gogossing
    <!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>
    답글수정삭제
  30. gogossing
    <!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>
    답글수정삭제
  31. 다나가
    190807 수강완료!!!
    답글
  32. FIRE
    20190731 완료
    답글수정삭제
  33. 박지성
    치타가 달려가는 모습은 마치 호나우두를연상 시켰기 때문에
    답글수정삭제
  34. 노혜주
    완료
    답글
  35. lygon
    2019-03-06 완료
    답글
  36. 숨이
    완료햇습니당
    답글
  37. 김민영
    완료
    답글수정삭제
  38. Asy1ess
    영상 제목이 CSC 수업 - 배경으로 되어있네요 ㅎㅎ
    답글수정삭제
  39. ㅅㅈㅎ
    감사합니다!!
    답글
  40. javaz
    정말 감사드립니다ㅜㅜ
    답글수정삭제
  41. 스페이스몽키
    감사합니다!
    답글
  42. 가즈아
    내용 잘 봤습니다.
    롤오버 버튼을 만들 때 일반 버튼이미지와 오버시 버튼 이미지를 한 이미지에 넣고
    background-position으로 롤오버 효과를 주는 예제도 보충해 주시면 감솨합니다.
    한 이미지 파일에 여러 이미지의 좌표를 찾아 바꿔주는 방법을 보충 설명 해 주세요..

    항상 좋은 강의 자료 감솨합니다.
    답글수정삭제
  43. 푸른하늘
    11일차 공부 감사합니다
    답글
  44. 이경일
    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;
    답글수정삭제
  45. 오빠는다르다
    감사합니다~!!!!
    답글
  46. sunday00
    현재 만들고 있는 html과 같은 폴더에 있으면 되고, 되도록 파일 이름을 영문으로 해보세요.
    확장자와 파일명이 맞는지도 체크해 보세요.
    대화보기
      답글
    • kchee
      머리에 속속 들어오게 가르치시네요. 땡큐
      답글수정삭제
    • 오들오들오드리
      그림을 다운 받아서 어느 경로에 저장하면 될까요?
      이고잉님을 따라서 잘 해왔는데... 그림 부분에서 막혔습니다 ㅠㅠ
      도와주세요~~
      답글수정삭제
    • 세븐나이츠
      감사합니다
      답글
    • sang
      대단한 수업입니다. 다 알았다 생각했는데 여기와서 모르고 지냈던 10년을 보충해주네요. 초특급감사!
      답글수정삭제