#
은id
를 선택할 때 사용한다..
은class
를 선택할 때 사용한다.
💦 절대 단위 : px, pt 등
💦 상대 단위 : rem, %, em, ch, vw, vh 등
Margin(바깥 여백) ➡ Border(테두리) ➡ Padding(안쪽 여백) ➡ Content(콘텐트)
혼란을 방지하기 위해 border-box를 사용하기로 약속했다고 한다. 아래처럼 설정해주면 된다.* { box-size: border-box; }
셀렉터 :
h1 { } , div { }
전체 셀렉터 :* { }
Tag 셀렉터 :section, h1 { }
ID 셀렉터 :#only { }
class 셀렉터 :.widget { } , .center { }
attribute 셀렉터 :a[href] { }
후손 셀렉터 :header h1 { }
자식 셀렉터 :header > p { }
인접 형제 셀렉터 :section + p { }
형제 셀렉터 :section ~ p { }
가상 클래스 :a:link { }
요소 상태 셀렉터 :input:checked + span { }
부정 셀렉터 :input:not([type="password"]) { }
정합성 확인 셀렉터 :input[type="text"]:valid { }
구조 가상 클래스 셀렉터 (암기x)
p:first-child { }
ul > li:last-child { }
section > p:nth-child(2n+1) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
*
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
자식 셀렉터는 한 단계 아래의 요소들을 가리키며
부모 > 자식 { }
의 형식으로 나타낸다. 후손 셀렉터는 자식을 포함한 모든 하위 요소들을 가리키며,부모 후손 { }
의 형식으로 나타낸다.
Yes ! 💨
!enter
로 기본 레이아웃을 만들 수 있다.
Flexbox
display: flex
부모 박스 요소에 적용한다. 자식 박스의 방향과 크기를 결정할 수 있다. 기본 설정은 왼쪽부터 차례대로 배치된다. 이후 자식 박스에flex: <grow> <shrink> <basis>
순서로 구체적인 값을 설정한다. 기본 값은flex: 0 1 auto
이다.flex-direction
: 방향
기본 값은 row인 수직 분할이다.flex-direction: column
으로 수평 분할로 설정할 수 있다.flex-grow
: 얼마나 늘릴 것인가?
단위가 아닌 비율에 따라 결정된다. 0보다 큰 값을 동일하게 가지는 경우, 각 박스의 길이는 동일해진다.flex-basis
: 얼마만큼의 크기를 갖는가?
박스가 늘어나거나 줄어들기 전에 가지는 기본 크기이다. 따라서 flex-grow의 값이 0일 때만 유지된다.
콘텐츠 정렬 방법
축(axis)에는 두 가지 종류가 있다.
main axis
는 flex-direction의 값에 의해 결정된다. 값이 row일 경우 가로축을 의미한다.cross axis
는 main axis와 수직을 이루는 방향축을 의미한다. 이를 기준으로 하는 두 가지 정렬 방식이 있다.
- 수평 정렬:
justify-content
(main axis 기준)
flex-start, flex-end, center, space-between- 수직 정렬:
align-items
(cross axis 기준)
flex-start, flex-end, center, stretch
🔰 CSS를 학습할 수 있는 게임이다 !
https://flukeout.github.io/
https://flexboxfroggy.com/#ko
https://cssgridgarden.com/#ko
http://www.flexboxdefense.com/
맨 땅에 헤딩이었지만 생각보다 재미있었다. 내일도 재밌겠지~~~⁉