[웹 프로그래밍 기초] CSS 속성

1. 박스 속성

웹 페이지의 레이아웃을 구성할 때 중요한 요소

속성이름	설명
margin 속성	테두리와 다른 태그 사이의 테두리 바깥쪽 여백
border 속성	테두리
padding 속성	테두리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용
width 속성	글자와 감싸는 영역의 가로 크기
height 속성	글자를 감싸는 영역의 세로 크기

박스 여백 부분 조정

속성	설명
margin-left	왼쪽 여백
margin-right	오른쪽 여백
margin-top	위쪽 여백
margin-bottom	아래쪽 여백
padding-left	왼쪽 패딩
padding-right	오른쪽 패딩
padding-top	위쪽 패딩
padding-bottom	아래쪽 패딩

1. 네 방향 속성 지정하기 : 순서대로 크기 단위 띄어쓰기

		상  우  하  좌 (시계 방향)
margin: 0 30px 0 30px

2. 두 방향씩 속성 지정하기 : 네 방향을 2개씩 묶어 지정

		위+아래 , 왼쪽 오른쪽 
margin: 0 30px
padding: 0 30px

박스 테두리
border-width: 테두리 두께(크기 단위 or 키워드)
border-style: 테두리 형태(키워드)
border-color: 테두리 색상
border-radius: 둥근 테두리 만들기

				좌측 위,  우측 위, 우측 아래, 좌측 아래 ( 시계 방향)
border-radius: 50px 40px 20px 10px 

2. 가시 속성

• 태그가 화면에 보이는 방식을 지정

키워드	설명
none	화면에 보이지 않음
block	블록 박스 형식으로 지정
inline	인라인 박스 형식으로 지정
inlline-block	블록과 인라인의 중간 형태로 지정

inline 방식)

block방식)

inline,block,inline-block 차이

속성		줄바꿈	너비(width),높이(height) 지정	margin 여백 지정
display:inline	요소를 inline요소처럼표시	x 일괄로 표시	불가능	좌우 여백만 적용
display:block	요소를 block요소처럼 표시	o 자동 줄 바꿈	가능	가능
display:inline-block	요소를 inline속성으로, 내부는 block 속성으로 표시	x 일렬로 배치(block이 inline처럼 옆으로 늘어섬)	가능	가능

3. 배경 속성

주로 사용하는 배경 속성

속성	설명
background-image	배경 이미지 삽입
background-size	배경 이미지의 크기 지정
background-repeat	배경 이미지의 반복 형태 지정
background-attachment	배경 이미지의 부착 형태 지정
background-position	배경 이미지의 위치 지정
background	한번에 모든 배경 속성 입력

body{
	background-image:url('backphoto.png');
    background-size:100%
}

배경 이미지 반복과 부착 형태,위치

background-repeat 속성
배경 이미지의 반복 형태 지정

• repeat-x : x축 방향으로만 이미지 반복
• repeat-y: y축 방향으로만 이미지 반복

background-attachment 속성

• 배경 이미지를 화면에 고정
• fixed, inherit, initial, local, scroll