나디아 성장 일기

📌 BEM (Block, Element, Modifier) : HTML 요소들을 block과 그에 포함된 element로 구분하고, 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙 기본 구조 block__element--modifier 📍 Block (블록) : block(블록)은 페이지 전체 요소를 감싸는 컨테이너 블록끼리는 상호작용할 수 있지만, 우선순위나 계층이 없다 ❌ 클래스를 적용할 수 있는 DOM 노드라면 뭐든 블록이 될 수 있다 ⭕ 🔺 Naming 그냥 원하는 이름으로 표기 🔺 CSS 클래명만 사용 ⭕ 태그 이름, ID 중첩 사용 금지 ❌ /* O */ .block { color: #e5e5e5; } /* X */ div.block { color: #..

📌 [SCSS] 문법 모음 📌 색상 rgba($color: #색상 코드, $alpha: 불투명도(소수)); 불투명도: 0.8 -> 80% SCSS 문법으로 CSS에선 동작 X .list-item { border: 1px solid rgba($color: #fff, $alpha: 0.5); // 불투명도 50% padding: 10px; border-radius: 20px; } 📌 css 스타일링을 리셋 시키는 방법 브라우저 기본값에 신경쓰고 싶지 않을 때 사용 모든 태그의 스타일을 동일하게 만듦 1. 링크의 코드를 복사해서 reset 파일(reset.scss)에 붙여넣기 CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is..

📌 box-sizing : 박스 크기(width, height)를 계산하는 방법을 지정하는 속성 속성 content-box : 콘텐트 영역을 기준으로 크기를 정한다. - 기본값 - 요소의 크기에 테두리와 안쪽 여백은 넣지 않는다. border-box : 테두리를 기준으로 크기를 정한다. - 요소의 크기에 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않는다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 출처 CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성 목차1 개요2 문법3 예제 개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. 기본값 : content-box 상속 :..