[배운내용]

CSS 추가 수업

(1) reset.css

: 우리가 css를 시작할때

html, body{
	margin: 0;
    padding: 0;
}

ol, ul{
	list-style: none;
}

등과 같은 초기화작업을 실행한다. 이때, 오직 초기화작업만을 위한 css파일을 만들어둔 후, 제작하는 html파일에 이 초기화css파일을 링크해주면 모든 css파일에 초기화작업을 따로 해줄 필요가 없다. 완전초기화O

reset.css 참고사이트

(2) normalize.css

: reset처럼 모든 속성의 기본값을 초기화하는 것이 아니라, 여러 브라우저간 차이를 최대한 줄일 수 있는 속성이 적용되어 있다. 완전 초기화X

normalize.css 참고사이트

(3) CSS변수

• 위의 사진처럼 '박스'라는 변수가 있고, 이 안에 '애플'이라는 내용물을 넣을 수 있는데, 이때 박스를 변수라고 하고, 애플을 value(값, 데이터)라고 한다.
  여기서 변수의 이름은 위의 '사과박스'와 같이 원하는대로 정할 수 있다.
  
  다시말해, 위의 코드처럼 '--black'와 같은 전용 표기법에 맞춰서 변수이름을 정해주어야 한다. 이 변수를 적용할때는 var()안에 작성할 수 있다.
  ▲ 변수를 적용한 모습
  이 변수를 사용하는 이유는 페이지를 구성할때 반복되는 색상값이나, 속성값이 많이 발생하는데,이때 그 색상값을 외워야하거나 일일이 적어주는 번거로움을 덜어줄 수 있고, #9147ff 보다는 여기에 변수이름을 설정해주어서 '--brand-color'와 같은 식으로 이름을 붙혀주는 것이 더 직관적이기 때문에 유용하게 사용가능하다.
  또한 브랜드를 대표하는 색상이 #9147ff에서 #ff8c00으로 바뀌었다고 가정했을 때, 이 변수를 사용하지 않았을 경우, 브랜드 색상이 사용된 모든 곳을 찾아 변경해주어야하지만, 변수를 사용할 경우 변수의 값만 바꾸어주면 일괄 변경가능하기 때문에 편리하다.
  
  BUT, IE에서 사용하기에는 제약이 크다는 단점이 있다.

• html코드를 아래와 같이 작성하고,
  
  css코드를 아래와 같이 작성한다.
  
  위에서는 :root라는 선택자로 변수를 지정해주었는데, 여기서는 #intro안에서 지정해주었다. 이것은 #intro 안에 있는 요소에만 적용가능한 변수들이고,아래와 같이 #footer에 적용했을 때는 속성값이 적용되지않는 모습이다.
  
  즉 css파일 안의 모든 요소에 공통적으로 작성할 변수의 경우 :root로 설정하고, 아닌 경우는 id를 활용해 설정해줄 수 있다.

[어려웠던 점]

없었다.

[학습소감]

트위치에서 그냥 넘어갔던 부분을 배울수 있어서 좋았다. 오늘 배운 reset, normalize나 변수같은 경우는 실무에서도 잘 활용할 수 있을 것 같아 좋았다.