- CSS(Cascading Style Sheet) Cascading 의 개념: 정의된 세부적인 정의가 있다면 그걸 사용하고, 정의되어 있는게 없다면 다음 기본으로 지정된 것으로 넘어가는 개념
- Flexbox: box 와 item 들을 자유자재로 사용할 수 있게 해줌! 2가지만 이해하자
① Flexbox는 container(box) 에 적용 될 수 있는 것과 각각의 item 에 적용될 수 속성들이 따로 존재한다.
container 에 적용 할 수 있는 속성들:
- display: display: flex 라고 해야 flex box로 사용 가능!
- flex-direction: 기본값은 row(왼→ 오 로 감), row-reverse(오→왼), column( 위→아래), column-reverse(아래→위)
- flex-wrap: 기본값은 nowrap (아이템들이 많아져도 한 줄 안에 빼곡하게 나옴) wrap (아이템들이 한 줄에 꽉 차게 되면 자동으로 다음 라인으로)
- flex-flow: flex-direction 과 flex-wrap 을 합한 속성. ex) flex-flow: column nowrap;
- justify-content: 기본값은 flex-start, 중심축에서 item 을 배치. flex-end: item의 순서는 유지하고 오른쪽에 배치. space-around: 박스를 둘러싸게 space를 넣어줌. 제일 왼쪽과 오른쪽의 space는 작음. space-evenly: space를 동일 하게 넣어줌. space-between: 왼쪽과 오른쪽은 화면에 딱 맞게 배치하고 중간에만 space 넣음.
- align-items: 반대축에서 item 을 배치
- baseline 사용시: 텍스트가 균등하게 보일 수 있게 해줌
- align-content: 반대축에 item 을 배치함.
item 에 적용할 수 있는 속성들:
- order: HTML 에서 나온 순서를 변경 하고자 할 경우 사용. 잘 사용하진 않음.
- flex-grow: container 를 변경할 때마다 크기가 변함. 기본값은 0.
- flex-shrink: container 가 점점 작아졌을때 어떻게 행동 할 지 결정. 기본값은 0.
- flex-basis: item 들이 공간을 얼마나 차지해야 하는지 좀 더 세부적으로 명시 가능. 기본값은 auto. container 크기가 커지거나 작아질 때, 알아서 다 처리 됨.
- align-self: container 에 지정한 것 이외로, itme 별로 item 정렬 가능.
② flexbox 에는 중심축과 반대축이 존재한다!
<참고>
- color 관련 https://material.io/resources/color/#!/?view.left=0&view.right=0
- flexbox 가이드
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<실습>
jsbin.com 에서 진행!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS DEMO</title>
</head>
<body>
<!-- **div.container>div.item.item${$}*10 이렇게 입력하면 아래처럼 자동으로 생성 됨 -->**
<div class="container">
<div class="itme item1">1</div>
<div class="itme item2">2</div>
<div class="itme item3">3</div>
<div class="itme item4">4</div>
<div class="itme item5">5</div>
<div class="itme item6">6</div>
<div class="itme item7">7</div>
<div class="itme item8">8</div>
<div class="itme item9">9</div>
<div class="itme item10">10</div>
</div>
</body>
</html>
출처: 드림코딩 엘리
https://www.youtube.com/watch?v=7neASrWEFEM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=9
'Front > CSS' 카테고리의 다른 글
| 부트스트랩 정의 및 사용법 (0) | 2022.03.23 |
|---|
