HTML ▪ CSS
box-sizing
content-box width와 height 속성이 컨텐츠 영역만 포함하고 있음. 너비 = 콘텐츠 너비 높이 = 콘텐츠 높이 border-box width와 height 속성이 padding과 border를 포함하고 있음. padding과 border의 크기에 따라 컨텐츠 영역의 크기가 조절됨. 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이 box-sizing: content-box; 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이 box-sizing: border-box; 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이 /* https://developer.mozilla.org/ko/docs/Web/CSS/box..
BEM
BEM 이름을 작성하는 규칙 컴포넌트 단위로, 블럭 레벨로 이름을 작성 Block Element Modifier block__element--modifier ex) .card .card__img .card__title .card__description .button .card--dark .button--blue Block - header, container, menu, checkbox, input Element - menu item, list item, checkbox caption, header title Modifier - disabled, highlighted, checked, fixed, size big, color yellow Normal button Success button Danger bu..
defer
html에 자바스크립트 추가할 때 defer 옵션 쓰기 defer html 파일이 파싱을 하다 자바스크립트 파일을 추가해야 하면 자바스크립트 파일을 다운 받고 이어서 html파일 파싱을 하는데 만약 자바스크립트 파일이 크다면 로딩하는 시간이 오래 걸린다. 이를 해결하기 위해 defer 옵션을 사용하면 자바스크립트 파일을 다운 받는 동시에 html파일 파싱을 진행한다. /* https://ko.javascript.info/script-async-defer */