image.png

개요

사용자 입력을 받아 분할된 div 에 변화를 주어보자.

배운 점

  1. CSS : flex layout
  • flex layout 은 Items 과 이를 감싸고 있는 Container 로 구성되어 있습니다.
  • Itmes 비율을 조절하기 위해 flex: 증가너비 감소너비 기본너비 문구를 사용할 수 있습니다. 각 너비에 들어가는 값은 % 를 이용할 수 있으며, 더 자세한 자료는 참고자료의 링크를 확인하시기 바랍니다.
  1. CSS selector
  • .panel>*
    • panel 클래스의 (.) 자식 속성으로 있는 (>) 모든 요소를 (*) 선택 합니다.
  • .panel>*:first-child
    • panel 클래스의 (.) 자식 속성으로 있는 (>) 모든 요소의 (*) 첫번째 것을 (first-child)선택 합니다.
  • .panel.open-active>*:first-child
    • panel 클래스의 자식 속성인 open-active 의 (.open-active) 자식 속성으로 있는 (>) 모든 요소의 (*) 첫번째 것을 (first-child)선택 합니다.

추가적으로 찾아볼 것

  • layout 과 selector 추가 확인.

참고자료

CSS : flex layout 설명