0803 TIL CSS

CSS

🙆‍♀️ 다양한 CSS 셀렉터 규칙을 이해할 수 있다.

🙆‍♀️ 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.

div>p div 바로 밑의 p
div p div 보다 n개밑의 p

🙆‍♀️ 레이아웃을 위한 HTML을 만들 수 있다.

🙆‍♀️ Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)

방향: flex-direction
얼마나 늘릴 것인가?: flex-grow
얼마만큼의 크기를 갖는가?: flex-basis
수평 정렬: justify-content
수직 정렬: align-items

하나의 html태그에 id와 class 둘다 줄 수 있다.
그럴경우 class와 id 순서를 바꿔서 적어도 된다.

• 인접 형제 셀렉터(Adjacent Sibling Combinator)
  셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택한다. A와 B 사이에 다른 요소가 존재하면 선택되지 않는다.

셀렉터A + 셀렉터B

• 일반 형제 셀렉터(General Sibling Combinator)
  셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다.

셀렉터A ~ 셀렉터B

#container .mx-auto {…} container 안의 mx-auto
#container.mx-auto {…} container이면서 동시에 mx-auto

• p:first-of-type {…}
  p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택합니다. (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택합니다)

안쪽 박스의 수직/수평을 정하는 속성이름(나중에 자주 사용합니다)
align items 수직정렬
justify content 수평정렬

그외

pinterest에서 wireframe web 검색해보면 reference들을 볼 수 있다.