2021.08. 25 CSS 🌴

hae.log·2021년 8월 25일

📒 캐스캐이딩 (cascading)

✔ 동일한 선택자에 동일한 속성을 작성했을때 나중에 작성된 코드가 우선순위를 가지게 되는 속성

h1 {
	color: red;
}

h1 {
	color: grey;
}

📌 이때 h1의 color은 grey로 적용된다

📒 reset css

✔ 사이트를 만들때마다 기존 html 태그에 디폴트 값으로 css코드가 브라우저 마다 다르게 적용되는데 이때, 디폴트 값으로 갖고있는 모든 css를 모두 초기화 시켜주는 코드

🔍 코드 볼수있는 사이트

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

💡 reset css 코드를 html에 link태그로 연결해주고 css작업에 들어가야함!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS 추가 설명</title>

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

👉style.css로 적용된다.

</head>
<body>


	<h1>Hello World</h1>
	<h2>Hello World</h2>
	<h3>Hello World</h3>
	<h4>Hello World</h4>
	<h5>Hello World</h5>
	<h6>Hello World</h6>



</body>
</html>

브라우저 기본 css코드가 먼저 불러와지고 그다음 reset css 코드가 나오고 마지막에 우리가 적용했던 css style가 적용된다.

🔥 reset css와 기존 css파일에도 케스케이딩이 존재한다.

✍기본 초기화 작업

✍기본 초기화 css

✍ reset css

📒 normalize css

✔ 브라우저마다 기본 css 디자인이 다른데 각각의 브라우저 간의 css디자인의 오차를 줄이고, 버그를 줄이는 방향으로 스타일을 재정의할때 사용

🔍 코드 볼수있는 사이트

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

📌 reset은 완전 초기화 nomalize는 reset과 다르게 디자인이 적용되어있고 기존 브라우저마다 미리 작성된 css 코드에 normalize가 다시 재정의 함으로써 디자인의 오차를 줄이는 데 사용

실제 실무에서는 nomalize의 사용빈도가 더 높지만 각자의 취향차

✍ normalize css

📒 css변수(자바스크립트에 자주 등장)

✔변수를 생성하고 변수의 이름을 부여하고 변수의 값을 넣을수도 있다.

🔍 Root


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

:root {
	 --변수: 속성값(=데이터)  
}

🔍 Var

👉 변수활용할때 var(변수명) <--(변수명넣기)

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

<예시>

:root {
	--black: #18181a;
	--purple: #9147ff;
	--font-size-40: 40px;

	
}



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

🔥 결과값

🚀 변수사용범위 제한두기

#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);
}