선호:하다

css 작업 중 position: absolute를 사용하다보니 100%를 채워야하는 div의 width가 inline 요소 마냥 줄어드는 것을 목격하게 되었다. 해당 문제를 해결하기위해 찾아보니 다음과 같은 글을 발견할 수 있었다. position: absolute가 inline-block로 바꾼다? div 태그 안에 span 태그를 어떻게 가운데로 정렬 할지 고민중 position을 사용하기로 결정했습니다.보시다시피 span태그에 block속성도 주지 않았는데 width값이 정상적으로 적용됩니다.처음에 어> span velog.io position 속성의 absolute와 fixed는 해당 요소의 display 값을 inline-block으로 변경한다는 특징이 있다는 것이다. position 속성을 ..

순수 CSS는 프로젝트의 규모가 커질수록 요수보수가 어려워진다는 한계때문에 CSS-In-JS나 SCSS와 같은 기술의 사용이 대세가 되었다. 이 글을 통해 기존 CSS의 문제점을 개선한 SAAS와 SCSS에 대해서 알아보고 그중 더 많이 사용하는 SCSS에 대해 더 자세히 정리해볼 것이다. Sass Sass란 CSS 전처리기로써, 변수, 상속, 중첩 등의 다양한 기능을 제공한다. Sass로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행된다. SCSS SCSS란 Sass의 일종으로 Sass의 모든 기능을 지원하며, 기존 CSS와 비슷한 문법을 사용한다는 점이 특징이다. 이러한 특징때문에 Sass보다 SCSS를 더 많이 선호하는 추세이다. ※ Sass와 SCSS 문법 비교 Sass: 중괄호가 아닌 들여쓰기 ..

Attribute selector (속성 선택자) 특정 속성 값을 갖는 요소를 선택할 때 사용한다. 정규표현식의 일부 기호인 *, ^, $, | 등을 사용하여 다양한 표현이 가능하다. 태그종류[속성표현]의 기본 형태를 가진다. 예시들을 통해 사용 방법을 알아보자 a[href] { color: green; } href 속성을 갖는 모든 a태그를 선택한다. a[target="_blank"] { color: red; } target 속성 값이 _blank인 모든 a태그를 선택한다. div[class*="test"] { color: red; } class에 test라는 글자를 포함하는 모든 div태그를 선택한다. ex) class="mytest", class="tests" ... a[href^="https://..