08장 정리하기

</> 박스 모델 속성

width :  박스 모델의 너비를 지정함

height : 박스 모델의 높이를 지정함

box-sizing : 박스 모델의 크기를 계산하는 기준을 지정함

box-shadow : 박스 모델에 그림자 효과를 추가함

 

</> 테두리 속성

border-style : 상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정함

border-위치-style : '위치' 자리에 top,right, bottom, left  중에서 선택해서 특정 위치의 테두리 스타일만 지정함

border-width : 상하좌우 4개 방향 테두리 두께를 한꺼번에 지정함

border-위치-width : '위치' 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 테두리 두께만 지정함

border-color : 상하좌우 4개 방향 테두리 색상을 한꺼번에 지정함

border-위치-color : '위치' 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 테두리 색상만 지정함

border-radius : 상하좌우 4개 방향 꼭짓점을 한꺼번에 둥글게 만듦

border-위치-radius : '위치' 자리에 top-left, top-right, bottom-right, bottom-left 등을 선택해서 특정 꼭짓점만 둥글게 처리함

 

</> 여백 속성

margin : 상하좌우 4개 방향의 마진을 한꺼번에 지정함

margin-위치 : '위치' 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 마진만 지정함

padding : 상하좌우 4개 방향의 패딩을 한꺼번에 지정함

padding-위치 : '위치' 자리에 top, right, bottom, left 중에서 선택해서 특정 위치의 패딩만 지정함

 

</> 레이아웃 속성

display : 화면에서 요소를 배치 방법을 지정함. 자주 사용하는 주요 속성으로 block, inline, inline-block, none 등이 있음

float : 웹 요소를 왼쪽이나 오른쪽으로 배치함. float를 적용한 요소는 clear 속성으로 해제하지 않으면 뒤에 오는 요소도

계속 왼쪽이나 오른쪽으로 연결해서 배치됨

 

</> 위치 지정 속성

left, right, top, bottom : 기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정함

position : 웹 요소의 위치를 지정함. 속성값으로 static, relative, absolute, fixed가 있음