[AI웹개발][63일차TIL] CSS 공부하기 (1)selector, 기초 이론 정리 [드림코딩유툽]

유튜브 <드림코딩> CSS 강좌 (1) elector, 기초 이론 정리

https://www.youtube.com/watch?v=gGebK7lWnCk&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=7 

강의 듣고 직접 정리한 노션 링크 : https://www.notion.so/CSS-1-886c263df05446b0a39d7461eca5b6af?pvs=4 

CSS #1 셀렉터, 기초 이론 정리.

Cascading Style Sheet

• cascading의 사전적 의미
  1. 폭포처럼 흐르다
  2. (정보통신에서) 연속화, 종속, 연속, 직렬화
• 위에서 아래로 떨어지는 느낌
  • 우리가 작성한 스타일 시트에 스타일링이 없으면
  • 브라우저의 기본적으로 작성된 스타일링이 적용된다.
  • 그 기본 스타일링으로 보여지는 것이다.
  • 우리가 작성한 스타일링이 없으면, 브라우저에 기본적으로 적용된 스타일링으로 넘어가는 것을 cascading 이라고 한다.

 

웹 사이트, 스타일링 방법 크게 3가지

위에서부터 차례대로, Author → User → Browser 우선순위로 스타일이 적용됩니다. 이걸보고 Cascading 이라고 합니다.

Author style

css 파일에서, 우리가 직접 작성한 style sheet 을 말합니다

User Style

개발자가 작성한 스타일이 아닌, 유저들이 고를 수 있는 스타일을 말합니다. 글자 크기를 command + “-, +”로 바꿀 수 있죠

유저들은 각자의 컴퓨터, 혹은 웹에서 다크 모드 , 화이트 모드를 선택할 수 있듯이요

Browser Style

이 Cascading의 연결 고리를 단번에 끊어버리는 친구가 있는데

! important

라고 합니다.

labling 을 쉽게 하려면, 큰 박스 및 작은 박스를 잘 나누어야 합니다

박스에 라벨을 붙혀서, 빨간 라벨을 붙인 친구들은 Style을 공통적으로 적용한다. 이런 뜻이겠죠 . 고르기가 쉬워 진다는 의미입니다. 그걸 선택자라고 합니다.

 

선택자 Selectors

1. Universal

전체를 선택

2. TYPE

Tag - body, div 등등

3. ID

#id

4. Class

.class : 클래스 앞에 .을 찍는다

5. State

: 상태에 따라 스타일이 바뀌도록 할때

6. Attribute

[]

클래스 내에 attribute 를 따로 불러낼 때

 

실습한 내용은 노션에 기록했습니다

 

BOX MODEL

.mytitle {

background: yellow;

height: 100px;

width: 100px;

padding: 위20px 오른쪽20px 아래20px 왼쪽20px;

padding: 20px 0px; [위아래 20px, 왼쪽오른쪽 0px]

margin:20px;

}

border-width:2px;

border-style: solid;

border-color: pink;

→ border: 2px dashed red;

CSS reference 사이트

IO : https://cssreference.io/

ORG : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

W3Schools : https://www.w3schools.com/cssref/index.php

css 게임으로 익혀보기 : https://flukeout.github.io/