언어 감각 기르기 언어 감각 기르기

프론트엔드 개발을 하다 보면 각종 스타일 변수(대표적으로 컬러와 여백값)를 JS 코드에서 끌어다 써야 할 때가 있다. 생각나는 방법으로는 세가지 정도가 있다. styled-component 등 CSS-in-JS 라이브러리를 사용하는 경우: JS 코드로 정의하기 CSS 커스텀 프로퍼티로 정의해 두고 DOM API를 사용해 접근하기 css-modules 사용하는 경우: :export 사용하여 스타일 파일에서 변수 내보내기 각각의 방법을 하나씩 살펴보자! JS 코드에 객체 등으로 정리 스타일과 스크립트 코드가 섞이는 것에 그닥 불만이 없다면 적극 활용을 권장하고 싶다. 나는 그 둘 사이의 명확한 구분이 꼭 필요하다고 생각하는 타입이 아니고, 객체로 상수값 정리하는 것을 좋아해서 예전에 네이버 스마트 플레이스 ..

상황에 따라 다르게 적용하는 CSS 방법론 원문: When to use which CSS methodology by simurai 해가 지날수록 점점 더 많은 CSS 방법론이 등장하고 있습니다. 그러나 불행하게도 언제나 먹히는 CSS 방법론은 존재하지 않기 때문에, 이 글에서는 프로젝트의 성격에 따라 어떤 CSS 방법론이 적합한지에 대해 살펴보겠습니다. 좋아요, 이제 그럼 CSS 방법론으로 가득 찬 캄캄한 동굴 속으로 들어가 봅시다. 저는 그냥 단일 페이지 사이트나 간단한 사이트를 만들고 싶어요. 콘텐츠는 대부분 텍스트로 이루어져 있고, 폼 요소가 한두개 정도 들어가 있어요. 같이 개발할 사람은 없고, 그냥 저 혼자 (그리고 제 고양이랑) 만듭니다. 👉 요소에 클래스를 부여하여 이를 선택자로 사용하는 대..

CSS로 형제 요소 갯수 알아내기 소개 문서 원본 바로가기 (게시일: 2014년 6월 10일)CSS로 형제 요소 갯수를 알아내는 방법은 2009년 André Luís가 포스팅을 통해 처음 제안하였고, 2년 후에 Lea Verou가 보완하였습니다. 알아 둘 만한 가치가 있다고 생각합니다. 본 기법은 다양하게 응용될 수 있는데, 원본 문서에서는 li 요소 갯수에 따라 블록 안의 배경색을 다르게 매기는 것을 예시로 들었습니다. (flexbox를 사용할 수 없는 환경이라고 가정합니다.)다음 코드에서는 float:left를 사용하여 li 요소들을 띄운 상태입니다. li { float: left; } /* li가 하나일 때 */ li:first-child:nth-last-child(1) { width: 100%; ..

캐스케이드 정리 (출처: CSS 완벽 가이드, Eric Meyer, 2007, 위키북스) 상속이란, 일부 속성값들이 어떤 요소에서 그 자손 요소로 넘겨지는 방식을 의미한다. 사용자 에이전트가 요소에 어떤 값을 적용해야 할지 결정할 때에는 상속뿐 아니라 선언 자체의 기원(origin)과 구체성(specificity)도 고려해야 하며, 이런 고려 과정(process)를 캐스케이드(cascade)라고 부른다. 구체성 어떤 규칙이 우선인지 어떻게 알 수 있을까? 선택자 각각의 구체성을 보면 알 수 있다. 만약 요소에 상반되는 두 가지 이상의 속성 선언이 있다면, 구체성이 높은 선언이 우선한다. 구체성 값은 0,0,0,0처럼 4개의 값으로 표현되는데, 다음과 같은 규칙으로 계산된다. 선택자에 있는 모든 id 속성..