리액트 작업 중에 wrapper라는 공통 클래스를 주었습니다.이 wrapper는 Header, Footer, MainPage 등 여러 페이지에서 공통으로 사용되는 클래스인데요.하지만 MainPage에서만 wrapper에 다른 스타일을 추가해주어야하는 상황이 되었습니다.구글링 해보니 다행히 일반클래스도 주고 모듈클래스도 주는 방법이 있더라구요. 바로 [ classnames ] 라는 라이브러리를 설치하여 사용하는 것입니다.사용방법은 아래와 같습니다. 1. 터미널 창에서 [ npm install classnames ] 명령어 입력 2. 일반, 모듈 css를 함께 사용할 페이지에 아래 코드 입력import classNames from 'classnames'; 3. 아래처럼 코드 입력

저희 [class^="tit"] 이런 선택자 많이 사용하시죠? 그런데~ 이런 어트리뷰트 선택자도 종류가 굉장히 다양합니다! 아래 어트리뷰트 선택자 종류를 확인해주세요! 1. [속성이름~="속성값"]2. [속성이름|="속성값"]3. [속성이름^="속성값"]4. [속성이름$="속성값"]5. [속성이름*="속성값"] 정말 다양하죠? 하나하나 설명 드리겠습니다!  1. [속성이름~="속성값"]- 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택합니다. 예를 들어 [class~="tit"] 이렇게 입력 시 tit 이라는 class를 가진 속성을 모두 선택합니다! 하지만 ' main_tit ' 이런 클래스는 선택하지 않습니다! 그 이유는? ~ 은 단어를 기준으로 선택하기 때문에 ..

웹 호환성의 문제로 인해서 텍스트에 그라디언트가 들어가는 경우 이미지로 저장하여 작업을 했었는데요.이제 IE 브라우저가 종료되면서 텍스트 그라디언트 속성을 사용할 수 있게 되었습니다!아래 방법을 참고하여 그라디언트 텍스트를 만들어보세요 :)  텍스트에 그라디언트를 입히기 위해선 [ -webkit-background-clip:text; ] 이 속성을 활용하여 간단하게 스타일을 넣을 수 있습니다. 해당 속성은 background를 clip, 즉 자르는 것인데요. -webkit-background-clip:text; 이렇게 입력하면 background를 text 모양을 제외하고 자르겠다는 뜻이 됩니다. 이 속성을 활용하여 color는 transparent로 투명하게 바꿔준 후, background에 그라디언트..

css에서 밑줄 오류가 생기는 경우는 거의 보지 못한 것 같습니다.하지만 이번에 작업을 하면서 처음으로 오류가 생겼는데요!이럴 경우 어떻게 작성해야 제대로 보여지는지 알아보아요😎    우선 텍스트에 밑줄을 넣기 위해서는 보통 아래와 같은 방법을 사용합니다. 1. 가상 선택자 사용 (before, after)2. text-decoration 속성 사용3. border-bottom 속성 사용  1. 가상선택자 사용먼저 1번의 경우 아래 코드와 같이 입력하여 밑줄 스타일을 삽입하게 되는데,.deco_underline {display:inline-block; position:relative; color:#111; font-weight:600;}.deco_underline::before { content:..

홈페이지를 확인하다 보면 배경에 꾸밈요소이지만 텍스트로 들어가는 부분이 있습니다.텍스트여도 배경에 꾸밈요소로 들어가기 때문에 이미지로 저장하여 사용하는 방법을 사용했었는데요.이미지로 저장하지 않고 가상선택자(::before, ::after)를 사용하여 content:''; 속성으로 삽입할 수도 있습니다.  HOW? SeoTUDY파이팅! 예를 들어 'SeoTUDY 파이팅!' 이라는 텍스트를 위처럼 줄바꿈을 하여 꾸밈요소로 넣어주고 싶다면,아래처럼 white-space:pre; 속성을 넣어준 뒤, 줄바꿈을 하고 싶은 위치에 \A 를 삽입해줍니다.그럼 굳이 이미지로 저장하지 않아도 쉽게 삽입이 가능합니다!.exam::before {content:'SeoTUDY \A 파이팅!'; white-space:pre;}..