3일차 공부
CSS
CSS개요
기본 문법 , 주석
1. 문법
선택자{속성:값;}- 선택자 : 스타일(CSS)을 적용할 대상(Selector)
- 속성 : 스타일(CSS)의 종류(Property)
- 값 : 스타일(CSS)의 값(Value)
- ; (세미콜론) 잊지말기!
div{color:red; margin:20px;}
div{
color: red;
margin: 20px;
}
- 들여쓰기(Indent)
2. 주석
/*설명 작성*/- CSS 주석처리 / 주석 /
- Crtl / or Cmd /
선언방식
1. 내장방식
<style>
div {
color: red;
margin: 20px;;
}
</style><style></style>의 내용(Contents)으로 스타일을 작성하는 방식
2. 인라인 방식
<div style="color: red; margin: 20px;"></div>요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)
3. 링크 방식
<link rel="stylesheet" href="./css/main.css"><link/>로 외부 CSS 문서를 가져와서 연결하는 방식
병렬 방식
4. @import 방식
main.css
@import url("./box.css");
div{
color: red;
margin: 20px;
}box.css
.box {
background-color: red;
padding: 20px;
}CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
main.css가 먼저 해석되고 box.css가 해석된다(연결 지연시키려는 목적으로 사용)
직렬 방식
선택자_기본
<div>
<ul>
<li>사과</li>
<li>망고</li>
<li>수박</li>
</ul>
<div>당근</div>
<p>토마토</p>
<span>오렌지</span>
</div>
1. 전체 선택자
*{
color: red;
}* 전체 선택자(Universal Selector)
모든 요소를 선택.
2. 태그 선택자
li{
color: red;
}ABC 태그 선택자 (Type Selector)
태그 이름이 ABC인 요소 선택.
3. 클래스 선택자
<div>
<ul>
<li>사과</li>
<li class="orange">오렌지</li>
</ul>
<div>당근</div>
<span class="orange">오렌지</span>
</div>.orange {
color: red;
}.ABC 클래스 선택자 (Class Selector)
HTML class 속성의 값이 ABC인 요소를 선택.
4. 아이디 선택자
<div>
<ul>
<li>사과</li>
<li id="orange" class="orange">오렌지</li>
</ul>
<div>당근</div>
<p> 토마토</p>
<span class="orange">오렌지</span>
</div>#orange {
color: red;
}#ABC 아이디 선택자 (ID Selector)
HTML id 속성의 값이 ABC인 요소 선택
선택자_복합
1. 일치 선택자
<div>
<ul>
<li>사과</li>
<li class="orange">오렌지</li>
</ul>
<div>당근</div>
<p> 토마토</p>
<span class="orange">오렌지</span> 선택
</div>span.orange {
color: red;
}ABCXYZ 일치 선택자 (Basic Combinator)
선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
2. 자식 선택자
<div>
<ul>
<li>사과</li>
<li class="orange">오렌지</li>선택
</ul>
<div>당근</div>
<p> 토마토</p>
<span class="orange">오렌지</span>
</div>ul > .orange {
color: red;
}ABC > XYZ 자식 선택자 (Child Combinator)
선택자 ABC의 자식 요소 XYZ 선택.
3. 하위(후손) 선택자
<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li> 선택
</ul>
<div>당근</div>
<p>토마토<p>
<span class="orange">오렌지</span> 선택
</div>div .orange {
color: red;
}ABC XYZ 하위(후손) 선택자 (Descendant Combinator)
선택자 ABC의 하위 요소 XYZ 선택.
'띄어쓰기'가 선택자의 기호
4. 인접 형제 선택자
<ul>
<li>딸기</li>
<li>수박</li>
<li class="orange">오렌지</li>
<li>망고</li> 선택
<li>사과</li>
</ul>.orange + li {
color: red;
}ABC + XYZ 인접 형제 선택자 (Adjacent Sibiling Combinator)
선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
5. 일반 형제 선택자
<ul>
<li>딸기</li>
<li>수박</li>
<li class="orange">오렌지</li>
<li>망고</li> 선택
<li>사과</li> 선택
</ul>.orange ~ li {
color: red;
}ABC ~ XYZ 일반 형제 선택자 (General Sibling Combinator)
선택자 ABC의 다음 형제 요소 XYZ 모두를 선택.
선택자_가상 클래스
(Pseudo-Classes)
1. HOVER
a:hover {
color: red;
}ABC:hover
선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택
2. ACTIVE
a:active {
color: red;
}ABC:active
선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택
3. FOCUS
input:focus {
background-color: orange;
}ABC:focus
선택자 ABC 요소가 포커스되면 선택. (포커스 - 활성화될때!)
Focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당 INPUT, A,BUTTON,LABEL,SELECT 등
HTML 대화형 콘텐츠 요소가 아닐경우 tabindex 속성 사용 tabindex="-1"
(HTML 대화형컨텐츠 mdn 검색)
4. FIRST CHILD
<div class="fruits">
<span>딸기</span> 선택
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits span:first-child {
color: red;
}ABC:first-chold
선택자 ABC가 형제 요소 중 첫째라면 선택.
5. LAST CHILD
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3> 선택
</div>.fruits h3:last-child {
color: red;
}ABC:last-child
선택자 ABC가 형제 요소 중 막내라면 선택.
6. NTH CHILD
<div class="fruits">
<span>딸기</span>
<span>수박</span>선택
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>.fruits *:nth-child(2) {
color: red;
}ABC:nth-child(n)
선택자 ABC가 형제 요소 중 (n)째라면 선택.
2n 일때는 0 2 4 8 ... 짝수로 2n+1은 홀수
7. NOT
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>선택
<p>망고</p>선택
<h3>사과</h3>선택
</div>.fruits *:not(span) {
color: red;
}ABC:not(XYZ) 부정선택자(Negation)
선택자 XYZ가 아닌 ABC 요소 선택.
선택자_가장 요소
가상 요소 선택자 (Pseudo-Elements)
1. BEFORE
<div class="box">
이부분 삽입
Content!
</div>.box::before {
content: "앞!";
}ABC::before
선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입.
before 인라인 요소
2. AFTER
<div class="box">
Content!
이부분 삽입
</div>.box::after {
content: "뒤!";
}ABC::after
선택자 ABC 요소의 내부 뒤에 내용(Content)을 삽입.
after 인라인 요소
선택자_속성
속성 선택자 (Attribute)
ATTR
<input type="text" value="TAEWOOK">
<input type="password" value="1234">
<input type="text" value="ABCD" disabled> 선택[disabled] {
color: red;
}[ABC]
속성 ABC을 포함한 요소 선택
스타일 상속
상속되는 CSS 속성들
모두 글자/문자 관련 속성들!
(모든 글자/문자 속성은 아님 주의!)
font-style :글자 기울기
font-weight : 글자 두께
font-size : 글자 크기
line-height : 줄 높이
font-family : 폰트(서체)
color : 글자 색상
text-align : 정렬
...
강제 상속
상속되지 않는 속성들을 상속시킬때 사용
inherit;
선택자 우선순위
우선순위란, 같은 요소가 여러 선언의 대상이 된 경우,
어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
- 점수가 높은 선언이 우선
- 점수가 같으면, 가장 마지막에 해석된 선언이 우선
!important - 9999999999점
인라인 선언 - 1000점
ID 선택자 - 100점
Class 선택자 - 10점
태그 선택자 - 1점
전체 선택자 - 0점
상속 - X
CSS 우선순위의 점수를 계산하는 것을 명시도
!important 키워드를 사용하는 것을 중요도
선언 순서(코드가 해석된 순서)에 따라 우선!!
헷갈리는 부분이 많지만 복습 하면서 화이팅!!
