천진난만 코딩 스토리
7. Log in 화면 만들기 (css-기본설정, 파일분할) 본문
1) css의 기본설정 지우기
body의 margin 같이 브라우저가 자동으로
html에 적용시키는 스타일이 있음.
스타일을 하다보면 이 기본설정을 지워야 하는 상황이 생김.
그렇게 하기 위해서는 reset css를 해주어야 함.
먼저, 밑의 사이트에 들어감.
https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
위의 사이트에서 코드를 복사한 후에
reset.css라는 파일을 css폴더에 새로 만듬.
복사한 코드를 reset.css에 붙여넣기함.
styles.css파일에 @import "reset.css"; 를 하여
rese.css 파일을 적용시킴.
저장 후 브라우저를 확인하면
모든 margin, padding, boder가 사라진 것을 볼 수 있음.
2) css 파일 분할하기
status-bar.css 파일을 새로 만듬.
status-bar에 대한 스타일을
status-bar.css 파일에 옮겨줌.
styles.css 파일에는
@import "status-bar.css"; 를 하여
status-bar.css 파일을 적용시킴.
이렇게 css파일을 분할하여 사용하면
css가 길어져서 보기 힘든 일을 방지할 수 있음.
수정 시에도 보다 효과적으로 파일을 찾아서 수정할 수 있음.
'노마드코더 > 코코아톡 클론코딩' 카테고리의 다른 글
| 9. Log in 화면 만들기 (css- log in form 1) (0) | 2022.11.10 |
|---|---|
| 8. Log in 화면 만들기 (css-header) (0) | 2022.11.10 |
| 6. Log in 화면 만들기 (css-상태바2) (0) | 2022.10.25 |
| 5. Log in 화면 만들기 (css-상태바1) (0) | 2022.10.25 |
| 4. Log in 화면 만들기 (html-log in화면) (0) | 2022.10.25 |
