2023.02.22 TIL

정승원·2023년 3월 11일

CSS TIL

📌 오늘의 생각

CSS에 대해 공부하면서 가장 즐겁게 학습한 하루였다. 브라우저의 요소들을 움직이고 조작하는 것이 매우 흥미로웠고, 그동안 여러 웹페이지를 사용하면서 어떻게 움직임을 구현하였는지 궁금증이 생겼다.

📒 목차

Cascading (캐스케이딩)

배경

색상

vw, vh

calc()

posiiton

z-index

transition

CSS

1️⃣ Cascading (캐스케이딩)

CSS = Cascading Style Sheet
Cascading
- 폭포, 위에서 아래로 흐른다는 의미
브라우저에 어떤 것을 먼저 그려줄지 결정하는 우선순의 적용 원리

✅ 중요도

브라우저 스타일 시트 < 사용 스타일시트 < 개발자 스타일 시트
개발자 시트의 중요도
- <link>로 연결한 css파일 < <style>요소 안에** 있는 CSS < 인라인 스타일 CSS
중요도 순위 정리
1. 인라인 스타일 CSS
1. <style> 요소 안에 있는 CSS
2. <link>로 연결한 CSS 파일
3. 사용자 스타일 시트
4. 브라우저 스타일 시트

✅ 구체성 (명시도)

선택할 대상을 구체적으로 특정할수록 명시도 높아진다
부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자, 가상 선택자 < ID 선택자
❗ 강제로 명시성 끌어올리기
- !important

* {
	color: red!important;
}

✅ 선언순서

나중에 선언한 스타일이 우선 적용
명시도가 동일한 선언이 중첩된다면 가장 나중에 선언한 스타일이 적용된다

2️⃣ 배경

`background-color`

배경색 지정

background-color: #f12db0
background-color: rgb(122,122,123)

`background-image`

배경 이미지를 한개 또는 여러 개 지정

background-image: url("이미지 경로")

이미지 여러개 중첩시키기
- 앞에 있는 이미지가 가장 위에 깔리고, 뒤에 있는 이미지가 아래에 깔리게 된다

background-image: url("이미지 경로"), url("이미지 경로 2")

`background-posiiton`

배경 이미지의 위치 지정

/* 다섯가지 키워드를 조합해서 위치를 지정합니다 */
background-position: center;
background-position: top right;
background-position: left;
background-position: bottom center;

/* x축과 y축 수치 직접입력 */
background-position: 50px 24px; (각각 x축 y축)

`background-repeat`

배경 이미지의 반복 여부와 반복 방향 지정

background-repeat: no-repeat
background-repeat: repeat
background-repeat: repeat-x
background-repeat: repeat-y

`background-size`

배경 이미지의 크기 지정

background-size: cover | auto | contain

/* 직접 픽셀을 정해줄 수도 있습니다. */
background-size: 200px 120px

`background-attachment`

배경 이미지의 스크롤 여부 지정

background-attachment: fixed
background-attachment: scroll(기본값)
background-attachment: local

`background 단축 속성`

background 관련 속성들을 한번에 지정 할 수 있다

/* background : color imageUrl repeat position
/size attachment */

background : red url("이미지 경로") no-repeat center/cover fixed

`object-fit`

<img> 나 <video> 등 대체요소의 내용이 지정된 규격과 맞춰지는 방식을 지정

/* 네개 중 하나를 선택해서 사용합니다. */
object-fit : cover
object-fit : fill(기본값)
object-fit : contain
object-fit : none

`object-position`

<img> 나 <video> 등 대체요소의 콘텐츠 정렬 방식을 지정

object-position : 100px 40px

2️⃣ 색상

`1. 색상 이름 표기법`

색상의 이름
웹 안전 색상이 불리는 216가지 색상 이름으로 표기 가능

color: red

`2. Hex 색상 코드`

16진수 여섯자리 표기
실무에서 가장 많이 사용되는 색상 표기법
#ffffff ~ #000000

color: #ffffff

`3. rgb 색상코드`

rgb(red, green, blue) 값을 이용해 색상을 표기
rgba(red, green, blue, opacity)라는 추가 속성을 이용하면 색상에 투명도도 적용
opacity - 불투명도opacity는 요소의 불투명도를 설정
0~1사이의 숫자를 지정

color : rgb(251,241,17)

color : rgba(0, 0, 0, 0.5)

2️⃣ vw, vh

상대단위
viewport의 너비값과 높이값에 비례하여 결정

/* viewport가 1200(px)x920(px)인 경우 */

10vw => 1200x0.1 = 120px
50vh => 920x0.5 = 460px
100px => 1200x1 = 1200px

2️⃣ calc()

괄호 안의 사칙연산을 통한 결과값을 속성값으로 사용가능

`덧셈, 뻴셈`

❗ calc() 덧셈, 뺄셈 기호 앞 뒤에 반드시 공백을 주셔야 합니다.

.item1{
	background: red;
	width: calc(50px + 50px);
	height: 50px;
}
.item2{
	background: blue;
	width: calc(100% - 120px);
	height: 50px;
}

`곱셈, 나눗셈`

.item3{
	background: green;
	width: calc(2*100px);
	height: 50px;
}
.item4{
	background: orange;
	width: calc(100%/4);
	height: 50px;
}

2️⃣ posiiton

HTML 요소가 배치되는 방식 결정
top, left, bottom, right 속성을 이용해 좌표값을 변경

✅ position 속성값

`static`

기본값
문서상 원래 있어야 하는 위치 배치
top, left, bottom, right 속성을 사용할 수 없다
위치 조정이 불가능한 기본 HTML 요소의 상태

`relative`

원래 있던 자리를 기준 으로 요소의 위치를 조정
top, left, bottom, right 속성 적용이 가능

`absolute`

절대 좌표를 기준 으로 요소의 위치를 조정
절대 좌표의 기준
- 부모 중 relative가 적용 된 요소 를 찾아서 절대 좌표의 기준으로 삼는다
- if 없다면,
  - HTML의 body 전체를 기준으로 잡게 된다
top, left, bottom, right 속성 적용이 가능

`fixed`

viewport를 기준 으로 요소의 위치를 조정
스크롤을 내려도 사라지지않고 화면 어딘가에 고정된다
top, left, bottom, right 속성 적용이 가능

`sticky`

부모 요소의 좌표 기준 으로 요소의 위치를 조정
스크롤을 내려가지 않았을 때는 static처럼 작동하다가, 해당요소의 위치 아래로 스크롤이 내려가면 지정한 좌표에 고정

2️⃣ z-index

position을 이용해 요소의 위치를 옮기다 보면 여러개의 요소가 겹쳐지는 경우가 발생
.z-index 사용하여 우선순위 선정
z축

z-index: auto (기본값)
z-index: 1
z-index: 9990

2️⃣ transition

애니메이션 추가하여 움직임을 줄 수 있다

✅ transition-property

어떤 속성(property)에 transition을 적용할 것 인지 를 지정

transition-property: color,width, all.....

✅ transition-duration

transition에 걸리는 시간
전환효과가 걸리는 시간

transition-duration: 0.2s

✅ transition-timing-function

transition의 속도 패턴 을 지정
transition의 변화가 일정한 속도로 일어날 것 인지, 아니면 빠르게 시작했다가 느리게 끝날 것 인지와 같은 속도 패턴

`ease-in-out`

천천히 시작 → 정상 속도 → 빠르게 종료

transition-duration: ease-in-out

`linear`

일정한 속도로 변화

transition-duration: linear

`ease`

시작시 점점 빠르게 → 느려지며 종료

transition-duration: ease

`ease-in`

천천히 시작 → 속도 높여 종료

transition-duration: ease-in

`ease-out`

빠르게 시작 → 천천히 종료

transition-duration: ease-out

✅ transition delay

transition 요청을 받은 후 실제로 실행되기까지 기다려야 하는 시간의 양
이벤트가 발생한 시점부터 transition delay 이후에 트랜지션 실행

transition-delay: 4s

✅ transition 속성 한번에 주기

정승원

이전 포스트

2023.02.21 TIL

다음 포스트

2023.02.22 TIL

📌 오늘의 생각

📒 목차

CSS

1️⃣ Cascading (캐스케이딩)

✅ 중요도

✅ 구체성 (명시도)

✅ 선언순서

2️⃣ 배경

background-color

background-image

background-posiiton

background-repeat

background-size

background-attachment

background 단축 속성

object-fit

object-position

2️⃣ 색상

1. 색상 이름 표기법

2. Hex 색상 코드

3. rgb 색상코드

2️⃣ vw, vh

2️⃣ calc()

덧셈, 뻴셈

곱셈, 나눗셈

2️⃣ posiiton

✅ position 속성값

static

relative

absolute

fixed

sticky

2️⃣ z-index

2️⃣ transition

✅ transition-property

✅ transition-duration

✅ transition-timing-function

ease-in-out

linear

ease

ease-in

ease-out

✅ transition delay

✅ transition 속성 한번에 주기

2023.02.21 TIL

2023.02.23 TIL

0개의 댓글

`background-color`

`background-image`

`background-posiiton`

`background-repeat`

`background-size`

`background-attachment`

`background 단축 속성`

`object-fit`

`object-position`

`1. 색상 이름 표기법`

`2. Hex 색상 코드`

`3. rgb 색상코드`

`덧셈, 뻴셈`

`곱셈, 나눗셈`

`static`

`relative`

`absolute`

`fixed`

`sticky`

`ease-in-out`

`linear`

`ease`

`ease-in`

`ease-out`