[SEB_FE_44] CSS(2) - CSS 활용

오늘 배운 주제

• CSS 활용

오늘 배운 내용

• display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
• flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정한다 기본값으로 가로정렬
• justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다
• align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다
• grow(팽창 지수) 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, shrink(수축 지수) 는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지, basis(기본 크기) 는 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

오늘의 과제

* {
    box-sizing: border-box;
    padding: 10px;
    margin: 1px;
  }
  
  .container {
    display: flex;
    height: 500px;
    width: 800px;
  }
  
  .box {
    border: 2px solid red;
    display: flex;
    flex-direction: column;
  }
  
  .first {
    width: 15%
  }
  
  .second {
    width: 30%
  }
  
  .third {
    width: 65%
  }
  
  .icon {
    border: 0.5px solid orange;
  }
  
  .area1 {
    border: 0.5px solid blue;
    height: 40%
  }
  .area2 {
    border: 0.5px solid blue;
    height: 80%
  }
  
  .target {
    height: 20%
  }

결과물