정리
선언방식
내장
head에 style사용 - 웬만하면 따로 css파일 만들자
링크 - link로 외부 css문서를 가져오는 방식
인라인 - 선택자없이 요소 style속성에 직접 작성
우선순위가 매우 높아, 유지보수에 좋지않음
@import - port url로 연결된 css파일에 따른 css파일을 연결
기본 선택자
,* - 모든 요소 선택 (,은 아님)
이름 - 해당 이름요소 선택
.class - .class속성값 선택
#id - #id속성값 선택
복합 선택자
ex)
span.orange - 동시에 만족하는 요소 선택
ul > .orange - 선택자의 자식 요소 선택
div .orange - 선택자의 후손(하위) 요소 선택
.orange + li - 선택자의 형제 바로다음 요소 하나만 선택
.orange ~ li - 선택자의 형제 바로다음 요소 모두를 선택
가상 클래스 선택자
ex)
:hover - 마우스를 올리면 동작함(웬만하면 js로 처리)
:active - 마우스를 클릭하는 동안 동작
:focus - 포커스가 되면 동작, 단 요소가 정해져있음, 안되는 요소에는 tabindex="-1"같이 해야함
input, a, button, label, select 등
:first-child - 형제요소 중 첫째라면 선택
:last-child - 형제요소 중 막내라면 선택
:nth-child(숫자) - 형제요소 중 (숫자)번째라면 선택
:nth-child(n 수식) - 형제요소 중 (n 수식)번째라면 선택
*:not(span) - 태그 span이 아닌 요소 선택
.box::before { content: "내용";}- class box에 내부 앞에 content 삽입
.box::after { content: "내용";}- class box에 내부 뒤에 content 삽입
속성 선택자
ex)
[type="password"] - type이 password인 요소 선택
선택자 우선순위
ex)
점수가 같다면 마지막 선언이 우선
!important - 무한대
인라인 style - 1000점
id # - 100점
class . - 10점
태그 - 1점
,* - 0점
body - x
너비
auto - 인라인, 블록의 기준이 다름
max, min width나 height는 부모 레이아웃을 넘어갈 수 있음
단위
ex)
50% - 부모의 50% 비율
20em - font size가 1em이라고 가정
20rem - 루트의 font size이용
50vw, vh - 화면 100기준으로, 절반 50만큼만 이용
margin(외부 여백)
기본은 모든방향 지정, 방향지정 가능
띄어쓰기로 방향구분, 음수를 넣는다면 겹쳐짐
margin: 10px 20px; - 상하 10px, 좌우 20px
margin: 10px 20px 30px; - 상 10px, 좌우 20px, 하 30px
margin: 10px 20px 30px 40px; - 상 10px, 우 20px, 하 30px, 좌 40px
padding(내부 여백)
margin과 마찬가지로 방향설정
여백이 추가된만큼 요소의 크기가 늘어남
