간단한 요약

오늘은 css와 관련한 팁들 위주로 공부했다.

---

배운 내용

1. reset css

• 여기 meyerweb에서 한번에 css를 reset하도록 미리 정의해둔 코드를 쉽게 복사/붙이기로 이용 가능하다.
• 간편하게 이용하기 위해선, 아래처럼 내가 제작하는 css 파일들의 가장 위쪽에 link태그를 사용해 불러두면 cascading으로 편하게 적용 가능하다.

<link
      rel="stylesheet"
      href="reset.css
    "
    />
    <link rel="stylesheet" href="style.css" />

2. normalize css

• 전반적인 스타일을 완전히 제거하는 reset css와는 다르게 일정한 디자인이 적용된 상태의 css 파일이다.
• 사용하는 이유는 브라우저 간의 존재하는 스타일의 오차와 스타일 적용에서 발생가능한 버그의 최소화를 목적으로 한다.

3. reset vs normalize

• 취향에 맞게 선택하여 사용하면 됨. 또는 직접 본인이 default 스타일을 제거하면서 사용해도 상관없음
• 실무에선 normalize 방식이 조금 더 사용되는 편이라고 함.

4. css 내 변수 사용

4-1. 글로벌 변수 사용 :root

• 아래와 같이 :root {}에서 사용하려는 변수를 설정해둘 수 있다.
• 형식은 --name: ; 이런 식이다.
• 설정한 변수를 사용하기 위해선 var(설정한 변수); 이런 식으로 사용 가능하다.

:root {
  --black: #18181a;
  --font-color: #9147ff;
  --font-size-40: 40px;
}
h1 {
  background: var(--black);
  font-size: var(--font-size-40);
  color: var(--purple);
}

• 사용하는 이유: 명료한 변수 이름을 사용하여 직관적, 유지/보수에 유리
• 다만, 익스플로러에서는 사용이 제한된다.

4-2. 특정 요소만 사용

• 아래와 같이 원하는 요소/영역에서만 적용되는 변수를 설정 가능

#intro {
  --naver: #04cf5c;
  --header-size: 50px;
}
#intro p {
  background: var(--naver);
  font-size: var(header-size);
}
#footer p {
  background: var(--naver);
  font-size: var(header-size);
}

• 위의 예에서 intro p요소에만 스타일이 적용됨
• 즉 :root의 영역은 global이기에 해당 css 파일 내 전부 적용이 됨

---

어려웠던 내용

• 어렵지는 않았지만 css내 변수사용에 대해서 처음 배워 아주 유용한 수업이었다.
• 앞으로 내가 만들 코드에 적용을 시켜봐야겠다.

---

나의 코드

github에 고스란히 업로드가 되었다.