반응형
프로젝트 시작하기 전 초기에 설정하면 좋은 것들!
개요
- CSS초기화
- baseUrl 설정해주기
CSS 초기화란?
- 브라우저마다 다르게 적용되어 있는 CSS 기본 값들을 제거해 주는 것을 뜻합니다! ex) 크롬, 사파리, IE 등등
- 분명히 동일한 코드인데도 브라우저에 따라 생성된 결과가 다르게 나와서 당황했던 경험들이 있을 것이다!
그래서!
이러한 문제를 해결하기 위해서 각 브라우저의 기본 값을 제거하는 CSS초기화 코드가 있고 CSS작업을 하기 전에 먼저 초기화를 해놓고 CSS작업을 하면 좋다.
알아둘 지식
- CSS는 상위 요소의 CSS 속성이 하위 요소에 그대로 상속되는 특징이 있다.
- 그래서 최상위 파일에 CSS를 적용하면 된다.
- <body>에 설정된 기본 margin의 속성 값인 "8px"는 많은 웹 사이트에서 불필요하기 때문에 "0"으로 초기화하는 것이 기본입니다.
- box-sizing을 border-box로 지정하면 border의 크기를 고려하지 않고도 생각하는 데로 박스 안에 위치시킬 수 있다.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
저는 Eric Meyer의 코드에서 box-sizing: border-box; 을 추가합니다!
절대 경로 설정
최상위 폴더에
사용하는 언어에 따라서
js이면 jsconfig.json에
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
ts이면 tsconfig.json
없다면 생성
"compilerOptions": {
"baseUrl": "."
}
이렇게 하면 쉽고 직관적이게 경로를 입력할 수 있다.
참고자료
https://blogpack.tistory.com/855
반응형
'Frontend' 카테고리의 다른 글
| CSR과 SSR (0) | 2022.04.29 |
|---|---|
| 도메인, DNS, 호스팅 (0) | 2022.04.29 |
| UI 설계할 때 알아둘 점 (0) | 2022.04.02 |
| UI 설계 단어 정리 (0) | 2022.04.02 |
| GitHub Page 배포하기 (0) | 2022.04.01 |
