[CSS] 1. 기초

Anatomy of a CSS ruleset

선택자, 속성, 속성값 형태로 이루어져 있음.

 

Selecting multiple elements

- 선택자는 ,로 여러개를 선택할 수 있음.

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

p,
li,
h1 {
  color: red;
}

 

Different types of selectors

1. 요소  => p

2. 아이디 => #id

3. 클래스 => .class

4. 특정 속성 선택자 => a[href="https://example.org"], img[src]

    - 자세한 내용은 https://viscachas.tistory.com/entry/CSS-2-Attribute-selectors%EC%86%8D%EC%84%B1-%EC%84%A0%ED%83%9D%EC%9E%90를 참고하자

[CSS] 2. Attribute selectors(속성 선택자)

    

5. 수도 클래스 선택자 => a:hover

    - 자세한 내용은 https://viscachas.tistory.com/entry/CSS-3-Pseudo-classes를 참고하자

[CSS] 3. Pseudo-classes

 

6. * 

- 모든 요소들을 선택

- 속도면에서 문제가 있으며, *은 추천하지 않음

div > * {
}

 

Combinators

1. 자손 결합자 (공백)

- 첫 번째 요소의 자손 노드들을 모두 선택

div span {
}

 

2. 자식 결합자 (>)

- 첫 번쨰 요소의 자식 노드들을 모두 선택

ul > li {
}

 

3. 일반 형제 결합자 (~)

- 첫 번째 요소의 형제 노드들을 모두 선택

p ~ span {
}

 

4. 인접 형제 결합자 (+)

- 첫 번째 요소의 바로 뒤에 있는 형제 노드 선택

h2 + p {
}

 

5. 열 결합자 (||)

-  같은 열에 속하는 노드 선택

col || td {
}

 

CSS: all about boxes

1. padding: 콘텐츠 주위를 감싸는 공간

2. border: padding 바깥을 감싸는 선

3. margin: border 바깥은 감싸는 공간

각 속성들의 사용법은 링크 참조하자.

아직안만듦

 

CSS 단위

1. px

- 절대 길이

 

2. em

- 상대 길이

- 부모 요소의 크기가 기준

- 부모 폰트 크기가 16px이면 1em = 16px

 

3.rem

- 상대 길이

- 루트 요소의 크기가 기준 (루트: html 최상위 태그)

- 주로 em과 rem으로 반응형 웹 디자인 작업을 함

 

4. %

- 상대 길이

- 부모 크기가 기준

 

5. vw

- 상대 길이

-  viewport 너비의 1%와 동일

 

6. vh

- 상대 길이

-  viewport 높이 1%와 동일

 

7. auto

 

8.fit-content

 

+ 

calc

- CSS 속성값을 계산할 수 있는 함수

  width: calc(100% - var(--gap5));

 

+

CSS 적용 우선순위

1. 인라인 스타일

2. 임베드 (내부 스타일)

3. 링크 (외부 스타일)

 

++

- 선택자 요소의 종류와 개수에 따라 점수가 부여되고, 점수가 높은 순으로 우선순위가 결정됨

- 점수가 같다면 뒤에 적은 선택자가 우선순위가 더 높음

- 선택자는 점수를 더 얻기 위한 게 아닌 이상 굳이 길게 나열할 필요는 없음

- !important 를 사용하면 무조건 우선순위가 제일 높음(최후의 수단으로만 써야 함)

 

+++

html 구조는 간단히, css는 복잡하게 가는 것이 깔끔함

---

[출처] https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

CSS basics - Learn web development | MDN

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN

 

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units

CSS 값과 단위 - Web 개발 학습하기 | MDN

 

https://iridescent-zeal.tistory.com/90

[CSS]선택자 우선순위: 점수 매기기