선호:하다

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 속성을 ..

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://..

Styled Component Styled Component란 자바스크립트 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 리액트개발에서 주로 사용되는 라이브러리이다. 기존 웹사이트를 개발할 때는 HTML과 CSS, 자바스크립트 파일을 각각 별도의 파일로 두는 것을 관례로 하였지만, React, Vue, Angular 등과 같은 프레임워크, 라이브러리들이 인기를 끌면서 웹 개발의 패러다임이 바뀌게 되었다. 이들은 웹 페이지를 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, 자바스크립트를 종합하는 패턴으로 구성하는 컴포넌트 기반 개발 방법을 주류로 올려놓게 되었다. 따라서 CSS 방식에서도 CSS-module 등을 사용하여 CSS 파일을 외부로 분리하는..