학습한 내용
Reset, Normalize CSS
-
"Reset CSS" 는 계속 적용했었던 CSS 초기화 코드와 같이, 미리 작성해둔 초기화 코드를 적용시키는 것, HTML 태그가 가지고 있는 CSS 속성들을 전부 초기화 시키는 코드임.
"https://meyerweb.com/eric/tools/css/reset/" 와 같은 사이트의 코드를 복사하여 "reset.css" 와 같은 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 코드.
"https://necolas.github.io/normalize.css/" 와 같은 사이트에서 CSS 문서를 다운받아 CSS 폴더에 적용, 기존의 "style.css" 문서 위에 코드를 적용시킴.
"Reset CSS" 코드가 HTML 태그의 모든 CSS 속성들을 초기화 시키는 형태라면, "Normalize CSS" 는 각 브라우저 간의 CSS 디자인으로 인한 오차와 버그를 줄이는 쪽으로 스타일을 재정의한 코드임.
- 실무에서 두 코드는 개발자의 취향이나 환경에 따라 쓰임새가 달라짐. 디자이너가 작업한 형태로 작업할 때는 "Reset CSS" 코드를 쓰는데, 보통 실무에서는 "Normalize CSS" 코드를 더 많이 사용함.
CSS 변수
- 기존 CSS 속성에는 존재하지 않던 개념인데, 개발 언어가 발전하면서 최근에 생긴 개념임. 익스플로러에선 대부분 적용이 되지않음. 밑의 사진의 파란색 부분이 CSS 변수 (트위치 사이트)
-
CSS 변수는,
class적용 방법 같이 기존에 미리 속성이 적용된 CSS 변수를 만들고, 필요한 영역마다 적용하는 방식임.차이점은
class는 HTML 문서에서 적용, CSS 변수는 CSS 문서에서 적용함. 또한, CSS 변수 안의 데이터를 변경하면 적용된 변수 안의 값도 다같이 바뀌기 때문에, 한번에 수정 작업을 할 때 편하게 사용할 수 있음. -
다음과 같이 적용하는데,
--black이라고 되어있는 부분이class와 같은 쓰임새, 변수를 적용할 떄는var()형식으로 적용.:root는 전체 범위에 적용한다는 의미.
:root {
--black: #18181a;
--brand-color: #9147ff;
--font-size-40: 40px;
}
h1 {
background-color: var(--black);
font-size: var(--font-size-40);
color: var(--brand-color);
}- 특정 영역에만 CSS 변수를 적용할 때는,
:root가 아닌 해당 영역을 적고 CSS 변수 속성을 적용.
HTML 문서
<body>
<header id="intro">
<p>Header P</p>
</header>
<footer id="footer">
<p>Footer P</p>
</footer>
</body>CSS 문서
#intro {
--font-size: 50px;
--font-color: blue;
}
#intro p {
font-size: var(--font-size);
color: var(--font-color);
}
#footer p {
font-size: var(--font-size);
color: var(--font-color);
}- 영역마다 설정되었던 CSS 변수를 적용시켰지만,
intro영역에만 속성이 적용됨.
학습한 내용 중 어려웠던 점 또는 해결못한 것들
- CSS 변수
해결방법
- CSS 변수에 대한 부분의 복습을 통해
class와 연관지어서 스스로 어떤 개념인지 이해하였음.
학습 소감
-
오늘은 사이트 카피캣 실습이 아닌, CSS 속성들에 대한 추가 설명에 대한 학습이 진행되었음. "Reset, Normalize CSS" 부분은 이때까지 적용했었던 CSS 초기화 작업과 비슷했기 때문에 이해가 잘 되었음.
그러나, CSS 변수 부분은 이해가 잘 되지 않아 복습을 좀 했는데,
class와 연관지어 생각하니 이해가 잘 되었음. 그리고 차이점에 대해 곰곰히 생각해 보았고,class나id와 같은 개념을 활용하는 더 상위의 속성이라고 생각되었음. 사용 방법은 비슷하나, 특정 영역에 CSS 변수를 적용할 때는class나id를 이용하는 부분이 있었기 때문에, 최신 트렌드에 맞는 사이트를 만들 때는 이러한 속성까지 고려해야겠다는 생각이 들었음.
