(HTML/CSS)box model과 background(5)

*Box model

• 마진, 패딩, 테두리, 컨텐츠를 box model 이라고 합니다.

• 12시 3시 6시 9시 방향 순서로 적용이 됩니다.

• 두 개만 있을 때는 세로, 가로에 적용이 됩니다.

-기본형태:

• {border: 00px solid red;}
• {padding-top: 00px;}
• {padding: 00px 00px 00px 00px;}
• {marigin: 00px 00px;}

 

*Width, height

• {max-width: 00px;}: 최대 길이를 설정합니다.

• {min-height: 00px;}: 최소 길이를 설정합니다.

 

*Overflow

• {overflow: hidden;}: 넘치는 부분을 숨깁니다.

• {overflow: visible;}: 넘치는 부분을 보여줍니다.

• overflow: scroll;}: 스크롤로 볼 수 있게 해줍니다.

• overflow: auto;}: 내용이 넘칠때만 스크롤 바를 만듭니다.

 

*Border

• {border: 두께 선유형 선색;}

• 선유형: solid(실선), dotted(점선), dashed(사선) 등

• {border-top: 0px solid black;}: 특정 부분만 테두리 설정이 가능 합니다.

• {border: none;} 혹은 {border: 0;}: 테두리를 없애는 것 입니다.

 

*Box style

• {border-radius: 00px;}: 모서리 둥글게, 수치가 커질수록 더 둥글게 만듭니다.

• {border-top-left-radius: 0px;}: 개별설정이 가능합니다.

 

*Background

• {background-color: red;}: 배경 색을 설정합니다.

• body 태그에 background를 하면 페이지 전체에 적용합니다.

• {background-color: transparent;}: 배경을 투명하게 만듭니다.

• {background-image: url("주소.jpg");}: 배경에 이미지를 설정합니다.

• {background-repeat: 반복유형;}: 반복 유형을 설정합니다.

+no-repeat, repeat, repeat-x, repeat-y, space, round 와 같은 유형이 있습니다.

• {background-size: 사이즈 유형;}: 사이즈를 설정합니다.

+auto, cover, contain, 0px 0px, 0% 0% 와 같은 유형이 있습니다.

• {background-position: 가로 세로;}

• 가로: left, center, right, 크기

• 세로: top, center, bottom, 크기