CSS 선언 방식
내장 방식
html 코드 안에서 style의 내용으로 태그를 작성하여 스타일을 작성하는 방식입니다.
<style>
div {
color: red;
margin: 20px;
}
</style>내장 방식에 단점으로는 style의 범위가 커질수록 html파일이 난잡해지거나 구별해지기 힘들고 구별해서 관리하기 힘들다는 단점이 있습니다.
인라인 방식
요소의 style 속성에 직접 스타일을 작성하는 방식
(선택자 없음)
<div style="color: red;; margin: 20px;"></div>CSS 우선순위라는 개념이 있는데 이렇게 작성하면 너무 지나치게 우선하기 때문에 별도의 코드를 가지고 해당하는 요소에 적용된 css내용을 덮어서 가면서 수정을 하고 싶어도 되지않는 단점이있습니다.
링크 방식
link로 외부 CSS 문서를 가져와서 연결하는 방식
<link rel"stylesheet" href="./css/main.css">main.css라는 파일에 우리가 사용하고자 하는 스타일들이 작성되어 있고, 이러한 css파일을 가져와서 연결하는 방식입니다. 가장많이 사용하는 방식이고 병렬로 연결이 됩니다.
@import 방식
CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식입니다.
<link rel="stylesheet" href="./css/main.css">
//main.css
@import url("./box.css");
div {
color:red;
margin:20px;
}
//box.css
.box {
backgroun-color : red;
padding : 20px;
}이러한 방식을 직렬 방식의 연결이라고 하는데, 이 방식의 장점이자 단점은 main.css가 HTML에 연결이 돼서 실제 코드가 해석되기 전까지는, box.css는 HTML에 연결이 되지 못하고 연결이 되지 않습니다.
CSS 선택자
기본 선택자
- 전체선택자
모든 요소를 선택하는 선택자
* {
}- 태그 선택자
태그의 이름으로 요소를 선택하는 선택자
li {
color : red;
}
div {
margin : 20px;
}- 클래스 선택자
태그의 요소 안에 class라는 속성의 값을 넣어 그 값을 선택한 요소
<li class="orange">오렌지</li>
.orange {
color : red;
}- 아이디 선택자
태그의 요소 안에 id라는 속성의 값을 넣어 그 값을 선택한 요소
<li id="orange">오렌지</li>
#orange {
color : red;
}복합 선택자
- 일치 선택자
선택자 태그와 속성을 동시에 만족하는 요소 선택자
<span class="orange">오렌지</span>
span.orange{
color : red;
}- 자식 선택자
선택자의 자식 요소를 선택하는 선택자
중복되는 classr가 있더라도 ul의 자식요소에서 찾기 때문에 li만 적용됩니다.
<ul>
<li class="orange">오렌지</li>
</ul>
<span class="orange'>오렌지</span>
ul > .orange {
color: red;
}- 하위 선택자
선택자의 하위 요소를 선택하는 선택자
띄어쓰기가 선택자의 기호입니다.
<div>
<ul>
<li class="orange">오렌지</li>
</ul>
<span class="orange'>오렌지</span>
</div>
div .orange {
color: red;
}- 인접 형제 선택자
선택자의 다음 형제 요소를 하나 선택
<ul>
<li>딸기</li>
<li>수박</li>
<li class="orange">오렌지</li>
<li>망고</li>
<li>사과</li>
</ul>
.orange + li {
color : red;
}해당 코드에서는 오렌지 아래에 있는 망고라는 오렌지의 형제 요소가 선택되어 색상이 변경됩니다.
- 일반 형제 선택자
선택자 다음 형제 요소 모두를 선택
<ul>
<li>딸기</li>
<li>수박</li>
<li class="orange">오렌지</li>
<li>망고</li>
<li>사과</li>
</ul>
.orange ~ li {
color: red;
}아까는 하나만 찾았다면, 이번에는 모두를 찾습니다. 해당 코드에는 오랜지 아래에 있는 모든 형제요소 즉, 망고와 사과가 선택되어 변경됩니다.
가상 클래스 선택자
사용자가 어떠한 행동을 했을 시 동작하는 선택자
<div class="orange"></div>
.box {
width: 100px;
height: 100px;
background-color: orange;
transition: 1s;
}
// 선택자 요소에 마우스 커서를를 올라가 있는 동안 실행되는 선택자
.box:hover {
width: 300px;
}
// 선택자 요소에 마우스를 클릭하고 있는 동안 실행되는 선택자
.box:active {
color: red;
}
// 선택자 요소가 포커스되면 선택되면 실행되는 선택자
input:focus {
background-color: orange;
}
// 선택자가 형제 요소중 첫째라면 선택하는 선택자.
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<span>오렌지</span>
<div>망고</div>
<h3>사과</h3>
</div>
.fruits span:first-child{
color:red;
}
// 부정 선택자, 선택자가 아닌 요소를 선택
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<span>오렌지</span>
<div>망고</div>
<h3>사과</h3>
</div>
.fruits *:not(span) {
color: red;
}
부정 선택자는 span이라는 선택자가 아닌 요소들을 고르는 선택자입니다.
가상 요소 선택자
<div class="box">
content!
</div>
.box::before {
content: "앞!";
}
원래는 contet!만 출력되는데
before 선택자를 사용하면
앞! content! 로 바뀌게 됩니다.
.box::after {
}
after는 반대로 뒤쪽에 추가되는 형식입니다.속성 선택자
<input type="text" value="HEROPY" />
<input type="password" value="1234" />
<input type="text" value="ABCD" disabled />
[disabled] {
color:red;
}대괄호를 이용해서 속성을 선택하여 사용하는 선택자입니다.
[type = "password"]위에 형식처럼 값도 지정하여 찾을 수 있습니다.
