🏃‍♂️What I learned

1. CSS 선택자5

1. 기타 선택자
   
   • :only-child - 요소의 자식이 하나 밖에 없을 때
   • :only-of-type - 지정된 형태와 같은 자식 요소가 하나만 있을 때
   • ',' 여러 선택자 동시 - 쉼표로 연속적으로 지정
   • '.' 요소 내부의 특정 클래스만 선택 - 온점으로 지정
   • ',' 여러 선택자 동시 - 쉼표로 연속적으로 지정

---

2. 선택자 우선순위

• 1 순위 : css속성에 !important;
• 2 순위 : inline-style (태그 내부) 속성
• 3 순위 : id 선택자
• 4 순위 : 클래스 선택자
• 5 순위 : 태그 선택자

---

3. 레이아웃

- 구성 요소를 제한된 공간에 효율적으로 배치하는 것(display속성 활용)

1. block : 화면 수직 분할; width / height 속성 사용 가능
2. inline : 화면 수평 분할; width / height 속성 사용 불가
3. inline-block : 수평분할(inline) + 크기조정(block)
4. none: 실제 값은 존재하지만 화면에는 표시되지 않음
5. flex: 요소의 정렬 방향, 간격 등을 유연하게 처리

1) flexbox의 구성
- flex-container : 정렬이 필요한 요소를 감싸는 요소(부모)
- item : 정렬을 적용할 요소(자식)

2) flexbox의 축 : 중심축, 교차축(반대축)

• flex-direction : 메인축 시작위치 지정(row, column, row-reverse, column-reverse)
• flex-wrap : 한줄배치 혹은 여러줄 배치(nowrap, wrap, wrap-reverse)
• justify-content : 메인축 방향에서 정렬 방법 지정
  (flex-start, flex-end, center)
  (space-around, space-evenly, space-between)
• align-items : 교차축 방향에서 정렬(flex-start, flex-end, center)
• flex-basis : 메인 축 방향의 기본 점유율을 지정

---

4. 여백

1. content 영역 - 요소의 내용 작성(시작태그와 종료태그 사이)
2. padding 영역 - content영역과 border영역 사이
3. border 영역 - 요소의 테두리가 지정되는 영역
                    - content보다 바깥쪽에서 감싸고 있음
4. margin 영역 - 다른 요소와의 간격을 나타내는 영역

---

5. 배치(position)

- position은 요소의 위치를 지정하는 속성

1. position : relative; - 지정된 요소 내부에 기준을 만드는 속성
2. position : absolute; - 기본 요소의 배치 순서를 무시하고 지정된 위치에 요소 배치
3. position : fixed; - 고정된 곳에 요소 배치(e.g. 따라다니는 배너)

내부에 작성되는 요소에 위치 지정시 top, bottom, left, right 속성 사용 가능