CSS 독학

CSS 스타일 클래스 설정 시 클래스 이름 앞에 .을 붙어야함 

ex) .AB {}

 

font-family: 글꼴

font-style: 글씨체

font-size: 글자 크기

font-weight: 글자 굵기

 

※ 다양한 글꼴 사용을 위해 구글 폰트(https://fonts.google.com/) 이용 방법

1. 사이트 접속 후 마음에 드는 글씨체 선택

2. 오른쪽 @import 클릭 후 코드 복사 -> 붙여넣기

 

글자 색깔 설정 태그 옆의 정사각형 아이콘에 마우스 포인터를 올리면 색상표에 따른 디테일한 색상 설정 가능

 

margin: 바깥 여백

padding : 테두리와 내용 사이의 여백

-> (시계방향으로 위, 오른, 아래, 왼) -> (위, 양옆, 아래) -> (위아래, 양옆) -> (모든 방향)

 

text-align: 글자 정렬

text-shadow: 글자 그림자 설정(가로, 세로, 번짐 정도, 색상 설정)

line-height: 줄 간격

/*  */ : 주석(메모)

letter-spacing: 글자 간격

text-transform: capitalize(첫 글자 대문자), uppercase(전체 대문자), lowercase(전체 소문자)

list-style-type: 순서 목록 번호 스타일 지정

list-style-image: 순서 없는 목록 불릿 이미지 삽입

list-style-position: 목록 들여쓰기(inside: 들여쓰기, outside: 기본값)

 

caption-side: 캡션 위치 설정 (top, bottom)

border-spacing: 셀 사이 여백 설정(수평거리, 수직거리)

border-collapse: 셀 합추기(collapse: 합추기, seperate: 기본값)

 

스타일 우선 적용 순위

!important -> 인라인 (<style> </style> 태그 이용) -> id -> class -> 타입

 

* {} : 전체 설정

p {} : 특정 태그 설정

.ab {} : 클래스 설정

#contain : id 설정

h1, h2 : 그룹 설정

 

글자 크기 1em = 16px, 12pt

em - 모바일 

px - 픽셀

pt - 포인트