[멋쟁이 사자처럼 프론트엔드 스쿨] 14일차 TIL - BFC, float, 네이밍 방법론

🍰 저번주 금요일 걸 지금 쓴다...

🍴 BFC(block formatting context)

• 주변 블록 배치에 영향을 주는 것들이 BFC를 만듦.(ex. float 사용 시 다음 줄 요소가 밀려나는 것)
• overflow도 독립적인 블록 형태로 포맷팅 형성

🍴 float

• 노멀 플로우를 벗어나서 화면에 뜨게 배치.
• 노멀 플로우: 흘러가는 흐름. inline인지 block인지.

🍴 네이밍 방법론

BEM(Block Element Modifier)

• block: 기본 구성 요소. 독립적으로 존재하는 블록.
• element: 블록 안에서 구체적인 부분. ex. text, icon
• modifier: 요소의 상태나 변형 정의. ex. 버튼 색상/크기 변경

OOCSS(Object-Oriented CSS)

• CSS를 객체 지향적으로 접근하는 방법론
• 스타일링을 반복되는 패턴으로부터 추상화
• 재사용 가능한 CSS 코드 작성을 중점으로 함
• 구성 요소 분리 - 스타일을 특정한 구성 요소에서 분리하여 재사용성 높임
• 컨테이너와 내용 분리 - 스타일을 적용하는 데 필요한 범위를 확장할 수 있도록

SMACSS(Scalable and Modular Architecture for CSS

• 규모가 큰 웹 애플리케이션을 구축하기 위한 CSS 아키텍처 방법론
• 스타일을 다양한 범주로 분류, 각 범주에 대한 사용법 정의
• 스타일 시트를 모듈화하고 구조화하여 유지 보수 및 확장성 향상

🍰 지난 3주 간 매일 정리를 해 본 결과, 이런 식으로 매일 TIL을 작성하는 건 조금 비효율적으로 느껴졌다. 물론 복습하는 데 도움을 주지만, 시간이 오래 걸리는 것 같다. 찾아보면서 정리하느라 정리하는 데 시간을 다 보내고 나면 실습했던 걸 다시 해 볼 시간이 부족하다. 그래서 이렇게 매일 작성하는 건 그만두고 새로운 방법을 찾아볼까 한다. 

🍰 사실 마땅한 방법을 생각하진 못했는데, 내일부터 시도해 볼 것은 수업 들으면서 적어 놓은 키워드들을 한 번 훑어보되, 빠르게 훑고 바로 실습한 내용을 다시 직접 해 보는 것이다. 이게 오히려 나중에 더 도움이 될 것 같다. 

🍰 지금 읽어보려고 하는 책들도 많이 밀리고, 할 게 너무 많아서 앞으로는 일주일 회고 형식으로 작성할 것 같다.