[CSS] 기초 3

css와 박스 모델

블록 레벨 요소	요소를 삽입했을 때 혼자 한 줄을 차지하는 요소
ex.	<div> , <p> 등

 

인라인 레벨 요소	줄을 차지 하지 않는 요소
ex.	<img> 등

 

박스 모델	실제 콘텐츠 영역, 패딩, 테두리(border), 마진(margin) 요소로 구성됨
	개발자 도구창( f12 누르고 - 우하단 탭 중 <computed> 탭 선택 ) 에서 그림으로 확인 가능

 

width, height	실제 콘텐츠 영역 크기 지정
rule	width: <px> | <em> | <백분율> | auto(기본값, 콘텐츠의 크기에 따라 자동)
	height: <px> | <em> | <백분율> | auto(기본값, 콘텐츠의 크기에 따라 자동)

 

 

테두리 스타일 지정하기

박스 모델의 값 지정 방향

네 방향의 값 지정 시 방향 순서 : 위 > 우 > 아래 > 좌

 

border-style 속성	테두리 스타일
rule	border-style : none | solid | dotted | double

 

border-width	테두리 두께
ex. css	p { border-width: 2px }
	p { border-width: 10px 5px 5px 10px }

 

border-color

테두리 색상

 

border-radius	박스 모델의 테두리를 둥글게 처리
ex. css	p { border-radius: 20px }
	p { border-radius: 50% }

 

 

여백을 조절하는 속성

margin	현재 요소의 주변의 여백
rule	margin: <크기> | <백분율> | auto

 

margin 속성을 사용해 가운데 정렬하기

배치할 요소의 너빗값이 정해져 있어야 함.

margin-left 와 margin-right 속성 값을 auto 로 지정.

 

마진 중첩 현상

요소를 세로로 배치 시 상위 요소의 마진과 하위 요소의 마진이 겹치면 마진값이 큰쪽으로 겹쳐 처리 됨.

 

padding 속성

콘텐츠와 테두리 사이의 여백. 마진을 지정하는 방법과 같음.

 

 

웹 문서의 레이아웃 만들기

display

요소의 배치 방법을 결정

 

속성 종류	설명
block	인라인 요소를 블록 요소로 바꿈
inline	블록 요소를 인라인 요소로 바꿈
inline-block	인라인 요소와 블록 요소를 모두 가지게 됨. 마진, 패딩 지정 가능.
none	해당 요소를 화면에 표시하지 않음

 

float

요소를 왼쪽이나 오른쪽에 떠 있게 만듦

 

속성 종류	설명
left	해당 요소를 문서의 왼쪽에 배치
right	해당 요소를 문서의 오른쪽에 배치
none	좌우 어느쪽으로도 배치하지 않음

 

clear	float 속성을 무효화 시키는 속성
rule	clear: none | left | right | both (둘다)

 

속성 종류	설명
left	float: left 해제
right	float: right 해제
both	float: left 와 float: right 해제

 

 

웹 요소의 위치 지정하기

left, right, bottom, top

기준 위치와 요소 사이에 얼마나 떨어져 있는지 정함

 

position

웹 문서 안에 요소들을 배치하기 위한 속성

 

속성 종류	설명
static	float: left 해제
relative	float: right 해제
absolute	원하는 위치를 지정해 배치
fixed	지정한 위치에 고정해 배치. 스크롤해도 그대로 남음.