CSS 개요
기본문법, 주석
- 스타일(CSS)의 기본 문법:
선택자 {속성: 값;}
- 선택자(Selector) : 스타일(CSS)을 적용한 대상
- 속성(Property) :스타일(CSS)의 종류
- 값(Value): 스타일(CSS)의 적용되는 실제 값
- 속성과 값사이는 :(콜론)으로 구분
- 스타일 범위의 시작과 끝은 {}(중괄호)를 사용
- 주석은 /**/를 이용 (브라우저는 이 범위를 해석하지 않음)
div {color: red;} /* 종류(속성)은 color, 값은 red */
div {margin: 20px;} /* margin: 요소 외부 여백 */
div {padding: 10px;} /* padding: 요소 내부 여백 */
/* 들여쓰기(indent)와 내어쓰기(outdent)로 가독성있게 작성함 */
div {
color: red;
margin: 20px;
}
CSS 선언방식
- 내장방식:
style태그안에 내용(Contents)으로 스타일을 작성하는 방식
<style>
div {
margin-right: 10px;
width: 200px;
}
</style>
- 링크방식:
link태그로 외부 CSS 문서를 연결하는 방식 (병렬방식)
<link rel="stylesheet" href="./main.css">
- 인라인방식: 요소의 style 속성에 직접 작성하는 방식(선택자 없음)
<body>
<div class="create" style="color: red; margin: 20px;"></div>
</body>
- @import 방식 : CSS의 @import규칙을 이용하여 CSS문서 안에서
다른 CSS문서를 연결하는 방식 (직렬방식), 단점으로는 main.css를 먼저 해석이 되는 과정에서 지연이 된다면 box.css정보를 못가져오거나 지연이 될 수 있음
@import url("./box.css");
CSS 선택자
기본 선택자
- 전체선택자(Universal Selector): *로 표시, 모든 요소를 선택
* {
color: red;
}
- 태그선택자(Type Selector): 태그이름으로 요소선택
li {
color: red;
}
<ul>
<li>사과</li>
<li>오렌지</li>
<li>바나나</li>
</ul>
- 클래스 선택자(Class Selector)): HTML
class속성의 값으로 요소 선택
.apple {
margin: 7px;
}
<ul>
<li class="apple">사과</li>
<li>오렌지</li>
<li>바나나</li>
</ul>
- 아이디 선택자(ID Selector): HTML
id속성의 값으로 요소 선택
#banana {
padding: 5px;
}
<ul>
<li>사과</li>
<li>오렌지</li>
<li id="banana">바나나</li>
</ul>
복합 선택자
- 일치 선택자(Basic Combinator): 선택자 하나이상을 동시에 만족하는 요소 선택
주의할 점: 태그선택자는 구분자가 없기에 항상 먼저 앞에 나와야 함 ex) .applespan (x) span.apple(o)
span.apple {
color: red;
}
<ul>
<li class="apple">사과</li>
<li>오렌지</li>
<li>바나나</li>
<div>딸기</div>
<span class="apple">사과</span><!-- span 태그이면서 class가 apple인 요소만 CSS적용됨 -->
</ul>
- 자식 선택자(Child Combinator): 선택자의 자식 요소를 선택
ul > .orange {
color: red;
}
<ul>
<li>사과</li>
<li class="orange">오렌지</li><!-- ul태그 자식중에 class가 orange인 요소만 CSS적용됨 -->
<li>바나나</li>
</ul>
<div>딸기</div>
<span class="apple">사과</span>
<p class="orange">오렌지</p>
- 하위(후손) 선택자(Descendant Combinator): 선택자의 하위 요소를 선택 즉, 해당 태그 아래 모든 요소를 말함 (
띄어쓰기도 선택자가 됨)
div .apple { /* div 태그아래 class가 apple인 모든요소 */
color: red;
}
<div>
<ul>
<li class="apple">사과</li> <!-- CSS적용됨 -->
<li>오렌지</li>
<li>바나나</li>
</ul>
<div>딸기</div>
<span class="apple">사과</span> <!-- CSS적용됨 -->
<p>오렌지</p>
</div>
- 인접 형제 선택자(Adjacent Sibling Combinator): 선택자의
다음 형제 요소 하나를 선택
.orange + li { /* orange클래스의 다음 요소 하나를 선택함 */
color: yellow;
}
<ul>
<li>사과</li>
<li class="orange">오렌지</li>
<li>바나나</li> <!-- CSS적용됨 -->
</ul>
- 일반 형제 선택자(General Sibling Combinator): 선택자의
다음 형제 요소 모두를 선택
.orange ~ li {
color: yellow;
}
<ul>
<li>사과</li>
<li class="orange">오렌지</li>
<li>바나나</li> <!-- CSS적용됨 -->
<li>키위</li> <!-- CSS적용됨 -->
</ul>
가상클래스 선택자 (Pseudo-Classes)
- 가상클래스 선택자는 :(콜론)을 사용
- hover: 선택자 요소에 마우스 커서가 올라가 있는 동안 선택
a:hover{
color: red;
}
<a href="https://google.com">GOOGLE</a>
- active: 선택자 요소에 마우스를 클릭하고 있는 동안 선택
a:active{
color: blue;
}
<a href="https://google.com">GOOGLE</a>
- focus: 선택자 요소가 포커스되면 선택
* focus는 한 화면에 한 곳에만 가능
* focus가 될 수 있는 요소: input, a, button, label, select 등 HTML 대화형 콘텐츠가 해당됨
* tabindex: tab키를 사용해 focus 할 수 있는 순서를 지정하는 속성인데 이를 통해 focus가 될 수 있는 요소를 만들 수 있음, 순서 값으로 -1을 권장함(그 외 숫자를 입력시 논리적 흐름을 방해받을 수 있기 때문)
input:focus {
background-color: orange;
}
<input type="text" />
<div class="box" tabindex="-1"></div><!-- focus가 적용되도록 tabindex 요소 사용 -->
- first child: 선택자가 형제 요소 중 첫째라면 선택
아래의 경우 클래스(.fruits)와 일치선택자(span태그와 first-child가 붙어있음)가 같이 사용된 경우임
.fruits span:first-child {
color: orange;
}
<div class="fruits">
<span>오렌지</span><!-- CSS적용됨 -->
<span>사과</span>
<span>키위</span>
<span>딸기</span>
</div>
- last child: 선택자가 형제 요소 중 막내라면 선택
.fruits span:last-child{
color: red;
}
<div class="fruits">
<span>오렌지</span>
<span>사과</span>
<span>키위</span>
<span>딸기</span><!-- CSS적용됨 -->
</div>
- nth Child: 선택자가 형제 요소 중 n번째라면 선택 (n은 0부터 시작)
* nth-child(2n): 2, 4, 6, 8, ...번째(짝수)의 요소를 선택하는 것을 말함
* nth-child(2n+1): 홀수번째 요소를 선택
* nth-child(n+2): 1번째 요소를 제외한 2번째 요소부터 끝까지 선택
* nth-child(-n+3): 3,2,1 번째만 선택
fruits *:nth-child(2) {
color: red;
}
<div class="fruits">
<span>오렌지</span>
<span>사과</span><!-- CSS적용됨 -->
<span>키위</span>
<span>딸기</span>
</div>
부정 선택자 (Negation)
가상요소 선택자(Pseudo-Elements)
- ::(콜론2개) 를 사용
- 내부에 내용(content)을 삽입하는 선택자이기 때문에 내용을 비우더라도 content 속성을 반드시 넣어야 함
- before, after 가상요소는 인라인(글자)요소이기에 사이즈(width, height)속성이 적용안됨, 적용하려면 display:block 필요
- before: 선택자 요소의 내부 앞에 내용(content)을 삽입
.main::before {
content: "Front!!";
}
<div class="main">
<!-- 이 부분에 CSS적용됨 -->
Content!
</div>
Front!! Content! <!-- 화면에 출력시 -->
- after: 선택자 요소의 내부 뒤에 내용(content)을 삽입
.main::after {
content: "Back!!";
}
<div class="main">
Content!
<!-- 이 부분에 CSS적용됨 -->
</div>
Content! Back!! <!-- 화면에 출력시 -->
속성 선택자(Attribute)
- 속성 선택자는 [](대괄호)를 사용
- [attr]: 해당 속성을 포함한 모든 요소 선택
[readonly] {
color: red;
}
<input type="text" value="soheedev">
<input type="password" value="12qw">
<input type="text" value="test@gmail.com" readonly> <!-- CSS적용됨 -->
[type] {
color: red;
}
<!-- 아래 모든 태그에 type 요소를 가지고 있어서 모두 CSS적용됨 -->
<input type="text" value="soheedev">
<input type="password" value="12qw">
<input type="text" value="test@gmail.com" readonly>
- [attr=value]: 해당 속성을 포함하고 값이 일치하는 요소 선택
[type="password"] {
color: red;
}
<input type="text" value="soheedev">
<input type="password" value="1234"> <!-- CSS적용됨 -->
<input data-email value="test@gmail.com" readonly>
[data-email] {
color: red;
}
<input type="text" value="soheedev">
<input type="password" value="1234">
<input data-email value="test@gmail.com" readonly> <!-- CSS적용됨 -->
스타일 상속
스타일 강제 상속
- 하위 요소가 자동 상속받는 요소가 아닌데도 상위 요소의 CSS 스타일을 강제로 상속받아 적용되도록 함
- 아래 예시처럼 부모 높이(height)와 동일하게 자식 높이도 맞추려고 할 경우 자식이 강제 상속(inherit)받도록 해주면 부모의 height속성 값이 변경될 때 마다 자식의 속성 값을 변경해 줄 필요가 없음
- 만약 부모의 색상도 상속받게 할 경우 자식의 background-color에도 inherit 값을 주면 됨
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
.parent {
width: 300px;
height: 200px;
background-color: red;
}
.child {
width: 100px;
height: inherit /* 부모요소와 높이를 같이하기 위해 */
background-color: orange;
}
선택자 우선순위
- 우선순위란?
- 같은 요소가 여러번 선언 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
- 점수가 높은 선언이 우선 적용됨
- 우선순위(명시도, 점수)
- !important(중요도) : 9999..(무한대, 가장 높은 점수)
- 인라인 선언: 1000점
- ID 선택자: 100점
- Class 선택자: 10점 (가상클래스 포함)
- 태그 선택자: 1점 (가상요소 포함)
- 전체(*) 선택자: 0점 (순위는 낮으나 선언 안된 요소들에는 영향이 가기에 사용시 주의해야 함)
div { color: red !important; }
#color_yellow { color: yellow; }
.color_green { color: green; }
div { color: blue; }
* { color: darkblue; }
body { color: violet; }
<div id="color_yellow" class="color_green" style="color: orange;">
Hello world!! <!-- 어떤 색이 적용될까?? -->
</div>
.list li.item {} /* 21점 */
.list li:hover{} /* 21점 <= 클래스10점, 태그1점, 가상클래스10점 */
.box::before{} /* 11점 <= 클래스10점, 가상요소1점 */
#submit span{} /* 101점 */
header .menu li:nth-child(2){} /* 22점 <= 태그1점, 클래스10점, 태그1점, 가상클래스10점 */
h1 {} /* 1점 */
:not(.box){} /* 10점 <= 부정클래스 계산제외, 클래스10점 */
- 점수가 동일할 경우 마지막에 해석된 선언이 적용됨(순서중요)
.hello {
color: red;
}
.hello {
color: blue;
}
<div class="hello">Hello world!!</div>
- 주의할 점: !important 사용시 우선순위가 가장 높기 때문에 다른 방식으로 CSS를 수정하려고 해도 덮어쓸수가 없어 자주 사용하면 안됨 (인라인 선언도 마찬가지)
패스트캠퍼스 프론트엔드 초격차 패키지 강의를 참고하였습니다.