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

Author And Source

이 문제에 관하여([패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ji-yeong/패스트캠퍼스-수강-후기-프론트엔드-인강-100-환급-챌린지-12회차-미션

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션

CSS