inline styles 그리고 !important
CSS로 스타일링을 하는 방법에는 크게 3가지가 있습니다. 별도의 CSS파일을 만들어서 html 문서에 <link>태그를 사용해서 불러다가 사용하는 방법이 가장 일반적이고, html 문서의 head 태그 안에다가 <style> 태그를 이용해서 직접 작성하는 방법도 간간히 사용되고, 태그가 적용되는 라인에 같이 사용하는(inline) 방법도 존재합니다.
가장 강력한 것, 즉 가장 우선 순위가 높은 방법은 인라인으로 스타일을 적용하는 방법이긴 한데, 실무에서는 가장 최후에 사용하는 방법으로 자리잡고 있습니다. 왜냐하면, 스타일을 유지보수 해야하는 경우라면 웹문서를 직접 열어야 해서 가장 번거롭기 때문이죠.
그리고 웹문서를 위한 코딩은 시멘틱(semantic) 하게 작성되는 것을 표준으로 하기 때문에, 골격을 이루는 HTML 태그들과 스타일링을 하는 CSS 태그들은 서로 분리가 되는 것을 원칙으로 하기 때문이기도 합니다.
그렇다고 인라인 스타일 적용을 전~혀 사용하지 않을 수는 없을 겁니다.
간단하게 예제를 만들어서 이 참에 잘 알아두고 앞으로 잘 안 써보기로(?) 해봅시다.
사용예제 HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kincoding</title>
</head>
<body>
<h1>Hello 즐코딩</h1>
</body>
</html>
외부 CSS 파일을 링크하는 방식
h1요소를 파랗게 만들기 위해, CSS 파일을 하나 별도로 생성합니다. myStyle.css 파일로 저장했습니다.
h1 {
color: dodgerblue;
}
그리고 html 문서의 <head>영역에서 <link> 태그를 사용해서 불러들입니다.
끝입니다. 간단하죠? 이렇게 별도의 css 파일을 만들어서 적용하는 것이 웹문서를 만들 때 가장 일반적인 사용방식입니다.
<head>태그 안에서 사용하는 방식
별도로 만들었던 태그의 내용을 그대로 활용해서, 웹문서 상단에 <style> 태그를 이용해서 적용해줄 수 있습니다.
잘 적용이 되었습니다. 일반적으로 <head> 태그 사이에 작성하지만 사실 문서의 중간 아무 곳에나 작성을 해도 가능하긴 합니다만, 관리효율 목적에 의해 관습적으로 상단 헤드 안에서 작성을 하는 것이 보편적인 약속입니다.
css 파일을 직접 만들어서 링크하는 것과 다른 점은 <style> 태그를 이용한다는 점입니다. 그리고 스타일을 적용하는 우선순위는 css 파일을 불러들이는 것보다 우선합니다. 다시 말해, <link>로 css를 불러왔다고 하더라도 웹문서 안에서 같은 엘리먼트에 대해서 다시 스타일을 적용하면 그것이 우선한다는 것입니다. 쉽죠?
inline으로 스타일을 적용하는 방식
인라인 방식으로 스타일을 적용하는 방법은 다음과 같습니다.
수 많은 현업의 사람들이 귀차니즘 때문에 이와 같은 방식으로 후다닥 처리하곤 하는데요, 종종 이러다가 나중에 더 큰 곤란에 당면하기도 합니다.
한편 인라인 스타일 방식은 엘리먼트 요소에 직접 스타일을 적용하기 때문에, CSS의 적용 우선순위가 이상의 3가지 방법 중에서 가장 높습니다. 하다못해 ID 선택자보다도 우선합니다. 싹~ 다 무시하고 내가 최우선이야. 뭐 그런 느낌이죠. 어떻게 보면 갑질의 제왕?
그래서 인라인으로 스타일을 적용하는 방식은 사실, 남이 만들어 놓은 복잡한 웹문서를 잠깐 들어가서 수정할 때 주로 활용되곤 합니다. 인라인 방식을 사용하는 사람은 좋은데, 나중에 그걸 발견하는 사람은 입에서 욕이 나오곤 합니다.^^;
한편 인라인 방식의 스타일링은 적용하는 스타일 속성이 많아질수록, 코드 가독성이 매우 안좋아진다는 단점도 가지고 있습니다. 그래서 여러 모로 잘 사용하지 않는 스타일링 방법이기도 합니다.
!important
important. 영어 단어의 의미는 '중요한'이라는 뜻이죠. 매우 중요합니다.
남발하지 않는 게 매우 중요합니다. 참 역설적이죠?
느낌표도 하나 제일 앞쪽에 빡! 찍어줍니다. 그러다보니 진짜 뭔가 되게 중요해보이는 것도 같습니다.
이게 뭔지 아는 건 정말 중요합니다. 그리고 잘 사용하지 않는 게 더욱 중요합니다.^^;
!important 규칙은 개별 스타일 지정에 사용할 수 있는 선택자입니다. 쓰는 건 권장되지 않지만, 효과적으로 사용할 수도 있으니 이 또한 양면의 날이라고도 볼 수 있겠습니다. 사용하는 사람은 편하고, 사용한 것을 확인해서 다시 수정해야 하는 사람에게는 지뢰가 되어주기에 충분하니까요.
아래처럼 <head>에서도 CSS를 적용해주었고, 인라인 방식으로도 태그에 직접 스타일을 주었습니다. 글자색은 어떤 색상으로 적용이 될까요?
앞에서도 언급했지만, 인라인 방식의 스타일링은 ID선택자보다도 우선합니다. 무조건 최우선입니다. 그러다보니, 위의 예제에서는 글자색은 인라인 방식으로 CSS를 적용했기 때문에 글자색상은 연두색이 됩니다.
이때, !important를 이렇게 붙여 본다면 결과는 달라지게 됩니다.
무사통과 VIP Pass 같은 느낌이 드는 속성입니다.
제일 우선 순위가 작은 CSS 파일을 Link 하는 경우에도 동일하게 최우선 순위를 갖습니다.
이렇듯 !import는 다른 어떤 지시보다도 최우선 하 매우 명시적인 속성입니다. 모든 우선권을 뛰어 넘는 예외 사항 같은 것이죠. 그래서 CSS 시스템을 잘 잡아두었다 하더라도 모든 게 무시되므로 사용할 때는 매우 유의를 해야 합니다.
하지만 간혹 외부 라이브러리를 불러다 사용하는 경우에서는 요긴하게 사용될 수도 있겠습니다. 그 복잡한 라이브러리를 파헤쳐 보지 않더라도 원하는 대로 후딱 취소하고 내가 원하는 스타일을 적용할 수 있으니까요.
마치며
CSS를 인라인 방식으로 적용하는 것과, !important를 사용하는 방법은 다른듯 비슷하게 닮은 구석도 있는 것 같습니다. 저 보고 둘 중에 어떤 것을 더, 더, 더 사용하지 않는 게 좋다고 물어보신다면, 저는 인라인 방식이라고 하겠습니다.
아무래도 CSS는 한 곳에 모아 놓고 관리하는 것이 유지보수 관리 차원에서 유리할 테니까요.
잘, 알아두도 잘 사용하지 않을 두 가지 이슈에 대해서 살펴보는 시간을 가졌습니다.
끝내고 나도 뭔가 역설적인 시간이었다는 느낌 만큼은 지울수가 없는 것 같습니다.^^;
즐거운 코딩생활, 즐코딩
KINcoding
'HTML+CSS' 카테고리의 다른 글
| [실무꿀팁] 반응형으로 백그라운드 이미지 넣기 1초컷 - Part 2 (0) | 2023.02.04 |
|---|---|
| 웹문서에 구글 폰트(Google Fonts) 적용하기 (0) | 2023.01.31 |
| CSS 상속(Inheritance)에 대하여 (0) | 2023.01.21 |
| 부트스트랩에서 integrity와 crossorigin은 무엇일까? (0) | 2023.01.20 |
| CSS 선택자 part. 2 - 인접 선택자, 직계자손 선택자, 속성 선택자 (0) | 2023.01.19 |
댓글