CSS Display/Position/Flexbox 정리

안녕하세요. 드림 코딩님의 강의를 보고 요약한 파일입니다. 도움이 되셨다면 좋아요 부탁드려요 ~ㅎㅎ

 

CSS

Position 기본값 : static

relative : 원래 있어야 할 자리에서 변경

absolute : 가장 가까이 있는 상자에서 위치 변경

fixed: 상자에서 벗어나 페이지 상에서 위치 변경

sticky: 원래 자리에 있는데, 스크롤링하면 변하지 않고 붙어있는 애!

• 웹 사이트에서 CSS 기능 사용할 수 있는지 확인하기

Can I use... Support tables for HTML5, CSS3, etc

Don’t forget to code your Dream!

---

HTML 간단하게 만드는 법

div.container>div.item.item${$}*10

• class=”container” 인 div를 만들고, > 그 안에 class=”item item$” 인 div를 10개 만들어주겠다.

100vh

• 100 viewport height (보이는 화면)
• %를 쓰게 되면? 컨테이너가 들어있는 부모의 높이의 100%를 채우겠다라는 뜻인데, html 로 지정해줘야 꽉 찬다.

---

이쁜 색깔 쓰는 사이트

Material Design

---

Flex box 사용법 (드림 코딩)

1. Container 박스에 flex 를 준다. → 10개의 div 박스들이 가로로 정렬됨
2. flex-direction 설정. 기본 값은 row, row-reverse 주면 반대로 되며, Column 으로 주면 세로로 정렬됨. column-reverse도 가능(피라미드 처럼 아래서부터 위로 정렬)

.container {
            background-color: beige;
            height: 100vh;
            display: flex;
            flex-direction: row;
        }

1. flex-wrap: nowrap; (기본값) - 아무리 좁아져도 아이템들이 한줄에 몰려 있음
   • wrap : 좁아지면 자동적으로 다음 라인으로 넘어감
   • wrap-reverse : 거꾸로 wrapping 됨
2. flex-flow: column nowrap; - flex flow는 위 두 가지 아이들을 합한 것
3. justify-content: flex-start, flex-end, space-around, space-evenly, space-between
   1. 중심축에서 아이템들을 어떻게 배치할건지?
   2. end하면 오른쪽에 가서 붙음, start는 왼쪽에!
4. align-items: 반대축에서 아이템들을 어떻게 할건지 결정
   1. center, baseline
5. align-content: 반대축에서 아이템을 지정
   1. space-between; 위아래는 양끝에 붙어있고 가운데에 아이템 한 줄이 들어감
   2. center; 아이템들이 화면 가운데에 모여서 배치됨

아이템에 적용되는 flex box

1. flex-grow: 0; (기본값) 1(배수);
   1. 화면 늘리면 점점 늘어난다.
2. flex-shrink: 0; (기본값) 1, 2, 3;(배수)
3. flex-basis:auto; 60%, 30%, 10% … 커져도 작아져도 비율에 맞춰서 차지한다.
4. align-self: center;

---

flex 연습할 수 있는 유용한 게임

Flexbox Froggy

Don’t forget to code your Dream!

---