블록 레벨 요소 / 인라인 레벨 요소
박스 모델은 블록 레벨 요소와 인라인 레벨 요소로 나뉜다.
블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때, 혼자 한 줄을 차지하는것을 가리킨다.
즉 해당 태그가 너비의 100%를 차지한다는 것이다. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
블록 레벨 요소의 대표적인 태그
- h(n) h1,h2,h3...
- div
- p
반면 인라인 레벨 요소는 한 줄을 차지하지 않고 해당 콘텐츠의 크기만큼만 영역을 차지한다.
따라서, 인라인 레벨 요소는 한 줄에 여러 개를 표시할 수 있다.
인라인 레벨 요소의 대표적인 태그
- span
- img
- strong
박스 모델
박스 모델은 CSS의 기본형태이며 중요한 개념이다.
아래와 같은 개념으로 설명된다. (내가 직접 그렸다.)
해당 박스 모델처럼 각 웹에서 margin, border, padding값을 보고싶다면 F12를 눌러
개발자 도구에서 왼쪽위의 아이콘을 누르고 클릭시 확인할 수 있다.
width, height
콘텐츠 영역의 크지를 지정할 때 사용하는 속성으로 너비는 width, 높이는 height 속성을 사용한다.
width와 height의 속성값
- auto : 콘텐츠 양에 따라 자동으로 설정한다. (기본값)
- 크기 : 너비나 높이의 값을 px이나 em등의 단위로 지정한다.
- 백분율 : 박스 모델을 포함하는 부모 요소를 기준으로 너비값이나 높잇값을 백분율(%)로 정한다.
box-sizing
width 속성과 height 속성은 박스 모델에서 주변의 여백, 테두리를 뺀 콘텐츠 영역의 크기이다.
그래서 웹 문서에 실제로 여러 가지 요소를 배치할 때 실제 박스 모델이 차지하는 크기는 주변의 여백, 테두리등 다 계산하여야 한다.
콘텐츠 영역의 너비가 200px이고 padding의 값이 20px, border의 두께가 10px이라면 박스 모델의 크기는?
width : 200px로 정한 200px이 아니라,
width, padding, border의 값을 전부 더한 200(width) + padding(20x2) + border(10x2) = 260px이다.
이러한 어려운 계산을 매번 할 필요없이 box-sizing 속성을 사용하면 계산이 편하다.
box-sizing의 속성값
- content-box : 콘텐츠 영역만 너비값을 지정한다. (기본값)
- border-box : 테두리까지 포함하여 너비값을 지정한다.
ex) border : 10px, padding : 20px일 경우 width : 200으로 설정시, content값은 padding과 border값을 제외한 140px이 된다.
box-shadow
CSS에서 그림자 효과를 주는 속성이다.
box-shadow의 기본형
#content { box-shadow : 수평거리(필수) 수직거리(필수) 흐림정도 번짐정도 색상 inset; }
box-shadow의 속성값
- 수평 거리 : 그림자의 가로값으로 양수는 요소의 우측, 음수는 요소의 좌측으로 만든다. (필수 요소)
- 수직 거리 : 그림자의 세로값으로 양수는 아래로, 음수는 요소의 위로 만든다. (필수 요소)
- 흐림 정도 : 양수만 사용가능하다. 값이 커질수록 부드러운 그림자를 표현한다. (생략시 0이 기본값)
- 번짐 정도 : 양숫값을 사용시 모든방향으로 그림자가 퍼져 그림자가 크게 보인다. 음숫값을 사용하면 모든방향으로 그림자가 축소되어 보인다. (생략시 0이 기본값)
- 색상 : 한 가지만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있다.
(생략시 black이 기본값)- inset : 이 키워드를 작성하면 안쪽 그림자로 그린다.
