CSS 박스 모델

CSS와 박스 모델

블록 레벨 요소와 인라인 레벨 요소 : 블록은 한줄, 인라인은 화면에 표시되는 콘텐츠만큼만 영역 차지

display : none | contents | block | inline | inline-block | table | table-cell 등

테두리 관련 속성들

border-style 속성 - 테두리 스타일 지정하기

border-width 속성 -테두리 두깨 지정하기 <크기> | thin | medium | thick

border-color 속성 - 테두리 색상 지정하기

border 속성 - 테두리 스타일 묶어 지정하기 <두깨> | <색상> | <스타일>

border-radius 속성 - 박스 모서리 둥글게 만들기 <크기> | <백분율>

타원형태는 border-top-left-radiuse : <가로크기> <세로크기

               border-radius : <가로크기> / <세로크기>

box-shadow 속성 - 선택한 요소에 그림자 효과 내기

  수평거리, 수직거리, 흐림정도(0이 가장커, 커질수록 작아져), 번짐정도(크면 그림자 커지고 작으면 축소), 색상, inset(안쪽 그림자, 평소에는 바깥쪽)

여백을 조절하는 속성들

margin, padding

마진을 사용해 화면 가운데 배치하기 : margin: 100px auto;

마진 중첩 현상 : 위의 마진과 아래 마진이 서로 만날 때 큰 마진 값으로 합쳐진다.(왼쪽, 오른쪽은 중첩x)