css reset

styled-component 를 사용하는 경우, GlobalStyles 를 만들어 적용할 수 있다. import reset 하여 전체 css reset 이 가능하다. 만든 GlobalStyles.js 파일은 index.js 에서 import 시켜준다

// GlobalStyles.js
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyles = createGlobalStyle`
    ${reset}
    *{
        box-sizing:border-box
    }
    ...
`;

export default GlobalStyles;

// App.js
import theme from 'styles/theme';
import GlobalStyles from 'styles/GlobalStyles';
import { ThemeProvider } from 'styled-components';
...

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

emotion 라이브러리를 사용할 때도 styled-component 와 비슷하게 적용된다. reset 을 import 해 GlobalStyles 파일을 만들어준다. entry point 인 index.tsx 에서 import Global 컴포넌트해서 전체 앱에 적용시켜준다

// GlobalStyles.ts
import { css } from '@emotion/react';
import emotionReset from 'emotion-reset';

export const GlobalStyles = css`
  ${emotionReset}

  *, *::after, *::before {
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale; /* font 관련 설정 */
    -webkit-font-smoothing: antialiased;
  }
  ...
`;

// index.tsx
import { Global } from '@emotion/react';
import { GlobalStyles } from 'styles';
...

ReactDOM.render(
  <React.StrictMode>
    <Global styles={GlobalStyles} />
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

css reset 하는 태그들 주로 예시를 살펴보면 이러하다. <a>, <ul> 및 <li>, <p>, <button> 태그와 전체 box-sizing 설정 등을 해준다

a {
  text-decoration:none;
  color:inherit
}

* {
  box-sizing:border-box
}

body {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0; /* 들여쓰기도 없애고 싶을 때 추가 */
  margin: 0;
  
/* bullet style 을 바꾸고 싶다면  
  list-style: square;  or disc, circle, decimal, lower-alpha 등 */
}

p {
  margin: 0; /* 아래 위 margin */
}

button {
  border: none;
  box-shadow: none;
  cursor: pointer;
  background-color: inherit;
 }

button {
  border: none; 
  box-shadow: none;
  cursor: pointer;
  background: inherit; 
  border-radius: 0; 
  padding: 0; 
  overflow: visible;
}

input focus 될 때 설정된 default outline 을 삭제하고 싶다면 아래 css 를 적용한다

input:focus, textarea:focus {
    outline: none;
}

*:focus {
    outline: none;
}

/* Bootstrap */
.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

 

:focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key

 

input :focus 에 색을 넣고 싶거나, 테두리 색 변경하고 싶을 때

/* Selects any <input> when focused */
input:focus {
  color: red;
  outline: 2px solid #f3f3f3; /* 테두리 색 변경 */
}

 

input 테두리 없앨 때

input {
    border:none;
    border-right:0px; /* 아마 옵션 */
    border-top:0px;
    boder-left:0px;
    boder-bottom:0px;
}

 

전체 배경색을 깔고 싶을 때는 body 에 배경색을 넣고, <div id="root"></div> 의 높이를 100vh 로 해야 한다. 안하면 높이가 안 잡혀서 내부 컨텐츠 생성 안되면 배경색이 안 나온다

body {
  background-color: #ecf1fd;
  margin: 0;
}

#root {
  height: 100vh;
}