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