CSS
기본문법
선택자 {
속성: 속성값;
속성: 속성값;
}선택자(Selector)의 역할
- 속성과 값을 지정할 대상을 검색
<div>HELLO</div> <!-- red -->
<span>HELLO</span>div {
color: red;
}속성(Property)과 값(Value)의 역할
- 검색된 대상에 지정될 CSS 명령 세트
<div>HELLO</div>div {
color: red;
font-size: 20px;
font-weight: bold;
}/* Comment */
- 문서 내 수정사항이나 설명 등을 작성 (주석)
header {
color: #FF0000; /* Color red */
}CSS 기본 선언 방식
인라인(in-line) 방식
- HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식
- 사용 빈도를 떠나서, 직접 입력하는 방식은 피해야 함
<div style="color: red; font-size: 20px;">HELLO</div>내장(embedded) 방식
- HTML
<style>태그 안에 작성하는 방식
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>HELLO</div>
</body>링크(link) 방식
- HTML
<link>를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식
<head>
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div>
HELLO
</div>
</body>/* common.css */
div {
color: red;
}@import 방식
- CSS
@import를 이용하여 외부 문서를 불러와 CSS를 적용하는 방식 - 직렬 호출 방식 (1번 css 파일 -> 2번 css 파일 ...)
<head>
<link rel="stylesheet" href="css/common1.css">
</head>
<body>
<div>
HELLO
</div>
</body>/* common1.css */
@import url('./common2.css')/* common2.css */
div {
color: red;
}기본 선택자 (Selector)
1. 전체 선택자 (Universal Selector)
- 요소 내부의 모든 요소를 선택
* {
color: red;
}<!-- 전부 빨간 글자 -->
<div>
<ul>
<li>사과</li>
<li>딸기</li>
</ul>
<p>과일 이름들</p>
</div>2. 태그 선택자 (Type Selector)
- 태그 이름이
E인 요소 선택
li {
color: red;
}<div>
<ul>
<li>사과</li> <!-- 빨간 색 -->
<li>딸기</li> <!-- 빨간 색 -->
</ul>
</div>3. 클래스 선택자 (Class Selector)
- HTML
class="E"요소 선택
.apple {
color: red;
}<div>
<ul>
<li class="apple">사과</li> <!-- 빨간 색 -->
<li>딸기</li>
</ul>
</div>4. 아이디 선택자 (ID Selector)
- HTML
id="E"요소 선택
#apple {
color: red;
}<div>
<ul>
<li class="apple" id="apple">사과</li> <!-- 빨간 색 -->
<li>딸기</li>
</ul>
</div>복합 선택자
일치 선택자 (Basic Combinator)
- 선택자들을 붙여 정의하면 선택자 둘을 동시에 만족하는 HTML 요소를 찾음
span.apple {
color: red;
}<div>
<ul>
<li class="apple">사과</li>
<li>딸기</li>
</ul>
<span class="apple">사과</span> <!-- 빨간 색 -->
</div>자식 선택자 (Child Combinator)
E의 자식 요소F를 선택
ul > .apple { /* ul 태그 안 apple 클래스 요소 찾기 */
color: red;
}<div>
<ul>
<li class="apple">사과</li> <!-- 빨간 색 -->
<li>딸기</li>
</ul>
<span class="apple">사과</span>
</div>후손(하위) 선택자(Descendant Combinator)
E의 후손(하위) 요소F를 선택- '띄어쓰기'가 선택자의 기호로 사용
div .apple { /* div 태그를 찾아서 후손인 apple 클래스를 찾아주세요 */
color: red
}<div>
<ul>
<li class="apple">사과</li> <!-- 빨간 색 -->
<li>딸기</li>
</ul>
<span class="apple">사과</span> <!-- 빨간 색 -->
</div>인접 형제 선택자 (Adjacent Sibling Combinator)
E의 다음 (next) 형제 요소F하나만 선택
.apple + li {
color: red;
}<div>
<ul>
<li class="apple">사과</li>
<li>딸기</li> <!-- 빨간 색 -->
<li>수박</li>
</ul>
<span class="apple">사과</span>
</div>일반 형제 선택자 (General Sibling Combinator)
E의 다음 (next) 형제 요소F모두 선택
.apple ~ li {
color: red;
}<div>
<ul>
<li class="apple">사과</li>
<li>딸기</li> <!-- 빨간 색 -->
<li>수박</li> <!-- 빨간 색 -->
</ul>
<span class="apple">사과</span>
</div>가상클래스 선택자(Pseudo-Classes selectors)
HOVER
E에 마우스(포인터)가 올라가 있는 동안에만E를 선택
<div class="box"></div> <!-- hover 시 width: 200px; -->.box {
width: 100px;
height: 100px;
background: tomato;
transition: 0.4s;
}
.box:hover {
width: 200px;
}ACTIVE
E를 마우스로 클릭하는 동안에만E선택
<div class="box"></div> <!-- click 유지 시 width: 200px; background: yellowgreen -->.box {
width: 100px;
height: 100px;
background: tomato;
}
.box:active {
width: 200px;
background: yellowgreen;
}FOCUS
E가 포커스 된 동안에만E선택- 대화형 콘텐츠에서만 사용 가능
<input type="text"> <!-- focus 시 border-color: red;, width: 200px; -->input {
width: 100px;
outline: none;
border: 1px solid lightgray;
padding: 5px 10px;
}
input:focus {
border-color: red;
width: 200px;
}프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM
안녕하세요.