Monsters-Rolodex 8 | CSS | string interpolation

App.js에서 App.css 파일을 연결한다.

 

 

 

App.css 내용을 채워준다.

body {

margin: 0;

padding: 0;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

background: linear-gradient(to left,

rgb(205, 217, 249) 0%,

rgb(216, 248, 248) 100%);

text-align: center;

}

.app-title {

margin-top: 75px;

margin-bottom: 50px;

font-size: 7rem;

color: rgb(23, 133, 152);

font-family: 'Bigelow Rules'

}

 

 

브라우저 화면에 배경색이 바뀌어 잘 나오는 것을 볼 수 있다. 

 

 

 

---

 

 

 

SearchBox에 css 추가하기 

 

 

 

 

General ClassName 추가하기 | String interpolation 사용하기 

className으로 이미 props로 설정이 되어있는데 

여기서 css를 위한 className을 어떻게 더 추가할 수 있을까? 

 

 

 

App.js에 있는 className을

좀 더 구체적으로 'monsters-search-box'로 바꿔주고 

 

 

SearchBox로 돌아와 className을 추가해보자. 

중괄호를 2겹으로 싸서 클래스네임을 추가해보니 에러가 난다. 

 

 

 

이 때 string interpolation을 사용할 수 있다. 

{ }중괄호로 감싸준후 백틱과 달러 사인을 써준다.

 

 

 

그 안에 클래스 이름을 넣어준다. 

 

 

 

inspect에서 확인해 보면 input 태그 안에 

class="search-box  monsters-search-box" 이렇게 2개가 있는 것을 볼 수 있다.

 

 

 

search-box에 스타일 넣기 

.search-box {

-webkit-appearance: none;

border: none;

outline: none;

padding: 10px;

width: 300px;

line-height: 30px;

margin-bottom: 30px;

font-size: large;

}

 

 

 

 

css 파일을 쪼개서 보관하는 것은 개발자가 보기 편해서이다.

다른 css 파일에 className으로 search-box  작성해도 적용이 된다. 

 

 

해당 css 파일이 오버랩 되지 않고 isolate하고 싶으면

css in js 라이브러를 사용해서 쓸 수 있다.