CSS_basic3

2 minute read

본 내용은 Dream Coding Academy의 강의 내용입니다 Go to Dream Coding

CSS_Basic3

#1 의미 정의, 선택자(selectors),스타일링
#2 헷갈리는 컨셉
#3 CSS 꽃: Flex box

실습 HTML /CSS (container 속성)

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <div class="container">
          <div class="item item1">1</div>
          <div class="item item2">2</div>
          <div class="item item3">3</div>
          <div class="item item4">4</div>
          <div class="item item5">5</div>
          <div class="item item6">6</div>
          <div class="item item7">7</div>
          <div class="item item8">8</div>
          <div class="item item9">9</div>
          <div class="item item10">10</div>
      </div>
        
  </body>
  </html>

  .container {
      background: beige;
      height: 100vh;
      //100%인 경우 해당 selector 부모의 높이를 100% 채움
      //100vh view height : 보이는 페이지 전체높이 (채우고싶은만큼 숫자 조절)
      display: flex; //flex 적용
        
      flex-direction: row; 
      //default 값은row(왼->오른)
      //row-reverse(오른->왼), 기본축은 가로축 
      //column 기본축 세로축 (위->아래)
      //column-reverse(아래->위)
        
      flex-wrap: nowrap; 
      //default값 줄여도 한줄에 붙어있음
      //wrap적용시 크기에 따라 줄이 바뀜 (reverse존재)
        
      //위의 두 내용을 한번에 작성 가능
      //flex-flow: column nowrap;

      //main axis에서 아이템을 어떻게 배치할지 적용하는 속성
      justify-content: flex-start; 
      //아이템들을 어떻게 배치할지 결정
      //flex-end 오른쪽으로 배치, 이래쪽으로 배치
      //space-around 자동으로 아이템 양쪽으로 공간만듦
      //space-evenly 일정간격을 띄움
      //space-between 양끝은 끝에 맞추고 나머지만 일정간격

      //cross axis에서 아이템을 어떻게 배치할지 적용하는 속성
      align-items: center;
      //baseline; item1의 text 위치에 맞게 나머지 item도 맞춤
      align-content: space-between;
      //justify-content의 속성값 사용가능
  }

  .item {
      width: 40px;
      height: 40px;
      border: 1px solid black;
  }

  .item1 {
      background: #ef9a9a;
  }
    
  .item2 {
      background: #f48fb1;
      padding: 20px;
  }

  .item3 {
      background: #ce93d8;
  }

  .item4 {
      background: #b39ddb;
  }

  .item5 {
      background: #90caf9;
  }

  .item6 {
      background: #a5d6a7;
  }

  .item7 {
      background: #e6ee9c;
  }

  .item8 {
      background: #fff59d;
  }

  .item9 {
      background: #ffcc80;
  }

  .item10 {
      background: #ffab91;
  }

  //color tool (material UI)에서 색깔 참고 가능

실습 HTML /CSS (item 속성)
```
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <div class="container">
          <div class="item item1">1</div>
          <div class="item item2">2</div>
          <div class="item item3">3</div>
      </div>
        
  </body>
  </html>
```
```CSS .container { background: beige; padding-top: 100px; height: 100vh; display: flex; }

.item { width: 40px; height: 40px; border: 1px solid black; }

.item1 { background: #ef9a9a; //order: 2; //default: 0 잘사용 안함 flex-grow:2; //default: 0 인 경우 고유사이즈 유지 (창 크기늘릴 경우, 상대적인 값으로 설정) flex-shrink:2; //flex-grow와 반대 창 크기를 줄일 경우
```
   //아이템들이 공간을 얼마나 차지해야하는지 세부적 조절
  flex-basis: 60%; //default: auto 인경우 shrink,grow를 따름 

  //아이템별로 아이템 정렬(container설정을 벗어나서 한개만 조절가능)
  align-self: center;
```
}

.item2 { background: #f48fb1; //order: 1; flex-grow:1; flex-shrink:1; //flex-basis: 30%; }

.item3 { background: #ce93d8; //order: 3; flex-grow:1; flex-shrink:1; //flex-basis: 10%; }

```

CSS 꽃: Flex box
- flot: 이미지와 텍스트의 배치
  - float: left (왼쪽정렬)
  - float: center (가운데 정렬)
  - float: right (오른쪽 정렬)
- Flex box는 바깥쪽의 Container와 안쪽의 item의 속성을 다르게 적용
- container 속성
  - display
  - flex-direction
  - flex-wrap
  - flex-flow
  - justify-content
  - align-items
  - align-content
- item 속성
  - order
  - flex-grow
  - flex-shrink
  - flex
  - align-self
- axis 개념 : 중심축이 수직과 수평 왔다 갔다 한다
  - main axis: 현재 설정된 기준 축
  - cross axis: 현재 설정된 기준 축의 반대 축
- 참고사이트 e.g.flexbox
- game: flexbox froggy

Twitter Facebook LinkedIn

Lee Ji Yun

CSS_basic3

본 내용은 Dream Coding Academy의 강의 내용입니다 Go to Dream Coding

CSS_Basic3

You May Also Enjoy

JS_basic13_(async_await)

JS_basic12_(Promise)

JS_basic11_(Callback)

JS_basic9_(Array APIs)