0207_TIL

remind

selectors, selectors심화 시험에 잘나옴.

bootstrap 문제가 대다수

grid 시스템 , 카드 배치

rgba => a : 투명도

display

• 화면상의 layout을 제어
• 종류
  • 인라인
    • span , a
  • 블럭
    • div , p , header , ...
  • 인라인-블럭

display : none 과 visibility : hidden 의 차이

visibility : 자리는 차지하고 있지만 보이지 않음

display : none : 자리도 차지하고 있지 않음

박스

content -> padding -> border -> margin

padding : 컨텐츠와 border 사이의 간격

• 이미지와 배경색상은 padding까지

margin : 간격

box-sizing 은 기본 default 가 content-box

​ 따라서 box-sizing 을 border-box로 하면 padding이 바껴도 크기는 똑같음

박스

margin : 0 auto => 박스 가운데 정렬

텍스트

수평정렬

text - align : center

수직 정렬

line - height : height

---

CSS 원칙

• 마진을 자동적으로 부여,

---

float

• 화면 위에서 뜨게 된다. (ex) 신문기사 )

• 모든 요소에 부여를 할 수 있다,

Clearing Float

• Float 는 Normal Flow 에서 벗어나 부동 상태 (떠 있음)
• 따라서 이후 요소에 대하여 float 속성이 적용되지 않도록 Clearing이 필수적

clearfix

• float 요소의 부모로 div
• 부모에게 .clearfix

/* Clearing이 필수적 */
.clearfix::after{
    content : "";
    display : block;
    /* 양 옆에 클리어링 */
    clear: both;
  }


/* Clearing이 필수적 */
.float된 부모클래스::after{
    content : "";
    display : block;
    /* 양 옆에 클리어링 */
    clear: both;
  }

---

Flexbox

CSS Flexible Box Layout

• 영역 내부 안에서 박스들을 배치할 수 있게 됨.

• 행과 열 형태로 아이템들을 배치하는 1차원 레이아웃 모델

• 축

  • main axis(메인 축) => 기준으로 정렬된다.
  • cross axis(교차 축)

• 구성요소

  • Flex Container(부모 요소)
  • Flex Item

Flexbox 구성요소

• Flex Container (부모 요소)
  • 가장 기본적인 모들
  • Flex Item들이 놓여있는 영역
  • display 속성을 flex 혹은 inline-flex로 지정
• Flex Item(자식 요소)
  • 컨테이너에 속해 있는 컨텐츠(박스)

Flex 박스 사용 이유?

1. 수직 정렬
2. 아이템 너비와 높이 혹은 간격을 동일하게 배치

flex - direction

• Main axis 기준 방향 설정
• 역방향인 경우 선언 순서가 시각적으로 다르니 주의

ex) row : 왼쪽에서 오른쪽 column : 아래방향

flex - wrap

• 아이템이 컨테이너를 벗어나는 경우 해당 영역 내에 배치되도록 설정
• 즉, 기본적으로 컨테이너 영역을 벗어나지 않도록 함

justify - content

• Main axis 를 기준으로 공간 배분
  • 1) flex - start 2. flex - end 3. center 4. space - between
    5. space - around 6. space - evenly

align - content

• Cross axis 를 기준으로 공간 배분
  • flex - start 2. flex - end 3. center 4. space - between
    5. space - around 6. space - evenly

flex - start -> 컨테이너를 왼쪽에서 부터 오른쪽으로 이동, 남은 영역은 채움 : 아이템을 axis 시작점으로

flex - end -> 남은 영역을 먼저 채운 뒤, 컨테이너를 채운다. : 아이템을 axis 끝쪽으로

center -> 가운데 컨테이너를 두고, 양옆에 남은 영역을 채울 수 있다. : 아이템들을 axis 중앙으로

space - around 와 space - evenly의 차이점

아이템을 둘러싼 영역을 균일하게 분배 (반반 나눠서)

전체 영역에서 아이템 간 간격을 균일하게 분배

Flex 속성 : align - items

• 모든 아이템을 Cross axis를 기준으로 정렬
  • 1. stretch 2.flex-start 3.flex-end 4.center 5.baseline

Flex 속성 : align - self

• 개별 아이템 을 Cross axis를 기준으로 정렬 (! 컨테이너 정렬이 아닌 개별 아이템에 정렬)
  • 1) stretch(컨테이너를 가득) 2. flex-start(위) 3. flex-end(아래)

Flex에 적용하는 속성

• 기타 속성
  • flex -grow : 남은 영역을 아이템에 분배
  • order : 배치 순서

---

emet

div > p

div의 자식요소로 p태그를 만든다.

div.box > div * 3 #hello

box라는 클래스로 div 클래스를 만든뒤 클래스가 hello인 div 태그를 3개 만든다.

- `>`  태그를 만들고 들여쓰기
- `*n` 반복
- `+` 줄바꿈 + 다음 태그 추가
- `.` class 지정
- `#` id 지정
- `{content}` 내용 입력

---

Bootstrap

CDN

• 컨텐츠 등을 효율적으로 전달하기 위해 여러 노드에가진 네트워크에 데이터를 제공하는 시스템.
  • 가까운 서버를 통해 빠르게 전달 가능

spacing

.mt-1 ?

-> margin - top : 0.25rem !important

m-2 -> 0.5rem (8px) m3 -> 1rem(16px)

.mx-0 ?

-> margin - right : 0

​ margin - left : 0

.mx -auto => 수평 중앙 정렬

py-0

-> padding - top: 0

​ padding - bottom : 0

spacing

---

반응형 웹 (Responsive Web)

Grid system (web design)

• 요소들의 디자인과 배치에 도움을 주는 시스템

• 기본요소

  • column : 실제 컨텐츠 포함
  • gutter : 컬럼과 컬럼 사이의 공간
  • container : column들을 담고 있는 공간

• container , row ,column으로 컨텐츠를 배치하고 정렬

• 반드기 기억

  • 12개의 column

    • 12개로 이루어진 이유? 약수가 많기 때문

    • 12개를 넘어가면 ? 넘쳐서 다음행에 붙게 된다.

      Container
      
      - row ( 행 ) 
      
        - col - " [breakpoint] " - "[숫자]"
      
          ​				sm
      
          ​				md
      
          ​				lg

• 6개의 breakpoint

---