기초 CSS

September 28, 2022 #CSS  

복습 겸 드림코딩 강의를 듣고 정리하면 좋을 것같은 CSS 관련 정보를 블로그에 남겨두기로 했다.

🎯 Position

기본값 static

• Relative : 원래 있던 위치가 기준

• Absolute : 가장 가까이에 위치한 조상이 기준 / 제일 바깥에 있는 박스가 기준

  ( 부모 박스에 position : relative 줄 것! )

  It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

• Fixed : 브라우저가 기준
• Sticky : 스크롤 해도 지정한 위치 그대로

📌 Flex

Float의 원래 목적은 박스와 글을 배치하는 것 (마치 신문처럼)
Flex로 박스 배치할 수 있으므로 박스 배치는 Flex 사용

단점 : 새로 나온 기능 호환 안되는 경우 많다. 확인하면서 사용할 것.

Flex-flow : direction(row) wrap(nowrap);

• Flex 순서 변경 속성

  -reverse : wrap-reverse, row-reverse, column-reverse...
  justify-content : flex-end, center, space-around... 순서 유지, 위치 변경
  align-items : center (수직으로 센터), baseline (콘텐츠 내용이 수직 센터 되게 정렬)
  align-contents : justify-content 와 비슷하지만 수직으로 적용
  

➕ 참고 (b/c 잘 사용되지 않음)

부모에 flex
자식들은 order 기능으로 순서 변경 가능
ex) order: 1;

박스의 너비 크기 늘어나는/줄어드는 비율 설정

1. Flex-grow : 0; 기본 값 <-> Flex-shrink ```

1

2

3

``` ``` @charset "utf-8"; .wrap { display: flex; } .wrap div { width: 100px; height: 100px; background-color: skyblue; border: 1px solid #000; } div:nth-child(1) { flex-grow: 1; } ``` 👇 1의 너비만 늘어남  ``` div:nth-child(1) { flex-grow: 2; } div:nth-child(2) { flex-grow: 1; } div:nth-child(3) { flex-grow: 1; } ``` 👇 2, 3의 너비도 늘어나지만 1의 너비는 2,3 보다 더 늘어남  2. flex-basis : flex-grow+shrink 동시에 적용 가능
아이템들이 공간을 얼마나 차지하는지 세부적으로 설정 (%로 설정)
``` div:nth-child(1) { flex-basis: 60%; } div:nth-child(2) { flex-basis: 20%; } div:nth-child(3) { flex-basis: 20%; } ```

독자적으로 아이템 위치 이동

align-self : center;

  .wrap {
      display: flex;
      height: 300px;
  }
  .wrap div {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      border: 1px solid #000;
  }
  div:nth-child(1) {
      align-self: center;
  }

✔️ 선택자

[] : 속성 선택자

• ^= : 이걸로 시작하는 걸 선택
  ( ex. a[href^=”https”] )
  

• $= : 이게 끝에 있는 걸 선택
  ( ex. a[href$=”com”] )
  

With 드림코딩