분홍분홍 코딩 프로젝트

브라우저가 html, css, javascript를 이해하고 뿌려주는(?) 방식인 Rendering path에 대하여 알아보자. 브라우저의 사고방식을 이해한다는게 재미있다. 정말로.. . Rendering path Rendering path를 통해 브라우저는 html, css, javascript를 픽셀로 변환하여 우리 눈에 보이게끔 화면에 뿌려준다. Render tree까지를 constructor, layout부터를 operation 두 단계로 나눈다. Constructor 더보기 network -> request / response -> loading -> scripting -> Render tree = 네트워크 -> 데이터 요청 -> 데이터를 받아옴 -> DOM, CSSOM 으로 변환 -> DOM ..

최근 웹에서 CSS의 활용도가 높아짐에 따라 CSS를 보다 효율적으로 작성하는 다양한 방법이 생겨났습니다. 대표적인 방법론으로 BEM, SMACSS, OOCSS를 들 수 있습니다. 오늘은 이 3개의 방법론 중 BEM에 대하여 정리해보겠습니다. BEM의 기본 구조 BEM은 Block, Elemment, Modifier 의 약자 입니다. 이 3가지로 구성된 이름을 구분 짓는 방법은 "__"과 "--" 입니다. .footer__nav--nav-content{ color:red; } 위의 코드에서는 foorter 는 Block, nav 는 element, nav-content 는 Modifier가 됩니다. BEM은 기본적으로 class만을 사용하며, id는 사용하지 않습니다. 또한 '어떻게 보이느냐' 보다 '어..