지난 포스팅에 이어 HTML에 CSS 적용하기 2편이다.
간단한 문법적인 내용은 지난 편에서 다루었고
오늘은 CSS를 마음대로 다루기 힘들었던 경험을 토대로
CSS 적용 우선 순위에 대해 알아보겠다.
Web을 처음 공부하는 사람들은 대부분 비슷한 상황을 겪는다.
"분명 CSS를 변경했는데, 왜 페이지에 적용이 안되지?"
특히, 부트스트랩 등 외부 템플릿을 적용하고 시작하는 경우 더더욱 그렇다.
위 상황을 해결할 수 있는 방법을 소개한다.
(사실 해결 방법이라기엔 좀 그렇다. 공부가 부족한 것 뿐)
✅ 스타일 시트 우선 순위 알아보기
✅ 선택자 지정 우선 순위 알아보기
✅ 강력 새로고침 기능
스타일 시트와 선택자 지정도 모르겠다면,
지난 포스팅을 정독하고 오기 바란다.
[Web] HTML에 CSS 적용하기 - (1) / 스타일 시트 종류 / 선택자 지정하기
간만에 Web 관련 포스팅이다. HTML에 CSS를 적용하는 방법을 2번의 포스팅에 걸쳐 알아보겠다. 이번 포스팅에서는 HTML에 CSS를 적용하는 방법에 대해 간단히 알아보고, 다음 포스팅에서는 CSS가 적용
oscarstory.tistory.com
스타일 시트 우선 순위
지난 포스팅에서 CSS를 적용하는 3가지 방식을 알아보았다.
그렇다면 동일한 요소에 3가지 방식을 모두 적용하면 어떻게 될까?
<p> 태그에 다음과 같이 각각 다른 색상을 지정해 주었다.
- 외부 스타일 시트 - #FF0000 (빨강)
- 내부 스타일 시트 - #00FF00 (초록)
- 인라인 스타일 - #0000FF (파랑)
cssTest.css
.test-class {
color: #FF0000;
font-size: 5em;
text-align: center;
}
cssTest.html
<head>
<!-- 외부 스타일 시트 -->
<link href="/cssTest.css" rel="stylesheet">
<!-- 내부 스타일 시트 -->
<style>
.test-class {
color: #00FF00;
font-size: 5em;
text-align: center;
}
</style>
</head>
<body>
<!-- 인라인 스타일 -->
<p class="test-class", style="color:#0000FF; font-size: 5em; text-align: center;">
Css Test</p>
</body>
결과는 다음과 같다.
파란색이 적용되었다.
인라인 스타일이 우선 순위가 가장 높다는 것을 확인할 수 있다.
그렇다면, 인라인 스타일을 제외하고
외부 / 내부 스타일 시트 중 누가 더 우선 순위가 높을까?
외부 / 내부 스타일 시트의 경우 <head> 태그 내에 정의하는데,
코드를 작성한 순서대로 덮어쓰는 원리를 가진다.
// 내부 스타일 시트 적용됨
<head>
<!-- 외부 스타일 시트 -->
<link href="/cssTest.css" rel="stylesheet">
<!-- 내부 스타일 시트 -->
<style>
.test-class {
color: #00FF00;
font-size: 5em;
text-align: center;
}
</style>
</head>
// 외부 스타일 시트 적용됨
<head>
<!-- 내부 스타일 시트 -->
<style>
.test-class {
color: #00FF00;
font-size: 5em;
text-align: center;
}
</style>
<!-- 외부 스타일 시트 -->
<link href="/cssTest.css" rel="stylesheet">
</head>
즉, <head> 태그 내에서 마지막에 정의된 시트가 적용된다.
결론적으로, CSS 적용 우선 순위는 다음과 같다.
인라인 스타일 > 외부 / 내부 스타일 시트
만약, 본인의 HTML에 CSS가 적용이 안 된다면,
동일한 요소에 여러 스타일 시트가 적용되어 있는지 확인한 후
우선 순위를 따져보기 바란다.
선택자 지정 우선 순위
이번에는 선택자 지정 우선 순위다.
마찬가지로, 우리는 지난 포스팅에서 3가지 방식의 선택자를 공부했었다.
동일한 요소에 3가지 방식을 모두 적용해보자.
cssTest.html
<head>
<style>
/* HTML 요소 선택자 */
p {
font-size: 5em;
text-align: center;
color: #FF0000;
}
/* class 선택자 */
.test-class {
font-size: 5em;
text-align: center;
color: #0000FF;
}
/* id 선택자 */
#test-id {
font-size: 5em;
text-align: center;
color: #00FF00;
}
</style>
</head>
<body>
<p class="test-class", id="test-id">어떤 색이 나올까?</p>
</body>
1개의 <p> 태그에 3가지 방식을 적용했다.
결과는 다음과 같다.
초록색이 적용되었다.
id 선택자가 가장 우선 순위가 높다는 것을 확인할 수 있다.
이제 id 선택자를 제외하고, 남은 2개를 비교해보자.
cssTest.html
<head>
<style>
/* HTML 요소 선택자 */
p {
font-size: 5em;
text-align: center;
color: #FF0000;
}
/* class 선택자 */
.test-class {
font-size: 5em;
text-align: center;
color: #0000FF;
}
</style>
</head>
<body>
<p class="test-class">어떤 색이 나올까?</p>
</body>
결과는 다음과 같다.
파란색이 지정되었기에, class 선택자의 우선 순위가 더 높다는 것을 알 수 있다.
결론적으로, 선택자 우선 순위는 다음과 같다.
id 선택자 > class 선택자 > HTML 요소 선택자
만약, 스타일 시트도 확인했는데 CSS가 적용이 안 된다면,
동일한 요소에 여러 선택자가 적용되어 있는지 확인한 후
우선 순위를 따져보자.
강력 새로고침
간혹, 우선 순위에 지장이 없는 것을 확인했음에도 CSS가 적용이 안될 때가 있다.
(본인도 그랬다)
그럴 때는 브라우저의 캐시가 원인일 수 있다.
브라우저에서 이전에 사용하던 CSS를 캐시에 보관해서 사용하다가
해당 CSS 파일의 변화를 파악하지 못하는 경우가 생기는 것이다.
문제의 근본적인 해결 방법은 브라우저의 캐시를 삭제하고,
페이지를 새로고침 하는 방식이다.
그리고 위 2가지 기능을 버튼 하나로 간단히 수행할 수 있다.
키보드의 F12 버튼을 눌러 '개발자 도구' 가 열려 있는 상태에서
브라우저의 새로고침 버튼을 우클릭하면 해당 탭이 출력된다.
위 캡처본에서 볼 수 있듯이, 단축키는 'Ctrl + Shift + R' 이다.
Edge 에서는 '하드 새로 고침', Chrome 에서는 '강력 새로 고침' 이라는 표현을 사용한다.
(Edge도 원래 '강력' 이었는데 언제 바뀌었는지 모르겠다)
이번 포스팅으로 HTML에 CSS 적용하기를 마친다.
안 그래도 공부할 내용이 많은 Web인데,
CSS 적용하는데 많은 시간을 낭비하지 않았으면 하는 마음에 작성하게 되었다.
(본인은 낭비했기 때문에..)
'Web (웹), Server (서버)' 카테고리의 다른 글
| [Server] DataBase Transaction / 데이터베이스 트랜잭션 / 사용법 (0) | 2024.02.07 |
|---|---|
| [MySQL] Join을 사용해보자 (4) | 2024.01.17 |
| [Web] HTML에 CSS 적용하기 - (1) / 스타일 시트 종류 / 선택자 지정하기 (2) | 2024.01.15 |
| [Web] HTTP, HTTPS, HTTP2 에 대해 알아보자 (0) | 2023.05.20 |
| [MySQL] 테이블에 데이터 생성 · 읽기 · 수정 · 삭제 / 데이터 CRUD - INSERT · SELECT · UPDATE · DELETE / PRIMARY KEY, AUTO_INCREMENT 초기화 (0) | 2023.03.28 |