[1] 강의
웹 프로그래밍(풀스택)
3. CSS - FE
2) 상속과 우선순위 결정-2
[2] 개념 정리
<head>
<style>div { color:red; }</style>
<link rel="stylesheet" href="css.css">
</head>만약 css.css에서 div color를 blue로 주었다면, 뒤에 선언된 external방식의 css내용이 반영됩니다. 따라서 blue색깔로 나오겠죠.
즉 internal과 external은 같은 우선순위로 결정된다고 아셔야 합니다.
CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 잘 기억해야 합니다.
<div id="a" class="b">
text....
</div>#a{
color : red;
}
.b{
color : blue;
}
div{
color : green;
}위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가집니다.
id는 클래스보다 우선되고 클래스는 엘리먼트보다 우선됩니다.
위 코드에서는 id인 a의 색상이 적용되게 됩니다.
CSS의 이런 성질을 캐스캐이딩이라고 합니다.
선언방식에 따른 차이
같은 선택자(selector)라면 나중에 선언한 것이 반영됩니다.
선택자의 표현이 구체적인 것이 있다면 먼저 적용됩니다.
body > span (O)
span (X)
ID > CLASS > ELEMENT 순으로 반영
만약 h1태그가 div > p > h1 구조로 HTML으로 짜여있다고 가정하면, 아래에 색깔 중 h1이 가진 색깔은 어떤 것일까요?
여러분들이 실험을 통해서 그 결과를 확인해보세요.
jsbin과 유사한 사이트 하나 더 알려드릴게요.
이번에는 codepen.io 라는 사이트를 이용해서 테스트해보세요.
[3] 강의 정리
이번 시간에는 cascading에 대해서 알아보겠다. CSS는 여러 가지 스타일 정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 반영된다. 경쟁이 무엇일까. A, B라는 속성이 싸워서 A가 되나 B가 되나 이거가 아니고 똑같은 속성을 파일에도 CSS파일에서 설정을 정의를 해놨거나 아니면 inline으로 또 정의를 해놨꺼나 이렇게 중복일 수 있다. 그리고 다른 셀렉터를 썼지만 결국에는 같은 노드를 가리키는 것이다. div 안에 p를 넣을 수 있고 div 하위에 p. 근데 결국 그게 두개가 같은 노드를 가리키는 것일 수 있다. 그리면 어떤 걸 기준으로 스타일을 최종적으로 반영을 할까. 그건 브라우저가 하는 일이다.
하지만 규칙을 만들어놔서 개발자들이 그 규칙에 따라서 개발하면 브라우저가 처리할 수 있도록 미리 규칙을 우리가 확인해 볼 필요가 있다. 그걸 알아본다. 그런 것들을 cascading이라고 한다. 선언 방식에 따라 차이가 있다. inline, internal, external 즉 HTML 안에 속성으로 넣은 것이다. style 또 HTML head 태그 사이에 style이라는 것을 넣는 방식. 또 external은 외부 CSS 파일 같은 속성을 넣었을 때는 inline에 잇는 게 먼저 적용된다. 그리고 마지막에 외부 CSS에 있는 파일이 적용된다. 이런 코드가 있다. span { color : red } , span { color : blue; } 라고 똑같이 해놨다. span은 같은 노드를 가리킨다. 그럴 때는 어떤 것이 최종적으로 적용될까 동일하면 나중 것이 적용이 된다. 나중에 red가 적용되는 경우인데 왜 red인가. 셀렉터를 보면 body 하위에 span. 그냥 span 이 차이가 있다. 좀더 구체적으로 표현이 되어 있다. 그럴 때는 더 구체적으로 표현된 것에 우선해서 적용을 하게 되어있다.
이게 몇 가지 규칙이 더 구체적으로 있다. 구체적으로 표현하면 점수를 더 준다. 너는 body, 앨리먼트 두 개가 선언됐구나 2점, 너는 하나, 1점. 2점이 높다. 그러면 2점이 적용된다. 이런 규칙이 있다. 구체적인 것이 있다면 그것이 먼저 적용된다. 이게 하나의 룰이다. 그 다음에 이 코드를 보면 div id, class가 a, b 각각 설정되어 있는 텍스트를 하나 가지고 있는 어떤 div 노드이다. #a, b 얘가 가리키는 거는 사실은 얘다. 그리고 얘가 가리키고 있는 것도 얘다. 결국 같은 노드를 가리키고 있는 것이다. 위에 얘랑 얘는 같은 것들을 가리키고 있는데.
얘는 red이고 얘는 blue다. 근데 결과는 red가 나왔다. id 값에는 더 높은 점수를 준다. 너는 id를 썼구나. 너는 100점 너는 class를 썼네. 너는 10점. 100점이 더 높으니 이게 적용된다. 이런 규칙이 있다. 점수까지는 모르더라도 d가 class보다 우선된다. class는 element보다 우선된다. 예를 들어서 엘레먼트는 이것이다. div. 이게 가장 낮을 것이다. color : green; 이렇게 했을 때. 이 값이 가장 낮고 이게 가장 높다. 이걸 조금더 자세히 보려면 구글에서 검색을 해야 한다. specificity를 찾아서 살펴보면 된다. 그걸 찾아보면 id는 100wja, class는 10점, element는 1점 이런 게 있다. 그래서 그걸 다 더해가지고 누가 가장 높나 비교를 하게 되어 있다. CSS는 이런 성질을 cascading이라고 한다. 그래서 각각의 여러가지 설정이 되어 있을 때 어떤 것이 우선해서 적용이 된다. 그런 것들을 좀 살펴봤다.
'강의 > 웹 프로그래밍(풀스택)' 카테고리의 다른 글
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-4 강의 정리 (0) | 2022.03.28 |
|---|---|
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-3 강의 정리 (0) | 2022.03.28 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 (0) | 2022.03.24 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-1 강의 정리 (0) | 2022.03.24 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-4 강의 정리 (0) | 2022.03.23 |