티스토리 뷰
CSS란 마크업 언어로된 문서들(ex. HTML, SVG, XML, XUL)을 꾸밀 때 사용이 된다고 한다...
여기서는 HTML을 기준으로 설명한다. (HTML에서만 사용해 봤기 때문....)
CSS를 사용할 때 얻을 수 있는 장점은 브라우저에 표시할 정보와 해당 정보를 꾸미기 위한 내용이 있을 때 정보와 꾸미기 위한 내용을 분리하여 관리할 수 있기 때문에 유지보수가 쉬우며 꾸미는 내용에 대한 중복을 줄여줄 수 있고 하나의 CSS로 여러 문서를 꾸밀 수 있다는 것이다.
CSS에도 단점이 있는데 잘못된 내용이 작성되어도 무시가 되기 때문에 오류를 찾는데 힘들 수 있다.
CSS가 적용되는 과정을 보면 브라우저가 우선 HTML 문서를 파싱한 후 HTML 문서에 스타일 정보(CSS)가 있으면 스타일 정보를 파싱한 후 DOM을 만들고나서 만들어진 DOM을 브라우저가 표시한다.
* DOM(Document Object Model)을 간단하게 설명하면 HTML의 태그들을 트리 형식의 노드로 만들고 해당 노드를 가지고 문서를 조작할 수 있는 방법을 제공한다.
CSS를 HTML에 적용하는 방법은 세 가지가 있다.
1. 외부 스타일 : <link rel="stylesheet" href=""> 를 사용하여 CSS 파일을 불러오는 방법
2. 내부 스타일 : <style>...</style> 를 사용하여 해당 문서에 작성하는 방법
3. 인라인 스타일 : <body>, <p>, <h1>, ... 등의 태그에 style="..." 속성을 넣는 방법
이렇게 여러가지 방법을 다 같이 사용할 수도 있는데 이 때 우선순위는 "인라인 스타일" > "내부 스타일" = "외부 스타일" > "브라우저의 기본값" 순이다. (> 앞에 있는게 적용된다.) "내부 스타일"과 "외부 스타일"은 나중에 작성한 스타일이 적용된다.
<css.css>
p {
background-color: black;
}위와 같은 css 파일이 있고
<index.html>
<style>
p {
background-color: red;
}
</style>
<LINK rel="stylesheet" href="css.css">
<p> P Tag </p>index.html을 위와 같이 작성하였다면 P 태그는 검은 배경을 가질 것이고
결과 : P Tag
index.html을 아래와 같이 수정하면
<index.html>
<LINK rel="stylesheet" href="css.css">
<style>
p {
background-color: red;
}
</style>
<p> P Tag </p>P 태그는 빨간 배경을 가질 것이다.
결과 : P Tag
CSS의 문법을 보면 필요한 내용이 세 가지가 있다.
1. 선택자
2. 속성
3. 값
body { background-color : black }
위 CSS에서 "body"는 태그를 통해서 선택하는 선택자이고 "background-color"는 변경하고자하는 속성이고 "black"은 속성이 가지는 값을 바꾸는 것이다. 즉 해석하면 "body 태그의 배경 색상을 검은색으로 변경한다." 라는 것이다.
{} 블럭 안에는 여러개의 "속성 : 값"을 담을 수 있는데 여러 줄의 "속성 : 값"을 담을 때는 ";(세미콜론)" 을 붙여주어야 한다. 세미콜론을 붙여주는 이유는 각각의 "속성 : 값"을 구분하기 위한 조치로 마지막 "속성 : 값"이나 하나의 "속성 : 값"만 있다면 세미콜론은 생략해도 된다. 만약 중간에 세미콜론을 생략하게되면 CSS는 동작하지 않는다.
선택자에도 아래와 같은 여러가지 종류가 있다.
1. 태그 : p {}
2. 아이디 : #p {}
3. 클래스 : .P {}
4. 태그의 속성 : [attr]
5. 자식 : body > p
6 .... 등등.....
아래의 내용도 마찬가지로 선택자이다. 따로 작성한 이유는 선택자를 나열하는 방식으로 만들어지는 선택자라고 생각되기 때문이다.
1. div div {} : div 태그 안에 있는 div 태그에 CSS를 적용한다는 뜻한다.
2. div.class {} : div 태그 중 class라는 값을 가지는 클래스 속성을 가진 태그에 적용한다는 뜻한다.(띄어쓰기 없이 붙여쓰는 것이다.)
3. div, p {} : div 태그와 p 태그 둘 모두에 적용한다는 뜻이다.
선택자에도 우선순위가 있는데 "아이디" > "태그의 속성" > "클래스" > "자식" > "태그" 순이다. (> 앞에 있는게 적용된다.)
만약 위에 작성한 우선순위를 무시하고 값을 추가하고 싶다면 값에 !important를 추가하여 사용하면 된다.
하나 더 선택자의 우선순위와 HTML에 CSS가 적용되는 방법에 대한 우선순위 중에서 우선순위를 정하자면 "인라인 스타일"이 제일 최우선으로 적용된다는 것이다.
css 선택자에 대해서 더 알고 싶다면 https://www.w3schools.com/cssref/css_selectors.asp에서 보면 된다.
추가로 CSS에서도 "// 주석" , "/* 주석 */"로 주석을 달 수 있다.
[참조]
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works
'web > css' 카테고리의 다른 글
| [CSS + Chrome] font size 최소 크기 & 우회하기 (0) | 2022.02.27 |
|---|---|
| [CSS] font size 속성 비교(px, em, rem, pt, %, vw, vh, 속성 값) (0) | 2022.02.26 |
| [CSS] Element가 position: fixed로 고정되지 않는 문제 (0) | 2019.09.26 |
| Sass(Syntactically Awesome Stylesheets) (0) | 2018.01.13 |
| CSS FlexBox (0) | 2018.01.01 |