1) CSS
Cascading Style Sheets
:Style sheet는 스타일링의 문서입니다.
-
Author style: 개발자가 정의하는 것
-
User style: 사용자가 결정하는 것 (ex. dark mode)
-
Browser: 기본 style sheet를 정의
-
스타일 적용 우선 순위: Author > User > Browser
Author -> User -> Browser 순으로 Cascading 된다. -
!important: (다른 우선 순위를 무시하고) 이미 정의된 특정 속성을 재정의한다. 하지만 가능한 사용하지 않는 것이 좋다.
p{
color: red !important;
}
#thing{
color: green;
}<p id="thing">will be RED.</p>2) Selector
| Selector | Example | |
|---|---|---|
| Universal | * | * { box-sizing : border-box; } |
| Type | tag | li { list-style : none; } |
| ID | #id_name | #home { margin: auto; } |
| Class | .class_name | .btn { border-radius : 3px; } |
| State | : | button : hover { color : red; } |
| Attribute | [ ] | a [ href="naver.com" ] { color : purple; } |
- Child Selector (A>B)
부모 바로 안에 있는 child 요소를 선택한다.
- Selector Expression Example
모든 표현을 보고 싶다면, 이곳을 클릭하세요.
a[href]{
color: purple;
}
// href 속성을 가진 모든 a 태그
a[href="naver.com"]{
color: purple;
}
// href 속성값이 "naver.com"인 모든 a 태그
a[href^="naver"]{
color: purple;
}
// href 속성값이 "naver"로 시작하는 모든 a 태그
a[href$=".com"]{
color: purple;
}
// href 속성값이 ".com"으로 끝나는 모든 a 태그
a[href*="ver"]{ >> To include a specified value
color:purple;
}
// href 속성값이 "ver"을 포함하는 모든 a 태그
#special{ }
li#special{ >> ❗ Don't space it out.
}
//li 태그 중에 ID가 special인 태그- Power
Universal tag(*)<Tag selector( tag_name ) < Class selector( .class_name ) < ID selector( #id_name )
: 같은 힘일 경우, 나중에 쓰여진 것이 더 강하다.
3) CSS structure
HTML에 CSS 적용하기
1. External stylesheet
가장 일반적이고 유용한 방법
HTML <head>안에 <link>요소에서 참조하는 경우
<link rel="stylesheet" href="style.css">- 경로 조정
<!-- 현재 폴더의 styles 라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/style.css">
<!-- 상위 폴더로 올라간 다음, styles 라는 하위 폴더 내로 이동 -->
<link rel="stylesheet" href="../styles/style.css">2. Internal stylesheet
외부 CSS 파일이 없는 대신, HTML <head>안에 포함된 <style> 요소 내부에 CSS를 작성한다.
<head>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
</style>
</head>3. Inline styles
style 속성을 포함한 한 요소에만 영향을 주는 CSS 선언이다.
유지관리에 좋지 않고 (문서당 동일한 정보를 여러번 업데이트 해야할 수 도 있음), CSS정보와 HTML구조 정보가 혼합되어 코드의 가독성이 떨어질 수 있다.
4) Shorthands
font, background, padding, border, margin등의 일부 속성을 속시 속성이라고 한다. 이는 여러 줄의 속성 값을 한 줄로 작성하여 코드를 깔끔하게 만들 수 있다.
background-color:red;
background-image:url(bg.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;위의 코드는 아래와 같다.
background: red url(bg.png) 10px 10px repeat-x fixed;5) Custom properties
자주 반복되어 쓰이는 수치가 있다면 그것을 상수로 정해서 사용하는 것이 유지보수면에서 좋다.
--(double dash)name: value;
정의된 위치의 모든 자식요소에서 접근가능하나, 보통 어디서든 사용할 수 있도록 :root{}(최고 부모노드)에서 정의한다.
불러올 때는 var(--name); 이런 식으로 사용한다.
/* Global */
:root {
/* Color */
--text-color: #f0f4f5;
--background-color: #263343;
--accent-color: #d49466;
/* Size */
--padding: 12px;
--avatar-size: 36px;
/* Font Size */
--font-large: 18px;
--font-medium: 14px;
--font-small: 12px;
--font-micro: 10px;
}
// 사용할 때
.btn{
color: var(--text-color);
}❗ 참고자료
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
