36, 개발자 도전 기록 블로그

margin auto 값을 주면 브라우져가 자동으로 남은 width의 공간을 계산하여 적절하게 분배해준다. 그래서 가운데 정렬의 꼼수로 이용하기도 하는 거였다. 단, 요소에 width 가 적용되어 있어야 한다.

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다 by mdn 1. CSS 변수 정의 --변수명 : 값으로 정의하며 그 자체 만으로는 아무런 효과가 없다. .ex { --color: black; color: white; } 2. CSS 변수 접근 .ex { --black: #000000; background: var(--black); } 3. CSS 변수 기본값 변수를 정의할 때 두번째 속성값이 기본값이 된다. .ex { color: var(--color, black); } 4. CSS 변수 상속 천국 지옥 form { --heaven: #ffffff; --hell: #000000; } button.heaven { color: ..

CSS 클래스 네이밍 규칙으로 Block(블록), Element(요소), Modifier(수정자)를 기준으로 어떤 "목적인가"에 따라서 이름을 짓는다. 다음과 같이 HTML 코드가 있을 때, block class를 block, black_element를 element, block--big, block--red를 modifier라고 하며, Block은 재사용 가능한 기능적으로 독립된 컴포넌트. Element는 Block를 구성하는 단위. Modifier는 Block이나 Element의 속성을 말한다. 지금까지는 id와 class를 혼용했는데 언제인가 id 보다는 class를 쓰는 게 더 바람직하다고 본 것도 같고, 한 번 BEM 방식으로 앞으로 코딩을 해보려고 한다. 깊게 공부하고 정리하는 것이 아니라 강..

현재 사용자가 보고 있는 브라우저 창의 크기. 반응형 웹을 구성할 때 쓰이는 단위이다. 반응형 웹이란 사용자의 환경에 따라 화면 크기가 변하기에 어떤 화면에서도 적응할 수 있도록 맞춰주는 작업을 통해 만들어진 웹사이트다.

두개 이상의 블록 요소의 상하 마진이 겹칠때 어느 한쪽으로만 적용되는 브라우져 렌더링 규칙. ※ 렌더링이란 ? 마크업 언어가 가지는 특성으로, 작성된 마크업 언어를 엔진이 해석해서 사람의 눈으로 볼 수 있도록 만들어주는 과정 출처 : https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4 마진 겹침현상이라고 예전에 어느 블로그에서 HTML을 공부할 때 배웠는데 예를 들어 두개의 블록 요소가 있을 때 마진이 겹치게 되면 한 마진값이 사라지게 되는 것이니 상쇄라고 이해하는게 더 좋을 것 같기도 하다. 전부 이해하지..