[국비 코딩 수업 2일차!] CSS 편

오늘은 CSS 편이다.

 

1. Selctor {속성:값, 속성:값; ...}

(1) Selector

 1)기본 선택자
    a) *
    b) Type Selector
    c) class Selector
    d) ID Selector1

1) 기본 선택자

    a) * 전체 선택자
        - 모든 요소 선택

    b) type selector : 태그 선택자
        - 태그 이름으로 선택

    c) Class selector
        -HTML 의 class 속성의 값으로 선택
        - 이름 앞에 마침표

    d) id selector
        - HTML의 id 속성의 값으로 선택

 

2) 복합 선택자
    - 기본 선택자 4개를 조합해서 사용하는 선택자

        a) 일치 선택자 (Basic Combinator Selector)
            -abcxyz

        b) 자식 선택자
            - abc>xyz

        c) 하위(후손)
         - abc xyz

        d) 인접 형제 선택자
          - abc + xyz

        e) 일반 형제 선택자
          - 선택자 abc의 다음 형제 요소 xyz 하나를 선택

          - abc ~ xyz
          - 선택자 abc의 다음 형제 요소 xyz 모두를 선택
 

 
 

 

3. 가상 클래스 선택자 (pseudo classes selector)

----- 가상

a) hover : 마우스를 클릭하고 있는 동안 선택!
-abc : hover {...}
 
b) active : 마우스를 클릭하고 있는 동안 선택 
-abc:active {...}
 
c) pocus : 해당요소가 포커스 되면 선택, html 대화형 컨텐츠에만 적용 ( input, a, label, select, button, textarea, ...)
focus를 가질 수 없는 요소에 focus를 가질 수 있게 하기 위해서는 tabindex 라는 속성을 사용해야 한다.

 
 

------ 정적

d) first child : 선택자가 형제 요소 중에  첫 번째일때 선택
 
e) last child : 선택자가 형제 요소 중에 마지막일때 선택
 
f) NTH child : 선택자가 형제 요소 중에 n번째라면 선택.
 
g) nagative selector NOT
 
-abc:not(xyz) => 선택자가 xyz가 아닌 abc 요소를 선택.

 
 

반응형

4) 가상 요소 선택자 (pseudo element selecotor)

 
a) before : 선택자 요소의 내부 앞에 내용을 삽입  
 -선택자::before{ content: "내용" }
 
b) after : 선택자 요소의 내부 뒤에 내용을 삽입
 -선택자::after{ content: "내용" }
 
가상 요소 선택자의 중요한 점은 :: 콜론을 두 개를 쓴다는 점.
 

 

5)  속성 선택자 (attribute selecotor)

 
[속성] { ... }
 
[속성=값]{ ...}
 
 

6) 글자와 상자

 
인라인 요소 : 글자를 만들기 위한 요소
 
- span
-줄바꿈 현상이 없다.
-width, height 값 적용 불가
-margin / padding / bottom 값 적용 불가  (좌우 여백은 가능)
-block 요소 포함 불가
-<img>, <p>, <span>, ...
 

 
 

2) 블럭 요소 : 

 
-줄바꿈 현상이 나타난다.
 
- width, height 값 사용 가능 (공간 만들기)
-margin/padding/bottom 값 적용 가능
-inline 요소 포함 가능
-<div>, <p>, <h>, <ul>, ...
 

 

3) 스타일 상속 -( inheritance )

 
주로 글자/ 문자 관련 상속들에 대해서 상속이 가능하다. (그렇다고 또 다그러는 것은 아니다. 대부분이 그렇다)
 
 -> 상속가능 부분 : font-style, font-weight, font-size, line-height, font-family, color, text-align, ...
 
태크의 경우 강제로 상속해주는 태그

 
★ ★ ★ ★ ★  inherit  ★ ★ ★ ★ ★

 
 

4) 선택자 우선 순위

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할 것인지 결정.
 
1. 점수
 
-점수가 가장 높은 선언이 우선
-점수가 같은 경우, 가장 마지막에 선언된 속성을 우선함.
 
1. 점수 - 인라인 선언 :1000점
2. id 선택자 : 100점
3. class 선택자 : 10점
4. 태그 선언자 : 1점
5. 전체 선택자 : 0점 (상속, 부정)
6. !important : 999999점(무한대/ 느낌표가 붙어야 함)
 
2. 사례
 
- .list(class 속성), li(class). item{...}(태그 속성)   ->  21점
- #submit(id선택자) span(태그 선언자) { ... }   -> 101점
- :not(.box) {...} -> 0점   (not 이 부정이기 때문 )
 
 
점수와 사례를 합쳐보면 무슨 말인지 감이 올 것이다.
 
3. 속성
 
- 박스 모델, 글꼴/문자, 배경, 배치, 플렉스(정렬), 전환(애니메이션), 변환, 띄움, 그리드, 다단, 필터
 
디자인 할 속성들이 정말 많다. (큰 카테고리로 나누었을 때)
 

---

 
 
그 외 
개인적으로 아무리 봐도 모르겠는 것들이 있다. 그래서 알아두면 좋겠다고 생각하여  업로드하는데.
이건 번역이 더 정확하게 설명해줄 것 같아서 가지고 와봤다.
 
class가 무엇을 뜻하는데?
 

 
코딩에서 id가 나타내는 건 뭐야?
 

 
코딩에서 ' . ' ,    ' #  ' , '  *  ' 가 무엇을 나타내는지 좀 알려줘.
 

 

---

일일히 설치하고 귀찮을 때는 이곳에서 바로 코드 시험이 가능하다.
 

CodePen

 
 
접속을하면 
 

 
 
스타트코딩을 누르고
 

 
코드만 작성하고 사인 업 누르면 바로 결과를 얻어볼 수 있다.
 
 

---

 

 

코딩 3일차 CSS 편 PART. 2