CSS 상속
부모 요소에 스타일을 적용하면, 자식 요소에 같은 요소가 부여 되는 것을 말함
/* 폰트 관련 속성은 기본적으로 자식요소에 상속 됨*/
.class{
color : white;
font-size : 14px;
}
/* 부모의 속성을 강제로 상속 받는 inherit*/
.class{
position : inherit;
}CSS 우선 순위
한 요소에 여러 스타일을 적용했을 경우, 가장 높은 점수를 가진 스타일이 적용됨
/* 가장 최우선 순위 important */
.class{
color : white !important;
}
/* HTML에서 CSS를 부여하는 인라인 방식 1000점 */
/* ID 선택자 100점 */
#id{
color : white;
}
/* class 선택자 10점 */
.class{
color : white;
}
/* tag 선택자 1점 */
ul{
color : white;
}
/* 전체 선택자 0점 */
*{
color : white;
}
/* 상속자 무효 */
body{
color : white;
}
Reset CSS
원하는 스타일을 명확하게 지정할 수 있도록, 브라우저에서 기본적으로 제공하는 스타일을 초기화한다.
아래 사이트에서 min 스타일을 복사하여 사용한다.
초기화는 컴퓨터가 코드를 읽는 순서를 고려하여, CSS 관련 코드 중 가장 상단에 배치한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 포멧 설명</title>
<meta name="author" content="rosa.kim">
<meta name="description" content="rosa.kim's test">
<meta name="viewport" content="width=device-width, initial-scal=1.0">
<!--Reset CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>
</script>
</head>
<body>
<p>이 부분에 구조를 작성해보자</p>
</body>
</html>
#reset CSS 다운로드 사이트
www.jsdelivr.com/package/npm/reset-css
jsDelivr - A free, fast, and reliable CDN for Open Source
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.
www.jsdelivr.com
'달밤에 코딩하기 > HTML CSS 공부하기' 카테고리의 다른 글
| #18 - CSS 기초 - 폰트 (0) | 2021.05.13 |
|---|---|
| #17 - CSS 기초 - 단위 / 속성 기본 (0) | 2021.05.13 |
| #15 - CSS 기초 - 선택자 (0) | 2021.05.13 |
| #14 - CSS 기초 - 불러오기 (0) | 2021.05.13 |
| #13 - 속성 / 특수기호 (0) | 2021.05.13 |
