CSS 기본 개념

CSS(Cascading Style Sheets)

w3s 속성의 간단한 스펙과 예제를 확인
mdn 개발적 버그나 추가적인 스펙에 대해 확인

---

👆 선택자

선택자 상세

1. 요소 선택자

h1 {color: yellow;}

2. 클래스 선택자

.foo {font-size: 30px;} //css
<p class="foo">...</p> //html

<다중 class>
.foo {font-size: 30px;} //css
.bar {color: blue;}
<p class="foo bar">...</p> //html

3. 아이디 선택자

#bar {background-color: yellow;} //css
<p id="bar">...</p> //html

한 페이지에 한 개 쓸 수 있음

4. 속성 선택자

• 단순 속성으로 선택

  p[class] {color: silver;}
  p[class][id] {text-decoration: underline;}

• 정확한 속성값으로 선택

p[class="food"] {color: silver;}

• 부분 속성값으로 선택

  class~="bar"
  class^="bar
  class$="bar"
  class*="bar"

5. 문서 구조를 이용한 선택자

• 자손 선택자

div span {color: red;} // div의 자손 span을 선택

• 자식 선택자

div > span {color: red;} // div의 자식 span 선택

• 인접 형제 선택자

div + span {color: red;} // div요소에 인접한 span 형제 요소 선택

6. 가상 선택자

특정 요소의 상태를 미리 추정해 가상의 클래스로 스타일 적용

• 가상 클래스 : 상황에 적용

• 가상 요소 : 위치에 삽입
  
  

? 선택자가 겹칠 때
id > class > tag

---

📑 구체성

선택자를 얼마나 명시적으로 선언했느냐를 수치화
구체성의 값이 높을 수록 우선 순위 가짐

• 0, 0, 0, 0 : 전체 선택자(*)

• 1, 0, 0 , 0 : inline

• 0, 1, 0 , 0 : 선택자에 있는 모든 id 속성값

• 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스

• 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소

  • 좌측 부분의 숫자가 클수록 높은 구체성
  • 조합자(>, +) 는 구체성에 영향을 주지 않음
  • !important는 모든 구체성을 무시하고 우선권을 가짐

---

👭상속

• 

h1 {color: gray;} // CSS
<h1>hello, <em>world</em></h1> // HTML

em 요소가 부모 h1의 color를 상속 받음

• 

* {color: red;} //CSS
h1#page {color: gray;}

<h1 id="page">hello, <em>world</em></h1> //HTML

상속된 값은 구체성을 가지지 않음

• 박스 모델 속성은 상속되지 않음

---

🤙Cascading

1. 중요도 & 출처

• !important는 다른 규칙보다 우선
• 출처: 제작자 (개발자가 작성한 CSS)
  사용자 (사용자가 작성한 CSS)
  사용자 에이전트 (일반 사용자의 환경. 브라우저에 내장된 CSS)
• 우선순위
  1. 사용자 !important 스타일
  2. 제작자 !important 스타일
  3. 제작자 스타일
  4. 사용자 스타일
  5. 사용자 에이전트 스타일

2. 구체성
3. 선언 순서

• 구체성이 같을 때 나중에 선언된 것이 우선

---

🌈 COLOR

1. color: black
2. color: #000000 or #000
3. color: rgb(0,0,0)
4. color: rgba(0,0,0,1)

---

📄 BOX MODEL

• margin (transparent)

  • auto
    : 수평선을 기준으로 정렬 (요소의 width값 필요)
  • margin collapse
    : top과 bottom값이 겹치면 더 큰 값이 상위를 차지해 큰 값으로 적용된다

• border

• padding

• content

• box sizing
  • 자식 요소의 %값은 부모 요소의 contents 영역에 영향을 받음
  • content-box
    : width, height로 요소 크기 계산
  • border-box
    : width, height에 padding, border를 포함해 요소 크기 계산

---

📰 LAYOUT

• display

  • 블록(인라인) 요소를 인라인(블록) 요소처럼 보여줌

  • display inline
    width, height(X)

  • inline-block
    inline 배치 / box model 속성

• visibility

  • 요소 숨기기
  • hidden
    스크린 리더기가 읽음
  • none
    스크린 리더기가 읽지 않음

• float

  • 요소를 보통의 흐름에서 벗어나 띄워지게 함
  • 주변 텍스트나 인라인 요소가 주위를 감쌈
  • 대부분의 display 값을 block으로 변경

• clear

  • floating된 요소의 영향에서 벗어나 다음 행으로 이동
  • block-level 요소에만 적용 가능

• Z-INDEX

  box가 겹치는 순서를 지정

  • position: static 아닌 경우 지정 가능
  • 순서 값이 없으면 생성 순서를 따름

• flex

  • 레이아웃 잡을 때 유용
  • table, position(나쁘진 않음), float 보다는 flex 사용

---

🎬 MEDIA QUERIES

미디어 매체에 따라 다른 스타일 시트 적용

• 미디어 타입
  all print screen

• 미디어 특성
  width orientation

• S* : 공백
  [ ] : 안의 내용이 있을 수도 없을 수도
  a:b : a or b
  ~? : 앞의 내용이 0번 or 1번
  ~*: 앞의 내용이 0번 or 1번 or 연속

• @media : 미디어 쿼리가 시작됨을 알림

• only : 미디어 쿼리 구문 해석해라 (생략O)

• all : 미디어 쿼리를 해석해야 할 대상을 나타냄 (생략 O)

• and : 앞과 뒤의 조건을 나타냄 (생략 O)

• 조건문 : 조건을 설정

• 실행문 : 조건에 따른 실행 설정

---

desktop first

body {background-color:lightpink;}

@media screen and (min-width: 768px) and (max-width: 1024px){
           body {background-color: lightblue;}
       }
       
@media screen and (max-width: 767px) {
           body {background-color: gold;}
       }

mobile first

 body {background-color:gold;}

 @media screen and (min-width: 768px) and (max-width: 1024px){
            body {background-color: lightblue;}
        }
@media screen and (min-width: 1025px) {
            body {background-color: lightpink;}
        }