CSS - Tutorial

1) 학습한 내용

1) Reset.css

사전에 있는 모든 태그들의 기본의 속성들을 초기화한다.

이때 css파일 적용시 cascading 이 발생하는데 뒤에오는 코드가 적용되는 이특성을 살려서

Style.css 보다 reset.css를 우선으로 적용시켜야한다.

그래야 후에 style.css를 적용해도 혼동이 일어나지않는다.

2) Normalize.css

브라우저간 일관된 스타일을 보장하고 부트스트랩과 같은 도구에서도 normalize.css를 사용된다.
reset.css 보다 손이 덜간다는 장점이 있어서 실무에서 사용되는 빈도가 잦다.

:root(변수){
   --black:#18181a;
   --purple: #9147ff;
   --font-size-40: 40px;
}

h1 {
   background-color: var(--black);
   font-size: var(--font-size-40);
   color: var(--purple);
}

일괄적으로 모든 부분의 브랜드컬러가 바뀌었다고 가정했을때

직관적인 코드진행에 유용하게 활용되면서 익스플로러에서는 제약이 크게작용된다.

#intro 라는 영역안에서만 사용가능한 변수

#intro {
    --font-color: blue;
    --font-size: 50px;

}
#intro(적용됨) p{
    font-size: var(--font-size);
    color: var(--font-color);
}

#footer(적용안됨) p{
    font-size: var(--font-size);
    color: var(--font-color);

CSS - Tutorial Github 실습내용

2) 학습내용 중 어려웠던 점

없었습니다.

3) 해결방법

4) 학습소감

css변수를 배우게됨으로 훨씬 편리하고 손이 덜가게 코딩을 할 수 있을거같다.