[멋쟁이 사자처럼 프론트엔드 스쿨] 10일차 TIL - float, posititon, flex, order

🍰 CSS 진도를 나갔고 첫 과제를 했다. 총 11시간 정도 걸린 것 같다... 내 이해력 어떡하니... 과제하면서 울고 싶었다. 앞으로 나올 숙제 중 가장 쉬운 걸 텐데.

뭘 어째 연습해야지

🍴가상 요소(Pseudo-elements)

• 선택자에 추가하는 키워드
• 선택한 요소의 일부분에만 스타일 입히기 가능

::before

• 선택한 요소의 첫 번째 자식 요소로 삽입됨
• 선택한 요소의 시작 부분에 콘텐츠 추가

::after

• 선택한 요소의 마지막 자식 요소로 삽입
• 선택한 요소의 끝부분에 콘텐츠 추가

🍴 box-sizing

• 박스 모델에서 요소의 크기 계산 방법 결정하는 속성
• 기본 - content + padding + border + margin
• box-sizing 속성에 따라 어떤 부분 포함하는 지 결정

 box-sizing: content-box;

• box-sizing의 기본값
• 요소의 크기를 콘텐츠 영역의 크기로만 계산
• 패딩, 테두리, 여백은 요소의 크기에 추가

.box {width: 350px; border: 10px solid black;}의 너비는 370px

box-sizing: border-box;

• 콘텐츠 영역~테두리 영역까지의 영역 - 패딩, 테두리가 요소 크기에 포함

.box {width: 350px; border: 10px solid black;}의 너비는 350px

🍴 flex

justify-content(main axis - flex-direction이 지정한 방향과 수평)

• flex-container → main-axis, grid conainer → inline축을 기준으로 어떻게 정렬? 정의.
• start : 축의 시작 부분 정렬
• center : 축의 중심 정렬
• space-between : 첫 번째 항목과 마지막 항목은 각각 시작점과 끝 점, 중앙 항목들은 같은 간격으로 배치
• space-around : 각 항목은 양쪽 여백의 절만 만큼 나누어 가짐
• space-evenly : 각 항목은 서로 동일한 여백 가짐

align-items(cross axis - 주축에 수직하는 축)

• start
• center
• end
• baseline : 시작점과 글자 기준선이 가장 먼 플렉스 항목을 시작점에 배치

🍴 order

• 컨테이너 아이템 정렬 순서는 오름차순 order 값, 음수도 가능
• 같은 값 - 소스 코드 순서대로 정렬

🍴 float - 요소를 떠 있게 함

• normal flow 벗어나서 화면에 떠 있는 것. 독립적으로 떠 있는 객체라 auto 쓸 수 없음. 부모껄 읽어들이지 못해서.
• left - 문서의 왼쪽으로 배치
• right - 문서의 오른쪽으로 배치
• none
• width - 콘텐츠 표시할 때 필요한 만큼만 차지
• height - float 되면 부모가 높이를 기억하지 못함

* float 이해에 도움 되는 영상 https://youtu.be/xara4Z1b18I?si=xUa4fxVVndTX5oiq

 

🍴 flow-root

• float 속성으로 생기는 레이아웃 문제 해결 가능
• clearfix 구현하는 데 주로 사용
  • 부모 요소가 자식 요소의 높이 제대로 감지하고 제어하는 기술
  • 부모 요소가 자식 요소의 float 된 요소나 절대 위치된 요소들 포함하도록 하는 것
• 부모 요소를 일종의 루트 컨테이너로 만들어 자식 요소들의 float나 절대 위치 제어에 도움

🍴 Block Formatting Context(BFC)

• 하위요소를 대상으로 한 독립적인 레이아웃 환경 생성, 주변 요소와도 레이아웃 관계 형성 가능

BFC의 조건

1. root 요소일 때
2. floating 됐을 때 - 하위 요소가 float 속성을 none이 아닌 값을 가졌을 떄
3. position 속성이 absolute나 fixed로 적용됐을 때
4. display 속성이 inline-block으로 적용됐을 때
5. overflow 속성이 visible 이외의 값으로 적용됐을 때

🍴Vendor Prefix

• 브라우저 공급자가 CSS 속성과 JS API에 접두사 추가
• 표준화 과정에서 실험이 의존성 갖게 되고 웹 개발자의 코드 손상 방지에 도움

-webkit- Chrome, Safari, 최신 버전 Opera, Edge, iOS

-moz- Firefox

-o- Webkit 이전 오래된 Opera 버전

-ms- IE, Chromium 이전 Edge

🍴 position

static(default) - 요소를 일반적인 문서 흐름에 따라 배치. top, right, bottom, left라는 속성이 무효됨

relative - 요소를 일반적인 문서 흐름에 따라 배치, 자기 자신 기준 top, right, bottom, left값에 따라 오프셋 적용

absolute - 요소를 일반적인 문서 흐름 제거, 페이지 레이아웃에 공간 배정X. 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치. position: static;이 아닌 걸 찾고 못 찾으면 최상위 요소까지 올라감. top, right, bottom, left 값 지정.

fixed - 요소를 일반적인 문서 흐름에서 제거, 페이지 레이아웃에 공간 배정X. 뷰포트 초기 컨테이닝 블록 기준 삼아 배치.

sticky - 요소를 일반적인 문서 흐름에 따라 배치, 가장 가까운 스크롤 되는 조상, 표 관련 요소 포함한 컨테이닝 블록 기준 top, right, bottom, left 값 따라 오프셋 적용. 다른 요소에는 영향 주지 않음.