CSS 정리 2

정리

border(테두리 선)

border: width style color
border: 4px solid black; - 4픽셀 두께만큼의 검은 선
width - padding, margin과 마찬가지 방향으로 width 설정

style

none - 선없음
solid - 실선
dashed - 파선 등 여러가지로 많음
padding, margin과 마찬가지 방향으로 style 설정
테두리선의 두께가 커질수록 요소의 크기가 늘어남

color

마찬가지로 방향설정
#000, #FFFFFF, rgb(255, 255, 255), rgba(0,0,0,0.5)

border-radius

요소의 모소리를 둥글게 깎음
border-radius 0 10px 0 0 - 왼쪽상단부터 시계방향이므로 오른쪽상당만 깎음

box-sizing

box-sizing: border-box - 요소가 커진다면 다른 요소에 맞춰줌

overflow

overflow: visible - 기본값, 넘침
overflow: hidden - 잘라냄
overflow: sroll - 수평, 수직에 스크롤바 생성
overflow: auto - 수평, 수직 중에 넘친부분만 스크롤 바 생성

display

block - 블록으로 만듬
inline - 글자로 만듬
inline-block -글자 + 블록으로 만듬
flex - 1차원 레이아웃
grid - 2차원 레이아웃
none - 화면에서 사라짐
기타 table, table- row, table-cell 등

opacity

1- 선명
0~1 - 투명 ~ 선명, 0 생략 가능

font

font-style

normal - 기울기 없음
italic - 이텔릭체

font-weight

normal, 400 - 기본두께
bold, 700 - 굵게
100 ~ 900, 100단위 9개

font-size

기본 font-size는 16px
단위 px, em, rem

font-family

고딕체 - sans-serif
font-family: 글꼴1, "글꼴2", ... 글꼴계열;
글꼴1부터 순서대로 사양에 맞다면 사용
띄어쓰기 등 특수문자가 포함된다면 ""이용

line-height

한 줄의 높이 - 줄 사이 간격
line-height: 2;, 200%; - 주로 fon-size 배수, %씀

text

color는 앞에 text가 없음

text-align

left, right, center, justify(양쪽정렬)

text-decoration

none - 없음
underline - 밑줄
overline - 윗줄
line-through - 중앙줄

text-indent

0 - 들여쓰기 없음
단위 - px, em, rem
음수라면 내어쓰기되어 내용이 잘릴수도 있음