- 블록 레벨(block-level) 요소
- 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 : 요소의 너비가 100%
- 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없음
- 대표적인 태그 :
<h1>,<div>,<p>
- 인라인 레벨 (inline-level) 요소
- 한 줄을 차지하지 않음
- 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음
- 대표적인 태그 :
<span>,<img>,<strong>
웹 문서의 블록 레벨 요소는 모두 박스 형태,
스타일 시트에서 이렇게 박스 형태인 요소를 박스 모델(box model) 요소라고 함
- 박스 모델 요소
- 콘텐츠 영역
- 패딩(padding) : 박스와 콘텐츠 영역 사이의 여백
- 테두리(border)
- 마진(margin) : 여러 박스 모델 사이의 여백
- 각각 상하좌우로 나뉘어 있어 네 방향의 스타일을 따로 설정할 수 있음
- width와 height의 속성값
- <크기> : 너비나 높이의 값을 px이나 em 단위로 지정
- <백분율> : 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정
- auto : 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정. 기본값
- box-sizing의 속성값
- border-box : 테두리까지 포함해서 너빗값을 지정
- content-box : 콘텐츠 영역만 너빗값을 지정. 기본값
- 요소의 크기를 쉽게 계산하려면 box-sizing 속성을 border-box로 지정해 놓는 것이 좋음
기본값 box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
top -> right -> bottom -> left 시계 방향 순서
border-style의 속성값: none(기본값), hidden, solid, dotted, dashed, double, groove, inset, outset, ridge ...
기본형 border-width: <크기> | thin | medium | thick
방향마다 다르게 지정하려면?
- border-top-width, border-right-width ...처럼 상하좌우 방향을 넣고 하이픈(-)으로 연결
- border-width: <상> <우> <하> <좌> 순으로 넣기
- 속성값이 2개라면 첫 번째 값이 위아래(top, bottom) 값이 되고, 두 번째 값이 좌우(left, right) 값이 됨
- 속성값이 3개라면 top - right - bottom 의 속성인데, 빠진 left의 속성값은 마주 보는 right의 속성값과 동일하게 적용
- 테두리 스타일과 두께, 색상을 한꺼번에 표현하기 위한 속성
- border-top, border-right 처럼 속성 이름에 방향을 함께 써서 따로 지정할 수 있음
- 4개 방향의 테두리 스타일이 같다면 간단히 border 속성만 사용
꼭짓점 부분에 원이 있다고 가정해서 둥글게 처리, 원의 반지름 이용
기본형 border-radius: <크기> | <백분율>
이미지도 원 형태로 만들 수 있음
top-left / top-right / bottom-right / bottom-left
border와 radius 사이에 위치를 나타내는 예약어를 넣어 사용
ex) border-top-left-radius: 20px;
꼭짓점을 타원으로 만들기
원 대신 타원이 있다고 생각하므로 반지름 대신 타원의 가로 반지름값과 세로 반지름값을 넣어 주는데, 이때 값 사이에 슬래시(/)를 넣어 구분
기본형 border-(위치)-radius: <가로 반지름> / <세로 반지름>;
마진 (margin) : 요소 주변의 여백
기본형 margin: <크기> | <백분율> | auto
auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정
margin 속성을 사용해 내용을 화면 중앙에 배치하려면?
- 배치할 요소의 너빗값이 정해져 있어야 함
- margin-left와 margin-right의 속성값을 auto로 지정
마진 중첩(margin overlap) 또는 마진 상쇄(margin collapse) : 요소를 세로로 배치할 경우 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐짐
오른쪽 마진과 왼쪽 마진이 만날 경우에는 중첩되지 않음!
패딩(padding) : 콘텐츠 영역과 테두리 사이의 여백 = 테두리 안쪽의 여백
- 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있음
- 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있음
- 자주 사용하는 display 속성값
- block : 인라인 레벨 요소를 블록 레벨 요소로 만듦
- inline : 블록 레벨 요소를 인라인 레벨 요소로 만듦
- inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있음
- none : 해당 요소를 화면에 표시하지 않음
float 속성 : 웹 요소를 문서 위에 떠 있게 만듦. = 요소가 왼쪽 구석이나 오른쪽 구석에 배치된다는 것
- float 속성값
- left : 해당 요소를 문서의 왼쪽에 배치
- right : 오른쪽에
- none : 좌우 어느쪽에도 배치하지 않음. 기본값
- clear 속성값
- left :
float: left를 해제 - right
- both
플로팅이란, 요소를 왼쪽 또는 오른쪽으로 떠 있게 하는 레이아웃 기법
float 속성을 사용해 요소를 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달됨
즉, 플로팅 해제는 요소를 떠 있지 않게 만드는 것
- left :
display: inline-block과 float: left의 차이점
- 공통점 : 둘다 왼쪽으로 배치해 메뉴를 가로로 표시
- 차이점
display: inline-block: 가로로 배치하면서도 기본 마진과 패딩을 가짐float: left: 요소에 기본 마진과 패딩이 없어 요소마다 마진과 패딩 지정 필요, clear로 플로팅 해제 필요
기준 위치와 요소 사이에 ~쪽으로 얼마나 떨어져 있는지 지정
- position 속성값
- static : 기본값. 문서의 흐름에 맞춰 배치
- relative : 위칫값을 지정할 수 있다는 점을 제외하면 static과 동일
- absolute : relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
- 상위에서
position이static이 아닌 속성값을 사용한 첫 번째 요소를 기준으로 위치를 결정 - 부모 요소 중에 없으면 상위 요소를 찾아보고, 그래도 없다면 더 위의 요소를 찾아봄 (body까지)
- 상위에서
- fixed : 브라우저 창을 기준으로 위치를 지정해 배치