CSS 기본문법
CSS 선언방식
내장 방식
<style>
div {
color: red;
}
</style>
<style>태그의 내용(contents)으로 스타일을 장식하는 방식, html 문서<head>요소에 들어갑니다. 별도의 CSS 파일을 따로 만들지 않아도 되는 장점이 있습니다.
인라인 방식
<div style="color: red;"></div>요소의 style 속성에 직접 스타일을 작성합니다. 해당방법은 선택자가 없습니다.
우선순위가 너무 높아서 추후 유지 보수 측면에서 부적합 하므로 권장되는 방식은 아닙니다.
링크 방식
<link rel="stylesheet" href="./css/main.css">
<link/>로 외부 CSS 문서를 가져와서 연결하는 방식입니다.
병렬로 입력이 되는 방식으로 해당 링크에 있는 css가 동시에 적용됩니다.
@import 방식
@import url("파일 경로");CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식입니다.
직렬로 입력이 되는 방식으로 html에 메인으로 연결되어있는 css링크가 우선 반영되고, 순서대로 import된 css파일이 적용 됩니다.
CSS 선택자
CSS선택자는 오른쪽에서 왼쪽(←)으로 읽는것이 더 정확합니다. 왼쪽에서 오른쪽(→)으로 읽을 경우 해성이 느리고 불분명해질 수 있기때문입니다.
기본 선택자
- 전체 선택자(*) : 모든 요소를 선택하는 선택자 입니다.
- 태그 선택자 : 스타일을 적용할 특정 태그의 이름을 입력하면 됩니다.
- 클래스 선택자 : .classname, 주어진 class 특성을 가진 모든 요소를 선택합니다.
- ID 선택자 : id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.
복합 선택자
<ul>
<li>빨강</li>
<li>주황</li>
<li class = "yellow">노랑</li>
<li>초록</li>
<li>파랑</li>
</ul>.orange + li {
color: yellow;
}
.orange ~ li {
color: yellow;
}- 일치 선택자 : ABCXYZ 일때, ABC와 XYZ를 동시에 만족하는 요소를 선택합니다.
- 자식 선택자 : ABC>XYZ 일때, ABC의 자식요소 XYZ를 선택합니다.
- 하위(후손) 선택자 : ABC XYZ 일때, ABC의 하위 요소 XYZ를 선택합니다. 이때 띄어쓰기를 꼭 해줘야 합니다.
- 인접 형제 선택자 : ABC+XYZ 일때, ABC의 다음 형제 요소 XYZ 하나를 선택합니다.
따라서 위의 코드에서, 네번째li태그인 초록만 yellow 색상으로 바뀝니다. - 일반 형제 선택자 : ABC~XYZ 일때, ABC의 다음 형제 요소 XYZ 모두를 선택합니다.
따라서 위의 코드에서, 네번째,다섯번째li태그인 초록과 파랑 모두 yellow 색상으로 바뀝니다.
가상클래스 선택자
hover
.btn:hover {
opacity : 50%;
}마우스 커서가 올라가 있는 동안 선택됩니다.
active
.btn:active {
opacity : 50%;
}마우스를 클릭을 하는 동안 선택됩니다.
focus
<div class = "box" tabindex='-1'></div>input:focus {
background-color: yellow;
}
- 포커스가 되면 특정 효과가 적용됩니다.
- focus가 될수 있는 요소는
<input><a><button><label>와 같은 HTML대화형 콘텐츠들만 가능합니다.- focus가 될수 없는 요소들을 포커스가 가능하도록 만드는 방법은 해당 요소에 tabindex 속성을 부여하면됩니다.
- focus는 한 페이지에 한 요소만 가능합니다.
first-child
:first-child는 형제 요소 그룹 중 첫번째 요소를 선택합니다.
last-child
:last-child는 형제 요소 그룹 중 마지막 요소를 선택합니다.
nth-child(n)
:first-child는 형제 요소 그룹 중 (n)째라면 선택합니다.
not(선택자)
span:not(.hello) { color: red; }<span class="hello">hello</span>
<span>good morning</span>부정선택자는 선택자가 아닌 요소를 선택합니다.
따라서 hello 클래스 선택자가 아닌<span>요소만 선택되어 good morning의 색깔이 red로 바뀝니다.
가상 요소 선택자
가상 요소 선택자는 inline 요소로 내용을 명시할 때는 content속성을 반드시 사용해야 합니다.
(::) 기호 2개로 사용하는것이 표준입니다.
::before
.box::before {
content: "앞";
}선택자 요소의 내부 앞에 내용(content)을 삽입합니다.
::after
.box::after {
content: "뒤";
}선택자 요소의 내부 뒤에 내용(content)을 삽입합니다.
속성 선택자(Attribute selectors)
CSS 속성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.
<input type="text" value="Hello">
<input type='password' value='2022'>[type] {
color: yellow;
}
[type="password"]{
color: yellow;
}[attr]
attr이라는 이름의 속성을 가진 요소를 모두 선택합니다.
[attr=value]
attr이라는 이름의 속성값 중 value인 요소만을 선택합니다.
스타일 상속
부모요소에 적용된 스타일은 상속 되어있는 자식요소에게 적용이 됩니다.
이때 상속되는 CSS 속성들은 대부분 글자와 문자 관련 속성들입니다.
그외 상속되지 않는 다양한 CSS 속성들에 강제로 상속을 해주려면 inherit 속성값을 사용해주면 됩니다. 이것을 강제상속이라 합니다.
선택자 우선순위
우선순위란, 같은 요소가 여러 선언의 대상이 된 경우에 어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법입니다. CSS 우선순위를 계산하는것을 명시도라고 합니다.
1. 점수가 높은 선언이 우선됩니다.
2. 점수가 동일할 경우, 가장 마지막에 해석된 선언이 우선됩니다.
| 선언 방식 | 점수 |
|---|---|
| !important | 99999999999점 |
| 인라인 선언 | 1000점 |
| ID 선택자 | 100점 |
| Class 선택자 | 10점 |
| 태그 선택자 | 1점 |
| 전체 선택자 | 0점 |
| body 태그 | 상속은 점수 계산을 하지 ❌ |
💡
인라인 선언과!important는 나중에 수정이 거의 불가능하므로 되도록 사용하지 않는것을 권장합니다.
.list li:hover → 태그 선택자 1점 + 가상 클래스 선택자(:)는 클래스 선택자이므로 10점
.box::before → 클래스 선택자 10점 + 가상 요소 선택자(::)는 요소와 태그는 비슷한 개념이므로 1점
.not(.box) → 부정선택자는 가상 클래스 선택자이지만 점수를 계산하지 않기 때문에 10점, 총 10점🚀 위의 방식대로 점수를 계산해보세요!
