코드스테이츠 중급

Achievement Goals

• 다양한 CSS 셀렉터 규칙을 이해할 수 있다.
  • 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.
    • 자식 셀렉터 : div > p { }.  <==> 후손 셀렉터는 한 단계 뛰어서 후손들을 선택한다 방법은 div li. (한 칸 띄워야 함)
    • 레이아웃을 위한 HTML을 만들 수 있다.

잊지 말아야할 것 :  우리가 어떤 레이아웃 <div>를 만들었을 때 크기는 margin과 padding을 포함하지 않기 때문에 오차가 생긴다 그러므로 이것을 고려한 박스 크기를 만드는 것이 중요!!. 방법은?

{

   .box-sizing : border box

}

• Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)
  • 방향: flex-direction  기준점을 만들어 자식 태그의 방향을 정한다.
  • 얼마나 늘릴 것인가?: flex-grow 
    • 1. 부모 박스에 flex를 준 후 2. 자식 박스 특정한 item의 크기를 비율로 조정하고 싶을 때 flex 2를 준다고 하자.(item 3개 동일한 크기) 3. 그러면 특정 item은 2/4 의 크기를 갖고 나머지가 2를 나눠서 1씩 나눠갖게 된다.
  • 얼마만큼의 크기를 갖는가?: flex-basis
  • 수평 정렬: justify-content
  • 수직 정렬: align-items

 

 

 

 

 

 

 

 

Check Point 몰랐던 것