CSS는 HTML에 style을 더할 때 사용한다. 다음과 같은 형식이다.
selector or selector list {
CSS declarations (= property: value;)
}
예를 들면 다음과 같다.
p, h1, h2 {
background: black;
color: white;
}
이를 HTML에 적용하는 방법은 여러가지가 있다.
- HTML tag의 style attribute를 이용하는 방법. 예를 들면, <h1 style=”color: red;”>…</h1>
-
<head>나 <body> 태그 내에 <style> 태그를 추가하는 방법. head안에 넣는 게 더 빠르다.
-
<link>를 통해 외부 리소스로부터 적용하는 방법. 예를 들면, <link href=”styles/mystyle.css” rel=”stylesheet”>. 가장 추천.
CSSOM (CSS Object Model)은 HTML DOM과 비슷하게 style에 대한 in-memory representation이다.
javascript로 HTML DOM을 접근할 때 다음과 같은 코드를 사용해서 DOM element의 style property를 access할 수 있다.
const contentElement = document.querySelector(‘.content’);
contentElement.style.fontWeight = ‘bold’;
비슷하게 CSSOM은 window object의 getComputedStyle 메소드로 access할 수 있다.
const contentElement = document.querySeletor(‘.content’);
window.getComputedStyle(contentElement);
이건 contentElement class attribute로 그 element의 read-only computed style을 return한다.
CSS로 HTML 문서의 element를 지정하고자 할 때 selector를 사용한다.
3가지 일반적인 selector가 있다.
- Element type: 예를 들면, 모든 그 HTML 문서 내의 p element를 select하고자 한다면 CSS ruleset에 p selector를 쓴다.
-
class attribute: . 으로 시작하는 class selector. <h1 class=”heading”>Heading</h1> 을 select하고 싶다면, .heading selector를 쓴다.
-
id attribute: # 으로 시작하는 id selector. <div id=”dasomoli”> <!– login content –> </div> 라면, #dasomoli를 쓴다.
모든 element를 선택하고 싶으면 Universal Selector (*)를 쓴다. 다음과 같은 예제는 html에 값을 셋팅하고, 모든 자식 element들에 이를 inherit한다.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Attribute selector를 사용하면 attribute가 있는지 또는 attribute 값에 따라서 select할 수 있다. 대괄호([, ])를 쓴다.
- [attribute]: 그 attribute가 있는 모든 element를 select한다. [href]는 href attribute가 있는 모든 element를 select한다.
-
[attribute=value]: attribute값이 value인 모든 element를 select한다. [lang=”en”] 은 lang attribute가 en인 모든 element를 select한다.
-
[attribute^=value]: attribute 값이 value로 시작하는 모든 element를 select한다. [href^=”https://] 는 href attribute가 https:// 로 시작하는 모든 element를 select한다.
-
[attribute$=value]: attribute 값이 value로 끝나는 모든 element를 select한다. [href$=”.com”] 은 href attribute가 .com으로 끝나는 모든 element를 select한다.
-
[attribute=value]: attribute 값 안에 value가 들어간 모든 element를 select한다. [href=”co.kr”] 은 href attribute가 co.kr과 들어간 모든 element를 select한다.
Pseudo-class는 특정 상태에 있는 element를 select한다. :keyword 같은 형식으로 쓴다. 대단히 많은 pseudo-class가 있는데, 대부분의 개발자들은 link를 styling할 때 처음 본다. link는 여러 상태를 갖는다.
- href를 갖는 link는 :link pseudo-class를 갖는다.
-
사용자가 link에 마우스를 올렸을 때, :hover pseudo-class가 적용된다.
-
가 본 link일 때, :visited pseudo-class가 적용된다.
-
click될 때, :active pseudo-class가 적용된다.
예를 들면,
a:link, a:visited: {
color: blue;
text-decoration: none;
}
a:hover, a:active {
color: red;
text-decoration: dashed underline;
}
순서에 주의해야 하는데, 위의 순서를 바꾸면 hover 효과를 볼 수 없다. love-hate로 외우면 쉽다.
다른 유용한 pseudo-class로 :checked, :disabled, :focus가 있다.
중첩된 자식들의 패턴을 select할 때 도움이 되는 pseudo-class가 있다. :first-child, :last-child, :nth-child, :nth-last-child, :first-of-type, :last-of-type, :nth-of-type, :nth-last-of-type 등등.
예를 들어, 다음과 같이 하면 3줄마다 반복되는 패턴을 만들 수 있다.
li {
display: block;
padding: 16px;
}
li:nth-child(3n-1) {
background: deepskyblue;
color: white;
font-weight: bold;
}
li:nth-child(3n) {
background: skyblue;
color: white;
font-weight: bold;
}
위의 예제에서 3n-1 대신 odd 나 even 같은 keyword를 사용할 수도 있다.
element의 일부를 select하고 싶을 때는 Pseudo-element를 쓴다. ::keyword 형식으로 쓴다.
::first-letter, ::first-line, ::selection, ::backdrop 등등.
위에서 설명한 여러 방법을 합쳐서 사용하면 더 강력하다. 예를 들면, primary class인 li element를 select하고 싶다면, li.primary를 쓰면 된다.
- ul element의 자식인 모든 li element를 select하고 싶으면. ul li
-
primary class인 ul element의 direct children인 모든 li를 select하고 싶으면, ul.primary > li
-
selected class인 li element의 다음 sibling을 select하고 싶으면, li.selected + li
-
selected class인 li element의 모든 다음 sibling들을 select하고 싶으면, li.selected ~ li
li.selected + li 는 다음 하나만, li.selected ~ li 는 다음부터 전부 다인 것을 주의하라.
CSS specificity는 어느 style이 적용될지를 결정하는 factor이다. 태그에 style attribute로 적용되는 inline style은 가장 높은 specificity 값을 갖는다. 그 다음이 ID selector, 그 다음이 class selector나 attribute selector, 그리고 다음이 element type이다. 일반적으로 이를 표현하는 방법이 ,로 나눈 integer list로 많이 표현한다. inline style은 1, 0, 0, 0이다. id selector는 0, 1, 0, 0. class selector나 attribute selector는 0, 0, 1, 0. h1 같은 element selector는 0, 0, 0, 1이 된다.
예를 들면, li,selected a[href] 는 2 element selectors(li, a), 하나의 class selector(.selected)와 하나의 attribute selector([herf])를 갖으므로, 0, 0, 2, 2가 된다.
다른 예로 #newItem #mainHeading span.smallPrint는 두 ID selector, 하나의 class selector(.smallPrint), 하나의 span element를 갖으므로, 0, 2, 1, 1이 된다.
위의 둘을 비교하면, 두번째 것이 첫번째 것보다 더 specific하다.
그런데 여기에 !important 를 쓰면 가장 우선한다. 위의 표현 방법에 따르면 1, 0, 0, 0, 0이 된다. inline보다 더 우선한다.
예를 들면, 다음과 같은 걸 보자.
<style>
div.media {
display: block;
width: 100%;
float: left;
}
.hide {
display: none;
}
</style>
<div class=”media hide”> 어쩌고 저쩌고 </div>
여기서 div는 media와 hide 둘 중 어느 것이 적용될까. div.media는 0, 0, 1, 1 이다. .hide는 0, 0, 1, 0이다. 따라서 .hide의 display: none을 div.media의 display: block이 override한다. .hide는 적용이 안된다. 이럴 때 아래처럼 하면 된다.
.hide {
display: none !important;
}