10. CSS 배경과 박스 모델

1. CSS 배경:

background-color

• HTML 요소의 배경색을 설정

 

background-image

• HTML 요소의 배경으로 나타날 배경 이미지를 설정
• 배경 이미지는 기본 설정으로 반복되어 나타남
• background-image: url(파일경로)

background-repeat 

• 배경 이미즐 수평이나 수직 방향으로 반복하도록 설정(repeat-x, repeat-y, no-repeat)

background-postion

• 반복되지 않은 배경 이미지의 상대 위치를 설정
• %나 px을 사용하여 상대위치를 직접 설정할 수 있음
• 상대위치를 결정하는 기준은 왼쪽 상단

left top        center top      right top
left center     center          right center
left bottom     center bottom   right bottom

예
background-postion: center bottom
background-postion: 가로위치값, 세로위치값 => background-postion: 10%, 100px;

 

background-attachment

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

background-size

• 반복되지 않은 배경 이미지 크기를 설정
• px, %, contaon, cover
•  contain
  • 배경 이미지의 가로, 세로 모두 요소보다 작다는 전제하에 설정
  • 가로, 세로 비율은 유지
  • 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음
• cover
  
  • 배경 이미지의 가로, 세로 모두 요소보다 작다는 전제하에 설정
  • 가로, 세로 비율은 유지
  • 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음

• background
  
  • background 파일위치 반복여부 위치 사이즈 ...

 

2. 박스

 

박스 모델(Box Model)

• 모든 HTML 요소는 박스 모양으로 구성
• 박스 모델은 내용(content), 안쪽여백(padding), 테두리(border), 바깥여백(margin)으로 구성된다는 것을 의미

내용(content)

• HTML 요소의 배경색을 설정

안쪽여백(padding)

• 내용과 테두리 사이의 간격 또는 여백
• padding-top, padding-right, padding-bottom, padding-left
• padding: 위 오른쪽 아래 왼쪽 순으로 설정

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

CSS
div#padding {padding: 20px 50px 30px 10px; }
위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px

div#padding {padding: 20px 50px 30px; }
위 20px, 오른쪽 왼쪽 50px, 아래 30px

div#padding {padding: 20px 50px; }
위 아래 20px, 오른쪽 왼쪽 50px

div#padding {padding: 50px; }
위 아래 오른쪽 왼쪽 50px

 

테두리(border)

• 내용(content)과 안쪽여백(padding) 주변을 감싸는 프레임
• border-style(테두리 모양), obrder-color(테두리 색상), border-width(테두리 두께)
• border로 한꺼번에 설정

바깥여백(margin)

• 내용(content)과 안쪽여백(padding) 주변을 감싸는 프레임
• border-style(테두리 모양), obrder-color(테두리 색상), border-width(테두리 두께)
• border로 한꺼번에 설정

박스사이징(box-sizing)

• 내용(content)과 안쪽여백(padding) 주변을 감싸는 프레임
• border-style(테두리 모양), obrder-color(테두리 색상), border-width(테두리 두께)
• border로 한꺼번에 설정

 

3. CSS 레이아웃

 

css 디스플레이

• 웹 페이지의 레이아웃을 결정하는 속성
• block, inline, inline-block, none, flex ..
• visibility: hidden < - > visibility: visible;

css 폼

• w3schools, mdn 참고(https://developer.mozilla.org/ko/)

 

CSS postion

• 요소의 위치를 결정하는 방식을 설정

1. 정적 위치 지정방식

• static postion (기본값)
• HTML 요소의 위치를 결정하는 기본적인 방식
• 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식

2. 상대 위치 지정박식

• relative postion
• HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
• top, left, right, bottom 속성값을 사용하여 재설정함

3. 고정 위치 지정방식

• fixed postion
• 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
• 뷰포트를 기준으로 위치를 설정하는 방식
• top, left, right, bottom 속성값을 사용하여 재설정함 

4. 부모태그를 이용한 고정 위치 지정방식

• fixed postion
• fixed가 브라우저 화면의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대 위치값을 사용하는 방식
• 익스플로러에서는 작동하지 않음

5. 절대위치 지정방식

• absolute position
• 뷰포트를 기준으로 위치를 설정하는 방식
• 조상요소를 기준으로 위치를 설정할 수 있음
• 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 설정
• 조상요소를 기준으로 위치를 설정하려면 조상요소가 반드시 정적 위치 지정방식이 아니여야 함
  • top, left, right, bottom 속성값을 사용하여 설정함