[프론트엔드][CSS3] 7. box에 영향을 주는 스타일
box에 영향을 주는 스타일
- width
: 넓이 지정 값: 숫자입력 (px, %, auto)
- height
: 높이 지정 값: 숫자입력 (px, %, auto)
- border
: 선 표현 값: 굵기 선스타일 색 ex) 5px solid #000
border-top, border-bottom, border-left, border-right 와 같이 개별부여도 가능하다.
▷ 선스타일 ◁
solid(일반 실선), dashed(직선형태의 긴 점선), dotted(도트형태의 점선), double(이중선, 두줄)
groove(입체적), ridge(테두리 창에서 튀어나온 표시),
inset(테두리 안쪽 형태로 굵게 표시), outset(테두기 바깥쪽 형태로 굵게 표시)
- padding
: 안쪽 여백 (박스의 형태에서 안쪽으로 여백을 주고싶을 때 지정한다.)
padding-top, padding-bottom, padding-left, padding-right 와 같이 개별부여도 가능하다.
한자리 - 전체(top, left, right, bottom)에 값이 동일하게 적용된다. ex) 10px
두자리 - 상하 좌우(top/bottom, left/right)에 값이 적용된다. ex) 10px 20px
네자리 - 상 우 하 좌(top, right, bottom, left)에 값이 적용된다. ex) 10px 20px 30px 40px
<div>에 padding 을 설정해 주었더니 설정한 값만큼 안쪽으로 여백이 생겨서
'box' 글자가 안쪽으로 들어가 있는 것을 확인할 수 있다.
- margin
: 바깥여백 (박스의 형태에서 바깥쪽으로 여백을 주고 싶을 때 지정한다.)
margin-top, margin-bottom, margin-left, margin-right 와 같이 개별부여도 가능하다.
margin: 0 auto ⇨ 바깥여백 0을 가지며 박스를 중심으로 배치한다.
한자리 - 전체(top, left, right, bottom)에 값이 동일하게 적용된다. ex) 10px
두자리 - 상하 좌우(top/bottom, left/right)에 값이 적용된다. ex) 10px 20px
네자리 - 상 우 하 좌(top, right, bottom, left)에 값이 적용된다. ex) 10px 20px 30px 40px
비교를 위해서 <body> 에 배경색을 설정했다.
<span> 에는 아무것도 설정하지 않아서 기본 자리에 위치해 있는데,
반면, <div>에 margin 값을 주었더니 그 값만큼 여백이 생긴 것을 확인할 수 있다.
- border-radius
: 박스 모서리 둥글게 만드는 스타일
한자리 - 4개의 모서리에 모두 값이 동일하게 적용된다. ex) 50px
두자리 - 앞쪽(top-left, bottom-right) 뒤쪽(top-right, bottom-left)에 값이 적용된다. ex)50px 30px
네자리 - 상-좌(top-left), 상-우(top-right), 하-우(bottom-right), 하-좌(bottom-left)에 값이 적용된다.
ex)50px 10px 20px 30px
