css 용어설명 1탄

항상 헷갈리는 css 용어 정리

 

박스모델

영역	설명	관련 속성
콘텐츠 영역	요소 내에 포함된 콘텐츠를 표시하는 영역	width, heigth
안쪽 여백	테두리 안에서 콘텐츠 주변을 감싸는 여백	padding
경계선(테두리)	콘텐츠와 안쪽 여백을 둘러싸는 테두리	border
바깥쪽 여백	테두리 바깥에서 요소를 감싸는 여백	margin

테두리 스타일

속성명	용도
border-width	테두리의 두께를 지정
border-style	점선, 실선, 겹선 등으로 테두리의 모양을 지정
border-color	테두리의 색상을 지정
border	테두리의 두께, 모양, 색상 등을 한번에 지정

여백

개수	설명	예
1	여백의 모든 면에 동일한 값을 지정	margins : 10px;
2	위,오른쪽순서대로 각각을 따로 지정	margins : 10px 10px;
3	위,오른쪽,아래순서대로 각각을 따로 지정	margins :  10px 10px 10px;
4	위,오른쪽,아래,왼쪽 순서대로 각각을 따로 지정	margins :  10px 10px 10px 10px;

background

접미사	설명	속성값 유형
-color	요소의 배경 색상 지정	색상
-clip	요소 내 배경의 적용 범위	별도의 키워드
-image	요소의 배경 이미지 지정	이미지 url
-origin	요소 내 배경의 시작 위치	별도의 키워드
-size	배경 이미지의 크기	수치와 단위
-position	배경 이미지의 위치	수치와 단위
-repeat	배경 이미지의 반복 패턴	별도의 키워드