# CSS의 정의와 selector를 알아보고, 기본적인 css 사용법을 알아보도록 하겠습니다.
# CSS: Cascading Style Sheet
# 비전공자가 이해한 CSS
1. CSS란 ?
CSS는 Cascading Style Sheet의 약어입니다. Markup language가 실제 표시되는 방법을 기술하는 언어로, HTML과 XTML에 주로 쓰입니다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높습니다.
1) Cascading Style Sheet
CSS의 "Style Sheet"는 Web Browser에서 사용되는 스타일을 정의한 문서를 이야기합니다.
"Cascading"은 사전적으로는 "연속"이라는 의미를 갖고 있습니다. 즉, 세부적으로 정의된 스타일이 있다면 정의된 내용을 사용하고, 정의된 스타일이 없다면 "연속한" 다른 곳에서 정의된 값을 불러와 사용한다는 뜻입니다.
"연속한" 곳들은 우선순위가 정해져 있습니다.
Author style > User style > browser
Author Style : CSS 파일 등 제작자가 정의한 스타일을 의미합니다.
User Style : Naver의 Dark mode, 글자 크기, 폰트 설정 등 사용자가 지정한 스타일을 의미합니다.
browser : browser에서 기본적으로 지정한 스타일을 의미합니다.
제작자가 정의한 CSS 파일을 먼저 확인하고, 사용자가 지정한 스타일을 확인 후 정의된 내용이 없으면 browser에서 정의된 내용을 사용합니다. 뿐만 아니라 CSS 파일 내에서도 tag, id, class 등에 따라 세부적으로 스타일을 지정해 우선 적용될 부분을 정할 수 있습니다.
2) 선택자(selectors)
"선택자"란 말 그대로 선택해주는 요소입니다. 특정 요소들을 선택해 스타일을 적용할 수 있도록 돕습니다.
선택자를 선언하는 구조는 다음과 같습니다.
3) 선택자의 종류
다음 html에 적용하는 css는 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<h1 id=special>Hello</h1>
<button>Button 1</button>
<button>Button 2</button>
<div class="red"></div>
<div class="blue"></div>
<a href="naver.com">Naver</a>
<a href="googlenaver.com">Google</a>
<a>Empty</a>
</body>
</html>
(1) Universal * : 모든 태그들을 선택
* {
color:green;
}
(2) type Tag : 태그를 선택
li {
color: blue;
}
(3) ID #id : id를 선택
#special {
color: pink;
}
* 태그가 li인 값 중 id가 special인 값만을 적용하고 싶은 경우는 아래와 같이 작성하면 됩니다.
li#special {
color: pink;
}
(4) Class .class : class를 선택
.red {
width: 100px;
height: 100px;
background: yellow;
}
(5) State : : 상태를 선택("hover"는 "마우스가 올라온 상태"를 의미)
button:hover {
color: red;
background: beige;
}
(6) Attribute [] : 해당 속성 값만을 선택
/* link가 있는 값 전부 */
a[href] {
color: purple;
}
/* link가 "naver.com"인 값 전부 */
a[href="naver.com"] {
color: purple;
}
/* link가 "naver"로 시작하는 값 전부 */
a[href^="naver"] {
color: red;
}
/* link가 ".com"으로 끝나는 값 전부 */
a[href$=".com"] {
color: red;
}
# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
- 위 유튜브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# CSS reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
# CSS reference: https://www.w3schools.com/cssref/
# CSS 작성 연습 사이트: Jsbin.com
'FrontEnd > CSS' 카테고리의 다른 글
| #6. CSS Reset 사용방법 (0) | 2021.11.02 |
|---|---|
| #5. CSS에서 색깔을 변수로 사용하는 방법 (0) | 2021.07.27 |
| #4. CSS FlexBox(Flexible Box module) 사용법 (0) | 2021.07.23 |
| #3. CSS "100%" vs "100vh" 의 차이점 (0) | 2021.07.22 |
| #2. CSS display 와 position 이해하기 ! (0) | 2021.07.20 |
