Day3_VSCODE_CSS 텍스트+ 배경+ 패딩+ 테두리

폰트

🟡font-size	텍스트 크기를 지정 속성: px % em rem (em은 default가 pc에서는 16px, 모바일 12px) (rem은 html에 설정하는 단위 / 전체 모든 단위에 16px로 설정)
🟡font-family	-텍스트에 글꼴을 설정
🟡font-weight	- 텍스트의 굵기를 설정 - 기본 굵기 : 400 (범위 100 ~ 900)

CSS배경

 

🟡background-color	-HTML 요소의 배경색을 설정
🟡backgroud-image	- HTML 요소의 배경으로 나타낼 배경 이미지를 설정 - 배경 이미지는 기본 설정으로 반복되어 나타남
🟡backgroud-repeat	- 배경 이미지를 수평이나 수직방향으로 반복하도록 설정()
🟡backgroud-position	-반복되지 않는 배경 이미지의 상대위치를 설정 -%나 px을 사용해서 상대위치를 직접 설정할 수 있음 -상대위치를 결정하는 기준은 왼쪽 상단(left top)
🟡background-attachment	- 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음 - 고정된 배경 이미지는 스크롤과 무관하게 화면 위치에서 이동하지 않음 - 속성 fixed
🟡backgroud-size	- 배경 이미지 크기를 설정 - 속성: px, %, contain, cover       - contain          * 가로 세로 비율은 유지         * 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음      - cover         * 이미지가 틀보다 더 클 때         * 가로 세로 비율은 유지         * 배경 이밎의 크기는 요소의 크기보다 항상 크거나 같음
🟡backgroud	- 배경 속성을 한꺼번에 적용   - 속성: backgroud 파일위치, 반복여부,위치,사이즈..........

박스 모델

 

- 모든 html요소는 박스 모양으로 구성
- 박스 모델은 HTML요소를 내용,패딩,테두리,마진으로 구분함

 

패딩(padding)

- 내용과 테두리 사이의 간격

- padding-top /padding-right /padding-bottom / padding-left

- padiing 한꺼번에 적용시 시간순서대로(12 3 6 9)

    [css]
    div#padding {padding 20px 50px 30px 10px}
    위 오른쪽 아래 왼쪽

    [HTML]
    <div id='padding'>안녕하세요</div>
  
  ===============================================================

    ✔만약 3개만 입력시
    [css]
    div#padding {padding 20px 50px 30px }
    위 / 오른쪽 왼쪽 / 아래
    [HTML]
    <div id='padding'>안녕하세요</div>
    
    =====================================================

    ✔만약 2개만 입력시
    [css]
    div#padding {padding 20px 50px}
    위 아래/ 오른쪽 왼쪽 
    [HTML]
    <div id='padding'>안녕하세요</div>

 

테두리(border)

- 내용(content)와 패딩(padding) 주변을 감싸는 테두리

- 속성
border-style(테두리모양)
border-color(테두리컬러)
border-witdh(테두리두께)
border(전체)