CSS에서 공간영역을 조절할 수 있는 박스모델과 배경이미지 지정하는 방법에 대해 알아본다.

1. 박스 모델

  • 마진 - 보더 - 패딩 - 콘텐트
  • 최초 마진, 보더, 패딩 두께는 0이다.
    • width : 요소가 포함하고 있는 콘텐트의 너비 (수치값, 퍼센트값)
      • 인라인 요소에는 지정할 수 없다.
    • height : 요소가 포함하고 있는 콘텐트의 높이 (수치값, 퍼센트값)
      • 퍼센트값을 쓸 때 해당 요소가 포함한 콘텐트의 높이값이 명시되어 있지 않으면 퍼센트는 적용되지 않는다.


# 마진, margin

  • 주로 콘텐트의 바깥 여백을 주는 데 사용한다.
  • 배경색이 적용되지 않는 공간.
  • 마진통합 :

      h1 { margin-bottom: 10em; }
      p { margin-top: 5em; }
      - 마진은 15em 아니라 10em이다.
    
    • 첫번째 요소의 아래마진과 두번째요소의 윗마진이 겹칠 떄 두 마진 값은 더해지지 않고 둘 중 큰 값으로 마진이 정해진다.


# 보더 border

  • 테두리 라인을 지칭한다.
  • 굵기, 컬러 등을 설정할 수 있다.
  • 배경색은 테두리선 안쪽에서부터 시작한다.
    • border-color : 색상지정
    • border-style : solid, dotted, dashed
    • border-width : thin, thick, medium 또는 수치값, 퍼센트x border: 1em solid black; 로 줄여쓸 수 있다.


# 패딩 padding

  • 콘텐트의 안쪽 여백이다.
  • 배경색이 적용되는 공간.


# 요소의 전체크기 정하기 box-sizing

  • border-box : 요소 전체를 기준으로 너비와 높이를 산정
  • content-box : 요소가 포함하고 있는 콘텐트의 너비와 높이만으로 산정


7. 널리 사용되는 배경 속성


# 배경색 background-color

  • 색상값 : 모든 색상값(#red; or #rrggbb;) or 투명도값(rgba) 지정 가능
  • 배경색은 흰색이라도 반드시 지정하는 것이 좋다.


# 투명도 opacity RGBa

opacity RGBa
해당 요소의 모든 하위요소에 상속되고 재정의가 불가능하다
배경, 글자, 하위요소 모두 투명하게 처리된다.
개별 지정이 가능하다.
background-color: rgba(0, 0, 0, 0.2)
투명색상값은 배경에 적용된다.
색상값을 지정할 수 있는 어떤 속성에든 지정가능하다.
글자(color), 테두리색(border-color)


# 배경이미지 background-image

 background-image : url("./images/a.png")
  • 키워드값 : 특정 요소의 배경에 이미지를 삽입
  • url은 모든 브라우저에서 지원하는 png(이미지), gif, jpeg(사진포맷) 사용권장.
  • 디폴트값이 repeat으로, 페이지의 전체 배경에 패턴을 반복한다.
    • 이 경우 background-repeat: no-repeat을 지정하여 반복을 피할 수 있다.


# 배경 반복설정 background-repeat

  • 키워드값
  • repeat : 배경 이미지를 가로, 세로방향으로 반복.
  • no-repeat : 배경이미지를 1번만 출력
  • repeat-x : 이미지를 가로 방향으로만 반복
  • repeat-y : 이미지를 세로 방향으로만 반복


# 배경이미지의 위치 background-position

  • 이미지가 놓일 위치 지정
  • 이미지를 반복할 경우 반복이 시작되는 위치 지정가능
  • 복수의 키워드값 지정 가능

      background-position: right top;
      /*이미지를 오른쪽에 위치시키고 위에서 아래로 반복시키고 싶을 때.*/
    
    키워드값 이미지 위치지정 반복
    top 가장 위 위에서 아래로
    center 화면의 정가운데 가운데에서 위,아래,오른쪽,왼쪽)으로
    bottom 가장 아래 아래에서 위로
    left 왼쪽 왼쪽에서 오른쪽으로
    right 오른쪽 오른쪽에서 왼쪽으로
  • 수치값 :
    • background-position: 3em 6em;
    • 이미지를 왼쪽에서 3em, 위에서 6em 떨어진 곳에 위치시키고 싶을 떄
    • 이미지의 너비가 고정되지 않은 상태에서 수치값으로 오른쪽에 위치시키는 것은 불가능!


  • 퍼센트값 :
    • 정교하게 위치시키고 싶을 때 유용하다.
    • background-position: 60%;
    • 이미지의 60% 지점이 배경의 60% 지점과 일치하는 곳에 이미지를 위치시킴
    • 가운데 정렬도 매우 쉽다. background-position: 50%


# 배경이미지 스크롤 여부 background-attach

  • 페이지를 스크롤할 때 컨텐츠와 상관없이 배경이미지를 고정할 것인가?
  • scroll 또는 fix: 고정
  • scroll(기본값)



Julia Hwang

디발자를 꿈꾸는 웹개발자의 블로그입니다.