Front-End/CSS 썸네일형 리스트형 CSS 기본 개념 "이건 알고가자" 0) CSS란Cascading Style Sheets.HTML 같은 문서의 보이는 모습(색, 글꼴, 배치, 애니메이션)을 정의한다. “Cascading(캐스케이드)”는 충돌 시 누가 이기나를 정하는 규칙 (!important → 레이어 → 특정성 → 소스 순서).기본 문법(한 줄 요약)/* 선택자 */ /* 선언블록 */button.primary { /* ← 규칙(rule) */ color: white; /* 속성: 값; */ background: #4f46e5;}/* 주석은 이렇게 */ 선택자(무엇에 적용할지)태그: h1, p클래스: .card, .btn.primary아이디: #app속성: [type="email"]조합자: .nav > li(자식), .item + .. 더보기 CSS 아키텍쳐와 BEM 1. CSS 아키텍쳐1.1. CSS 아키텍쳐란?CSS를 더 체계적이고 유지보수하기 쉽게 짜는 방법을 의미함.1.2. CSS 아키텍쳐의 종류BEM (Block Element Modifier)OOCSS (Object-Oriented CSS)SMACSS (Scalable and Modular Architecture for CSS)Atomic CSSITCSS (Inverted Triangle CSS)실무에서는 BEM이 가장 많이 쓰이는데, 그 이유는 단순하고 명확해서 (클래스 이름만 봐도 구조가 눈에 보임)협업에 강해서 (여러 명이 같은 코드 작업할 때 충돌이 적음)CSS 유지보수에 좋아서 (나중에 스타일 고칠 때 어디에 영향 가는지 예측 가능)프레임워크랑 잘 어울려서 (React, Vue 같은 컴포넌트 개발할.. 더보기 이전 1 다음
