개발일지 210825

42일차

강의노트

• CSS일반에 대한 추가설명 강의

개요

1. reset.css
2. normalize.css
3. CSS변수

메모

1. reset.css
   : html의 요소들이 기본적으로 갖고 있는 속성을 초기화시키는 속성값을 가진 css코드를 별도의 css파일로 묶어서 사용하는 일반적인 방법

   https://meyerweb.com/eric/tools/css/reset/

• 구글링 시 가장 먼저 노출되는 위 사이트의 코드를 복사하여 사용.
• CSS적용의 우선 순위(Cascading)
  (1) 각 브라우저의 기본값
  (2) 먼저 링크된 CSS의 내용
• 따라서 reset.css를 이용해 초기화 작업 후 css문서를 작성하고자 할 경우, html문서의 link태그 통해 css파일을 연결하는 작업에 있어 reset.css에 대한 코드를 먼저 작성해주어야 한다.

2. normalize.css
   : reset.css와 마찬가지로 css코드가 미리 작성되어있는 문서. 브라우저 간의 오차와 버그를 줄이기 위한 일반적인 css디자인이 적용되어 있다.

   https://necolas.github.io/normalize.css/

• 마찬가지로 구글링을 통해 위 사이트 접속. 파일을 다운 받아서 사용.

3. CSS변수

• 변수의 기본 개념은 선행학습했던 javascript 1강에서 학습했었음.
• CSS에서의 변수 개념은 최근에 개발(?)되어 사용되기 시작했다. (익스플로러 브라우저에서는 거의 대부분 적용되지 않음)
  
  

4. CSS변수 사용법

• 4.1. 변수의 등록

  :root {
  --변수명: css속성값
  )
  
  
  예시
  :root {
  --black : #000000;

• 4.2. 변수의 사용

  h1 {
  background-color: var(--black);

• 4.3. 제한적인 영역에서의 변수 지정
  : 아래와 같이 지정하는 경우 해당 선택자의 영역 안에서만 변수가 작동한다.

  선택자{
  --black: #000000;
  }

이슈-솔루션/미해결(질문)

x

학습 소감

정말 오랜만에 본 강의에서 새로운 학습 내용이 나와서 반가웠다. css에서도 변수를 활용할 수 있다는 것을 처음 알게 되었다. 거의 모든 버전의 익스플로러 브라우저에서 작동하지 않는다는 설명이 있었는데, 어느 정도 일반적인 문법이 되었는지는 모르지만 코드의 가독성과 편의성을 고려할 때 분명 일반적으로 사용하게 될 것 같다.