CSS

[CSS] margin과 padding

2023.05.11

자주 쓰지만 항상 어떤 속성을 사용할지 고민하게 되는 margin과 padding. 여러가지를 참고하며 작성하는 글이지만 사실 아직 어느 상황에 써야 맞는지 헷갈리는건 여전하다. 그래도 검색하면서 다른 사람들도 많이 헷갈려 하는구나.. 라는 위안을 얻으며 기록해본다. 🔎 BOX MODEL HTML은 4가지 박스 형태로 만들어진다. 이 네가지 영역을 박스모델이라고 한다. ▪️ content: 내용이 담긴 부분 ▪️ padding: border와 content사이의 영역 ▪️ border: element를 감싸는 경계 ▪️ margin: border의 바깥 영역 🔎 비교 ✅ margin: 바깥쪽 여백 ✅ padding: 안쪽 여백 양수 (+) 음수 (-) auto collapse margin O O O O ..

FRONTEND/HTML, CSS

[CSS] 네이밍 규칙

2023.03.24

새로운 페이지를 만들때 항상 고민되는 변수명 짓기 Javascript에서는 흔히 Camel Case로 불리는 컨벤션 규칙을 사용한다. 띄어쓰기 없이 변수명을 붙여쓰되 이어지는 단어의 첫 글자는 대문자로 작성한다. const myName = document.getElementById('...') 하지만 CSS에서 카멜케이스 사용은 적합하지 않다. BAD .selectBtn { border: 1px solid blue; } GOOD .select-btn { border: 1px solid blue; } CSS의 네이밍 규칙중 CSS의 제작 방법론 중 하나인 BEM 규칙에 대해 알아보자. BEM 규칙 BEM은 Block, Element, Modifier 의 줄인 말로 일종의 네이밍 컨벤션 이다. 컴포넌트 기반..

[CSS] margin과 padding

[CSS] 네이밍 규칙

티스토리툴바