@import url("./box.css"); //css에서 css를 임포트. 직렬 연결.(link방식은 병렬방식)
일치 선택자 - span.orange - span태그의 orange클래스 선택
자식 선택자 - ul > .orange - ul태그의 자식요소 선택
하위(후손) 선택자 - div .orange - div태그의 하위요소 orange클래스 선택
인접 형제 선택자 - .orange + li - orange클래스의 다음 형제 li 중 "하나만 선택"
일반 형제 선택자 - .orange ~ li - orange클래스의 다음 형제 li "모두를 선택"
가상 클래스 선택자1 - .fruits span:first-child - 형제 요소 중 첫째라면 선택
가상 클래스 선택자2 - .fruits h3:last-child - 형제 요소 중 막내라면 선택
가상 클래스 선택자3 - .fruits :nth-child(2) , fruits :nth-child(2n), fruits :nth-child(2n+1), .fruits :nth-child(n+2) - 형제 요소 중(n)째라면 선택
부정 선택자 - .fruits *:not(span) - 선택자 XYZ가 아닌 ABC요소 선택
가상 요소 선택자 - .box::before { content: "앞!"; } - 선택자 ABC 요소 내부 앞에 내용(content)을 삽입
- .box::after { content: "뒤!"; }
속성 선택자(Attribute) - [type], [type="password"]
-
상속되는 CSS속성들 - font-style, font-weight, font-size, line-height, font-family, color, text-align
-
우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법.
- 점수가 높은 선언이 우선함!
- 점수가 같으면, 가장 마지막에 해석된 선언이 우선함!
!important > 인라인 선언 > ID선택자 > Class선택자 > 태그 선택자 > 전체 선택자
-
box-sizing
content-box - 요소의 내용(content)으로 크기 계산
border-box - 요소의 내용 + padding + border로 크기 계산 -
overflow - 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
visible, hidden, scroll(항상 x축, y축), auto -
opacity - 요소 투명도 - 1은 불투명, 0~1사이 지정.
-
font-style - 글자의 기울기
-
font-weight - 글자의 두께 - 100~900(normal-400, bold-700)
-
font-size - 글자의 크기 - 16px(기본값)
-
line-height - 한 줄의 높이, 행간과 유사, 배수로 지정 가능. - line-height: 2;
-
font-family - 글꼴 지정
-
color - 글자의 색상
-
text-align - 문자의 정렬 방식 - left, right, center
-
text-decoration - 문자의 선 - none, underline(밑줄), line-through(중앙선)
-
text-indent - 문자 첫 줄의 들여쓰기 - 양수(들여쓰기), 음수(내어쓰기)
-
개발자도구에서 태그를 클릭해서 open in new tab을 클릭해서 사진 url을 복사.
배경
- background-color - 요소의 배경 색상
- background-image - 요소의 배경 이미지 삽입 - none, url("경로")
- background-repeat - 요소의 배경 이미지 반복 - repeat, repeat-x, repeat-y, no-repeat
- background-position - 방향(top, bottom, left, right, center), 단위(px, em, rem)
- background-size - 요소의 배경 이미지 크기 - auto, 단위, cover(더 넓은 범위에 맞춤), contain(더 짧은 범위에 맞춤)
- background-attachment - 요소의 배경 이미지 스크롤 특성 - scroll, fixed
배치
- position - 요소의 위치 지정 기준 - static, relative, absolute, fixed + (top, bottom, left, right)
- z-index - 요소의 쌓임 정도를 지정 - auto, 숫자
flex
- Flex Container(부모), Flex Items(자식)
Flex Container의 속성
- "display" - "flex"(블록 요소처럼), inline-flex(인라인 요소처럼)
- flex-direction - 주(수평) 축을 설정 - row(좌=>우), row-reverse(우=>좌)
- "flex-wrap" - Flex Items 묶음(줄바꿈) 여부 - nowrap(줄바꿈 없음), "wrap"(여러 줄로 묶음)
- "justify-content" - 주 축의 정렬 방법 - flex-start(기본값), flex-end, center
- "align-content" - 교차(수직) 축의 여러 줄 정렬 방법(2줄 이상일 때 적용가능) - stretch(기본값), "flex-start", flex-end, "center"
- "align-items" - 교차(수직) 축의 "한 줄" 정렬 방법 - stretch(기본값), flex-start, flex-end, center
Flex Items의 속성
- order - 0(순서 없음), 숫자(숫자가 작을 수록 먼저)
- flex-grow - Flex Item의 증가 너비 비율 - 0(증가 비율 없음), 숫자(증가 비율)
- flex-shrink - Flex Item의 감소 너비 비율 - 1, 숫자
- flex-basis - Flex Item의 공간 배분 전 기본 너비 - auto, 단위
전환
transition
- 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성. transition: 속성명 지속시간(필수속성) 타이밍함수 대기시간;
- transition-property - all, 속성이름
- transition-duration - 전환 효과의 지속시간을 지정
- transition-timing-function - 전환 효과의 타이밍 함수를 지정
