Web Development (4)

Web Development (4)

1. CSS (1) : 기본

선택자 {속성 : 값}

div{
  font-size: 50px;
  color: blue;
  text-decoration: underline;
}

선택자 (Selector)
스타일(CSS)을 적용할 대상

속성 (Property)
스타일(CSS)의 종류

값 (Value)
스타일(CSS)의 값

{}
범위지정
ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

2. CSS (2) : CSS 선언방식

1) 내장방식
html의 style 요소(태그)
장점) 별도의 CSS파일 필요하지 않음
단점) 많아지는 경우 처리 힘듦

2) 인라인 방식
html요소의 style속성에 직접 스타일 작성하는 방식
단점) 너무 지나치게 우선하기 때문에 유지 보수 어려움

3) 링크 방식
link 태그를 이용해서 파일을 가져오는 방식 (병렬, 한 번에 연결)

4) import 방식
css의 @import 규칙으로 CSS문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식(직렬, main이 먼저 연결된 후)
특징) import 해석되기 전까지 html 연결되지 못함 -> 연결의 지연 (의도적일 수도)
ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

3. CSS (3) : 선택자

<기본 선택자>

1) 전체 선택자 (Universal Selector) : *
단독으로 잘 안쓰이고 복합 선택자를 통해 범위 내 전체 선택

<div> 👈
  <ul> 👈
    <li>포도</li> 👈
    <li>사과</li> 👈
  </ul> 👈
</div> 👈

* {
 color: red;
}

2) 태그 선택자 (Type Selector) : 태그

<div>
  <ul>
    <li>포도</li> 👈
    <li>사과</li> 👈
  </ul>
</div>

li {
 color: red;
}

3) 클래스 선택자 (Class Selector) : .클래스 속성의 값

<div>
  <ul>
    <li>포도</li>
    <li class="apple">사과</li> 👈
  </ul>
  <div>당근</div>
  <p>토마토<p>
  <span class="apple">오렌지</span> 👈
</div>

.apple {
 color: red;
}

4) 아이디 선택자 (ID Selector) : #아이디 속성의 값

<div>
  <ul>
    <li>포도</li>
    <li id="apple" class="apple">사과</li> 👈
  </ul>
  <div>당근</div>
  <p>토마토<p>
  <span class="apple">오렌지</span>
</div>

#apple {
 color: red;
}

ㅤ
ㅤ

<복합 선택자>

1) 일치 선택자 (Basic Combinator) : 선택자+클래스or아이디

<div>
  <ul>
    <li>포도</li>
    <li class="apple">사과</li>
  </ul>
  <div>당근</div>
  <p>토마토<p>
  <span class="apple">오렌지</span> 👈
</div>

span.apple {
 color: red;
}

2) 자식 선택자 (Child Combinator) : 선택자의 자식요소

<div>
  <ul>
    <li>포도</li>
    <li class="apple">사과</li> 👈
  </ul>
  <div>당근</div>
  <p>토마토<p>
  <span class="apple">오렌지</span>
</div>

ul<.apple {
 color: red;
}

3) 하위(후손) 선택자 (Descendant Combinator) : 선택자 V 특정 하위요소

<div>
  <ul>
    <li>포도</li>
    <li class="apple">사과</li> 👈
  </ul>
  <div>당근</div>
  <p>토마토<p>
  <span class="apple">오렌지</span> 👈
</div>

div .apple {
 color: red;
}

4) 인접 형제 선택자 (Adjacent Sibling Combinator) : 선택자 다음 형제요소 하나 선택

<div>
  <ul>
    <li>포도</li>
    <li class="apple">사과</li> 
    <li>메론</li> 👈
    <li>딸기</li>
    <li>파인애플</li>
  </ul>
</div>

.apple + li {
 color: red;
}

5) 일반 형제 선택자 (General Sibling Combinator) : 선택자 다음 형제요소 모두 선택

<div>
  <ul>
    <li>포도</li>
    <li class="apple">사과</li> 
    <li>메론</li> 👈
    <li>딸기</li> 👈
    <li>파인애플</li> 👈
  </ul>
</div>

.apple ~ li {
 color: red;
}

ㅤ
ㅤ

<가상 클래스 선택자_Pseudo-Classes>

1) HOVER : 마우스커서 올라가있는 동안

<a href="https://www.naver.com">NAVER</a>

a:hover {
  color: red;
}

2) active : 마우스를 클릭하고있는 동안

<a href="https://www.naver.com">NAVER</a>

a:active {
  color: red;
}

3) focus : 포커스되면 선택

<input type="text" />

input:focus {
  background-color: orange;
}

4) first-child : 선택자 형제요소 중 첫째 선택

<div class="fruits">
  <span>딸기</span> 👈
  <span>수박</span>
  <span>포도</span>
  <p>망고</p>
  <h3>사과</h3>
</div>

.fruits span:first-child {
  color: red;
}

4) last-child : 선택자 형제요소 중 마지막 선택

<div class="fruits">
  <span>딸기</span> 
  <span>수박</span>
  <span>포도</span>
  <p>망고</p>
  <h3>사과</h3> 👈
</div>

.fruits h3:last-child {
  color: red;
}

5) nth-child(n) : 선택자 형제요소 중 (n)째 선택

<div class="fruits">
  <span>딸기</span> 
  <span>수박</span> 👈
  <span>포도</span>
  <p>망고</p> 👈
  <h3>사과</h3> 
</div>

.fruits *:nth-child(2n) {
  color: red;
}

5) 부정 선택자 (Negation) : not

<div class="fruits">
  <span>딸기</span> 
  <span>수박</span> 
  <span>포도</span>
  <p>망고</p> 👈
  <h3>사과</h3> 👈
</div>

.fruits *:not(span) {
  color: red;
}

ㅤ
ㅤ

<가상 요소 선택자_Pseudo-Elements>

1) before : 선택자 요소의 내부 앞에 내용(Content) 삽입

<div class="box>
           👈
  Content!
ㅤ
</div>

.box::before{
  content: "앞!";
}

2) after : 선택자 요소의 내부 뒤에 내용(Content) 삽입

<div class="box>
ㅤ
  Content!
           👈
</div>

.box::after{
  content: "뒤!";
}

ㅤ
ㅤ

<속성 선택자_Attribute>

1) ATTR : 속성을 포함한 요소 선택

<input type="text" value="anthony">
<input type="password" value="1234">
<input type="text" value="ABCD" disabled> 👈

[disabled] {
  color: red;
}
ㅤ
or
ㅤ
[type] {
  color: red;
}

2) ATTR : 특정 속성의 값이 X인 요소 선택

<input type="text" value="anthony">
<input type="password" value="1234"> 👈
<input type="text" value="ABCD" disabled>

[type="password"] {
  color: red;
}

ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

4. CSS (4) : 스타일 상속

스타일 상속

<div class="ecosystem">생태계
  <div class="animal">동물         👈
    <div class="tiger>호랑이</div> 👈
    <div class="tiger>사자</div>   👈
    <div class="tiger>코끼리</div> 👈
  </div>
  <div class="plant">식물</div>
</div>

.animal {
  color: red;
}

상속되는 CSS 속성들

강제 상속
child 클래스에서 height: inherit; -> 그대로 상속
ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

5. CSS (5) : 선택자 우선순위

1)점수 높은 선언 우선
2) 점수 같으면 마지막에 해석된 선언 우선

important 9999999점 중요도 (잘 안쓰임, 권장 X)
인라인선언 1000점
id선택자 100점
class선택자 10점
태그 선택자 1점 = 가상 요소. 요소
전체 선택자 0점
body X (상속은 점수 따로 계산하지 않음)

본 게시글은 fastcampus 박영웅강사 수업을 듣고 개인적으로 정리한 내용임을 밝힘.