CSS 2

[JS] JavaScript에서 CSS 변수 값 사용하기

프론트엔드 개발을 하다가 동적으로 HTML 요소의 스타일을 변경해줘야 하는 상황을 만났다. 나는 styled-component와 같은 CSS-in-JS 방식을 사용하지 않고 공통 스타일 값들을 CSS의 변수로 관리하고 있었기 때문에, 또 한 번 자바스크립트 상수를 선언해 중복해서 값을 관리하고 불러와 사용해야 하는 건지 고민이 생겼다. 하지만 다행히도 자바스크립트에는 CSS에 선언한 변수의 값에 접근하는 API가 존재했다! getComputedStyle() 과 getPropertyValue() getComputedStyle(): 인자로 전달받은 HTML 요소에 대한 모든 CSS 속성값을 담은 스타일 객체 반환 getPropertyValue(): 스타일 객체 중 인자로 전달받은 특정 속성에 대한 값을 문자..

💻💀/개발 2021.10.24

[CSS] :nth-last-child() 가상 클래스를 사용해 요소가 x개일 때 전체 선택하기

요구사항 동적으로 li 요소의 개수가 바뀌는 목록이 존재한다. 이 목록은 최대 4개의 li 요소를 가질 수 있다고 가정할 때, 아래의 예시 이미지처럼 li 가 4개일 때만 부모 요소에 꽉차게 스타일링 하려고 한다. 어떻게하면 JavaScript 코드 없이 CSS만으로 li가 4개일 때를 확인하고 다른 스타일링을 적용할 수 있을까? 기본 UI 코드 /* CSS */ html, body { height: 100%; } ul { margin: 0; padding: 0; list-style: none; } .list { display: flex; flex-direction: column; height: 30em; border: 5px solid; } .item { height: 20%; margin-bottom..

💻💀/개발 2021.09.24