CSS 속성

너비

width

기본값(auto)
1. inline요소는 콘텐츠 크기만큼 자동으로 줄어든다.(크기를 지정할 수 없다) ex)span
2. block요소는 부모 요소의 크기만큼 자동으로 늘어난다. ex)div
단위 : px em vs 등의 단위로 지정

height

기본값 : auto
1. inline요소는 콘텐츠 크기만큼 자동으로 줄어든다.(크기를 지정할 수 없다)
2. block요소는 부모 요소의 크기만큼 자동으로 늘어난다. ex)div
단위 : px em vs 등의 단위로 지정

단위

px : 픽셀
% : 상대적 백분율
em : 요소의 글꼴 크기
rem : 루트 요소(html)의 글꼴 크기
vw : 뷰포트 가로 너비의 백분율
vh : 뷰포트 세로 너비의 백분율

margin (외부 여백)

단위

0 : 외부 여백 없음
auto: 브라우저가 여백을 계산
단위 : px em vw 등 단위로 지정

단축 속성

margin: 10px -->(top bottom left right)
margin: 10px 20px --> (top,bottom) (left,right)
margin: 10px 20px 30px --> (top)(left right)(bottom)
margin: 10px 20px 30px 40px --> top right bottom left

음수값 적용가능

각각의 아이템이 겹쳐진다.(가끔씩 사용한다)

padding (내부 여백)

단위

0: 내부여백 없음
단위: px em vw 등 단위로 지정
% : 부모요소의 가로 너비에 대한 비율로 지정

단축 속성

padding: 10px -->(top bottom left right)
padding: 10px 20px --> (top,bottom) (left,right)
padding: 10px 20px 30px --> (top)(left right)(bottom)
padding: 10px 20px 30px 40px --> top right bottom left

border (테두리)

border

: 선-두께(width) 선-종류(style) 선-색상(color)

border-width 단위 : px em % 등 단위로 지정
border-width: 10px -->(top bottom left right)
border-width: 10px 20px --> (top,bottom) (left,right)
border-width: 10px 20px 30px --> (top)(left right)(bottom)
border-width: 10px 20px 30px 40px --> top right bottom left

border-style 종류

:none: 선이 없음 , solid: 실선(일반 선) , dashed: 파선

border-style: 10px -->(top bottom left right)
border-style: 10px 20px --> (top,bottom) (left,right)
border-style: 10px 20px 30px --> (top)(left right)(bottom)
border-style: 10px 20px 30px 40px --> top right bottom left

border-color

:black 검정색 , 색상: 선의 색상 , transparent: 투명

border-color : 10px -->(top bottom left right)
border-color: 10px 20px --> (top,bottom) (left,right)
border-color: 10px 20px 30px --> (top)(left right)(bottom)
border-color: 10px 20px 30px 40px --> top right bottom left

border-radius (기본값 : 0)

0 : 둥글게 없음
단위 : px em vw 등 단위로 지정

box-sizing

content-box: 요소의 내용(content)으로 크기 계산

border-box: 요소의 내용 + padding + border로 크기

정해진 width 와 height 값 그대로 박스가 만들어진다.
width:100px height: 100px border 10px solid padding:10px
box-sizing : content-box
박스크기는 100px 100px

overflow

요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축속성

단위
visible : 넘친 내용을 그대로 보여줌 (기본값)
hidden: 넘친내용을 잘라냄
auto: 넘친 내용이 있는경우에만 잘라내고 스크롤바 생성

display

block: 상자(레이아웃) 요소
inline: 글자요소
inline-block: 글자 + 상자요소(base = 글자 , 가로세로를 조정할 수 있다.
flex: 플렉스 박스 (1차원 레이아웃)
grid: 그리드 (2차원 레이아웃)
none: 보여짐 특성이 없음, 화면에서 사라짐

opacity (요소 투명도)

1: 불투명
0 ~ 1: 0부터 1사이의 소수점 숫자

글꼴

font - style : 글자의 기울기

normal: 기울기 없음
italic: 이테릭체 (글자가 기울어 진다.)

font - weight :글자의 두께

normal : 400
bold: 700 (두껍게)
100 ~ 900 까지 선택한다.

font - size

기본값: 16px
단위: px em rem 등 단위로 지정

line-height: 한 줄의 높이, 행간과 유사

normal : 브라우저의 기본 정의 사용
숫자: 요소의 글꼴 크기의 배수로 지정
단위: px em rem 등의 단위로 지정

font-family: 글꼴1, "글꼴2"(후보), ...글꼴계열;

글꼴 계열
sans-serif(고딕체)
serif(바탕체 계열)
monospace(고정너비 글꼴 계열)

문자

color

기본값: 검정색
색상: 기타 지정 가능한 색상

text-align

left : 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데 정렬

text-decoration

none: 장식 없음
underline: 밑줄
line-through: 중앙 선

배경

background-color

transparent: 투명함(기본값)
색상: 지정 가능한 색상

backgrount-image

none: 이미지 없음
url("경로"): 이미지 경로

backgrount-repeat

repeat: 이미지를 수직, 수평 반복(기본값)
repeat-x: 이미지를 수평 반복
repeat-y: 이미지 수직 반복
no-repeat: 반복 없음

background-position

방향: top, bottom, left, right, center 방향
단위: px em rem 등 단위로 지정

background-attachment

scroll: 이미지가 요소를 따라서 같이 스크롤 (기본값)
fixed: 이미지가 뷰포트에 고정 스크롤x