CSS 3일차 - 배경

>CSS의 배경
  1. background-color
        HTML 요소의 배경색을 설정

  2. background-image
        HTML 요소의 배경으로 나타날 배경 이미지로 설정
        배경 이미지는 기본 설정으로 반복(바둑판 형식)되어 나타남
        background-image : url('배경이미지 경로');

  3. background-repeat
        배경 이미지를 수평이나 수직 방향으로 반복하도록 설정
        repeat, repeat-x, repeat-y, no-repeat
   

  4. background-position
        반복되지 않는 배경 이미지의 상대 위치를 설정
        %나 px을 사용해서 상대위치를 직접 설정할 수 있음 
        상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단 
        
        left top        center top      right top 
        left center     center          right center
        left bottom     center bottom   right bottom 

        background-position : 가로위치값 새로위치값;

 5. background-attachment
    - 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음
    - 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음
       /  fixed 

원하는 위치 설정

 

이미지는 쉼표를 통해 한 곳에 다양한 배경의 속성을 넣을 수 있다 / 또한 attachment 를 통해 배경 위치를 고정시키는 것을 볼 수 있다.

 6. background-size
    - 배경 이미지의 크기를 설정
    - px, %를 사용

        contain
            배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크기 설정
            이미지의  가로, 세로 비율을 유지
            배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음 

        cover
            배경 이미지의 가로, 세로 모두 요소보다 크다는 조건하에 가능한 크기 설정
            이미지의 가로, 세로 비율을 유지 
            배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음 

밑에 이미지는 cover를 주어 가로세로 비율 유지하게끔 함(이미지>가로세로요소)

contain을 이용하였다(가로세로요소>이미지) 또한 무는 사랑이다. 그것은 불변의 법칙..

한꺼번에 같이 쓰기도 한다.

*무료 배경 사이트
https://unsplash.com

>박스모델(Box Model)
 - 모든 HTML 요소는 박스 모양으로 구성되어 있음 
 - 박스모델이라고 부름
 - 박스모델은 HTML 요소를 마진, 테두리, 패딩, 내용으로 구분함 

1.내용(Content)
    텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분

2.패딩(padding)
    내용과 테두리 사이의 간격, 여백
    padding-top, padding-right, padding-bottom, padding-left
    padding : 패딩 속성을 한꺼번에 설정, 위부터 시작해서 시계방향으로 설정

    padding:20px 50px 30px 10px;
        위 20px 오른쪽 50px 아래 30px 왼쪽 10px;

    padding: 20px 50px 30px;
        위 20px, 양 옆 50 px, 아래 30px
    
    padding: 20px 50px;
        위 아래 20px , 양 옆 50px
    
    padding: 20px;
        모든 여백을 20px

3.테두리(border)
    내용과 패딩 주변을 감싸는 테두리
    border-style : 테두리의 형태를 다양한 모양으로 설정(solid,dashed,...)
    border-color : 테두리의 색상 설정
    border-width : 테두리의 두께 설정
    border       : 모든 테두리 속성을 한꺼번에 설정 (두께 형태 색상)

4.마진(margin)
    테두리와 이웃하는 요소 사이의 간격, 여백
    마진을 눈에 보이지 않음 

margin 0 auto 하면 가운데로 정렬시켜준다.

>세로 겹침 현상
 - 세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택

>박스 사이징(box-sizing)

 1.box-sizing: content-box;
 - width, height 값에 padding이나 border 영역은 포함되지 않음
 * 만약 width가 100%로 설정되었을 경우 border나 padding을 추가할 수 없음 

2.box-sizing: border-box;
 - padding과 border를 width와 height에 포함시켜서 박스를 구현

 
 * content- box가 기본값(포함시키지 않음)

content box는 width 에 padding, border 값 포함이 안되서 더 크게 보인다.

>둥근 테두리 만들기 
    border-radius : top-left-x top-right-x bottom-rignt-x bottom-left-x/
                        top-left-y top-right-y bottom-rignt-y bottom-left-y

>테이블 테두리 설정(border-collapse)
 - 테이블 셀들간의 공백을 어떻게 처리할지를 결정하는 속성
    seperate(기본)    :셀들을 분리
    collapse            :셀들을 이어 붙여 사이의 공백을 없앰