💻 학습 내용
reset.css
⭐️ reset.css
사이트 카피캣을 진행할 때 초기화 작업을 해줬는데 이게 미리 작성된 코드가 있는데 그게 바로 reset.css 라고 한다
- 기존의 html태그가 갖고 있는 모든 걸 다 초기화 해준다.
- 브라우저마다 고유의 css를 갖고 있는데 그걸 전부 다 초기화
- 커스텀 작업은 style.css에서 다이렉트로 진행하면 된다.
- 브라우저 고유의 css -> reset.css ->style.css
(나중에 작성된게 브라우저에 적용이 된다)
즉 style.css에서 작성한게 브라우저에 최종적으로 적용이 되는 것이다.<link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
normalize.css
디자인을 입힌 형태로 재 정의 해주고 있다
기존의 디자인을 조금씩 가공한 상태라고 할 수 있다
오차를 줄이고 버그를 줄이는 방향으로 사용되고 있다
디자인은 적용되어 있고 단 여러 브라우저에서 디자인간의 오차를 줄일 수 있도록 적용되어 있다
🖤 다운로드 버튼에서 오른쪽 버튼을 눌러 '다른이름으로 링크저장'을 클릭하고 css폴더에 normalize.css로 저장해주면 된다<link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
css 변수
🖤 변수란?
어떤 박스가 있다 박스안에 a내용물을 넣는다고 할 때 박스를 변수라고 하고 a내용물을 값(밸류)라고 한다.
🖤 변수의 장점
변수는 원하는 이름으로 바꿀 수 있다.
변수를 사용하는 이유는 변수로 지정한 이름에서 값만 변화하면 일괄적으로 모두 수정이 가능하다
직관적인 코드 명으로 아주 유용하다
🖤 변수의 단점
익스플로러에서는 사용을 못한다.
🖤 변수 작성법
:root {
--black: #18181a;
--purple :#9147ff;
--font-size-40: 40px;
}
h1 {
background-color: var(--black);
font-size: var(--font-size-40);
color: var(--purple);
}
#intro{
--font-color : blue;
--font-size: 50px;
}
#intro p {
font-size: var(--font-size);
color: var(--font-color);
}root에다가 변수를 입력하면 어디에서든 전부 다 사용이 가능한 변수가 된다
내가 사용한 변수가 영향력을 발휘하는 범위를 css선택자를 활용해서 지정을 할 수 있다
#intro같은 경우는 intro안에 있는 태그에만 디자인 적용이 가능해진다.
📝 마무리
💛 카피캣 수업을 진행할 때는 놓쳤던 부분들을 하나하나 설명해주시는 시간이었다.
새로운 카피캣 수업을 할 때 마다 초기화 작업을 매번 작성해야 해서 번거롭게 느껴졌는데 reset.css를 알게되서 좋았다.
💛 트위치 수업을 할 때 보기 어렵게 되어 있어서 왜 이렇게 어렵게 했는지 이해가 되지 않았다. 그런데 오늘 수업에서 css 변수를 알게 되면서 트위치가 왜 그렇게 작업을 했는지 알게 되었다. 하나의 코드만 변경하면 굳이 다른 코드들을 수정할 필요가 없고 변수의 이름도 직관적으로 변경하면 다른 개발자가 보았을 때 쉽게 내용 파악이 가능할 것 같았다.
하지만 아직 익스플로러에는 사용되지 않는 다고 하여 아쉬웠다.
또 변수는 자바스크립트에서 많이 사용되는 개념이라고 하였다.
