CSS를 사용하다보면 가상 클래스 또는 가상 요소 선택자를 사용한다. 사용하면서 우리는 두 개가 같은 거라고 생각하며 사용하고 있지만 실제로는 둘은 다른 녀석들이다. 가상 요소 실제로 존재하지 않는 가상의 요소를 만들어서 스타일을 주는 것을 말한다. 사용할 때 콜론( : )을 사용할 수 있지만 가상 클래스와 구분하기 위해서 이중 클론( :: )을 권장한다. 대표적인 가상 요소들을 나열하자면, ▶ ::before : 지정된 요소의 앞에 가상의 요소 생성 ▶ ::after : 지정된 요소의 뒤에 가상의 요소 생성 ▶ ::placeholder : Input 필드의 힌트 텍스트에 스타일을 적용한다. ▶ ::selection : 사용자에 의해서 선택(드래그)된 텍스트 영역의 속성을 변경한다. ▶ ::first-l..

브라우저에서 텍스트를 드래그하거나 더블 클릭해서 선택할 수 있다. 그런데 이것을 막으려면 자바스크립트로도 가능하겠지만 CSS를 사용해서도 막을 수 있다. 바로 user-select를 사용해서! 사용 방법은 다음과 같다. user-select: auto | all | none | text user-select는 4가지 설정을 줄 수 있으며, 기본 값은 auto이다. 각 옵션의 기능은 다음과 같다. ▶ auto : Default 값, 브라우저 허용 시 텍스트 선택 가능 ▶ all : 더블클릭이 아닌 클릭 만으로도 선택이 가능 ▶ none : 텍스트 선택 불가 ▶ text : 텍스트 선택 가능 -webkit-user-select: none; -moz-user-select: none; -ms-user-selec..

CSS에서 가장 많이 사용하는 속성 중 하나로 display가 있다. display는 요소를 어떻게 배치할지를 나타내는데, 일반적으로 block, inline, inline-block이 있다. Block vs Inline block은 전체 라인을 모두 가지고 있다. 또한 width 값을 줘서 공간이 남더라도 나머지 공간에 다른 요소가 들어올 수 없다. inline은 컨텐츠의 크기만큼의 영역을 가지고 있으며, 한 라인에 여러 요소가 배치될 수 있다. block의 대표적인 태그로 div가 있고, inline의 대표 태그로 span이 있다. 여기서 하나의 특징이 더 나오는데, div 안에는 span을 넣을 수 있지만 span 안에는 div를 넣을 수 없다. 즉, block 안에는 inline이 들어올 수 있지..