[TIL] 22.10.14

nana·2022년 10월 14일

CSS

TIL

목록 보기

8/50

오늘 배운 것 - CSS

1. Cascading

캐스케이딩 (Cascading) 이란?
수 많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 css의 우선순위 적용 원리이다.

Cascading 기준

1) 중요도
2) 구체성 (명시도)
3) 선언 순서

1) 중요도

CSS가 선언된 위치에 따라 우선순위가 결정된다.

브라우저 스타일 시트(기본값) < 사용자 스타일 시트(유저) < 개발자 스타일 시트(개발자가 작업)

브라우저 스타일 시트
- 기본적으로 내장되어 있는 스타일
- 링크, 버튼 등
사용자 스타일 시트
- 사용자가 본인의 취향, 편의에 맞게 설정해 놓은 스타일 옵션
- 사용자 폰트 지정, 고대비 모드 사용 등
개발자 스타일 시트
- 해당 웹 페이지의 개발자가 만들어서 넣어놓은 스타일 시트
- 링크, 버튼 등에 선택자로 css속성을 적용시키는 경우
- 개발자 스타일 시트 내에서도 우선순위가 적용된다.
- link로 연결한 CSS파일 < style 요소 안에 있는 CSS < 인라인 스타일 CSS

2) 구체성 (명시도)

CSS 선택자를 통해 선택할 대상을 구체적으로 특정할수록 명시도가 높아진다.

부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스/가상 선택자 < ID선택자

(ID는 하나의 요소에만 부여, 클래스는 중복 부여가 가능하기 때문에 ID 선택자가 명시도가 더 높다.)

📌 강제로 명시도 끌어올리는 방법
!important
CSS 전체에서 우선순위 최고가 된다.
반드시 필요한 부분만 최소화 해서 사용할 수 있으나, 가능하면 사용하지 않는 편이 좋다.
*{ color: red!important; }

3) 선언 순서

중요도와 명시도가 동일할 경우, 나중에 선언한 스타일이 우선 적용된다.

2. CSS 배경 속성

background-color
요소의 배경에 색상을 지정한다. color와 속성 지정이 동일하다.
background-image
요소의 배경 이미지를 한개, 혹은 여러 개 지정할 수 있다.
- bacground-image: url("이미지 경로")
background-image: linear-gradient(방향, 시작색상, 종료색상;)
그라데이션 배경을 지정할 수 있다. 방향은 생략 가능하다. (기본값 아래에서 위 방향)
- radial-gradient : 원형 그라데이션
- conic-gradient : 콘형 그라데이션

/* background-image에 이미지와 그라데이션을 중첩시켜서 적용할 수 있다. (이미지와 이미지도 중첩가능) */

url("../img/icecream.png"), linear-gradient(#ebfc80, #00807e)
-> 먼저 선언한 이미지가 위에 위치하게 된다.

background-position
- 요소의 배경 이미지의 위치를 지정한다.
- center | top | left | right | top right | 50px(x축) 150px(y축);
background-repeat
요소의 배경 이미지의 반복 여부, 반복 방향을 지정한다.
- repeat : 기본값
- no-repeat : 반복 배열 제거
- repeat-x : x축 반복
- repeat-y : y축 반복
background-size
요소의 배경 이미지의 크기를 지정한다. 100px 100px 등 직접 수치 입력도 가능하다.
- auto : 이미지의 기본값으로 입력된다
- cover : 이미지를 늘려 요소 안에 빈 틈이 없도록 이미지를 맞춰 늘려 채워준다. 이미지가 잘릴 수 있다.
- contain : 요소 배경 이미지를 늘려 화면에 꽉 맞게 해주지만, 빈틈이 있다. 이미지의 전체를 다 보여줘야 할 경우 사용한다.
background-attachment
배경 이미지의 스크롤 여부를 지정한다.
- scroll : 기본값. 내부 스크롤을 내려도 변경되지 않는다.
- fixed : 배경을 고정시킨다. 스크롤을 움직여도 배경이 움직이지 않는다.
- local : 내부에도 스크롤이 적용된다. 내부 스크롤을 내리면 배경이 같이 움직인다.

background 단축 속성

color, image, position, repeat, size 경우 단축 속성으로 지정이 가능하다.

📌 순서에 유의!
background: color image repeat position/size attachment

예) background: red url("../star.png") no-repeat center/cover fixed

object-fit

img나 video 등은 background 속성 사용이 불가능하다.
object-fit은 대체요소의 내용이 지정된 너비와 높이에 맞춰지는 방식을 지정해 줄 수 있다.

object-fit: fill; (기본값)
이미지가 가로값, 세로값이 사이즈에 맞춰 늘어난다.
object-fit: cover;
이미지가 적절한 비율로 늘어나며 영역을 맞춰 채운다.
object-fit: contain;
이미지 전체가 깔끔하게 보여지만 여백이 존재한다.
object-fit: none;
이미지의 원본 사이즈를 그대로 보여준다. 여백이 존재한다.

object-position

img, video 등 대체요소의 콘텐츠 정렬 방식을 지정한다.

object-position: center top; | 100px 50px;

3. CSS 색상

색상 표기법
1) 색상 이름
2) Hex 색상코드
3) rgb /rgba

1) 색상 이름 표기법

색의 이름을 표기하는 방식이다. (red, blue 등)
기본 16색 + 200색 = 총 216가지 색(웹 안전 색상) 표기 가능

📌 웹 안전 색상이란?
어떤 운영체제, 어떤 브라우저에서도 안전하게 그려지는 색을 뜻하며, 에러 위험이 적고 범용성이 좋아 공공기관과 같은 사이트에 사용된다.

2) Hex 색상코드

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

3) rgb /rgba

rgb(red, green, blue) 값을 이용해 색상을 표기하는 방법이다.
rgb 각 요소에는 0~255 사이의 숫자를 입력할 수 있다.
rgba를 이용하면 색상에 투명도를 적용할 수 있다. (1은 100%, 0.0소수점은 반투명)

* opacity

opacity 요소의 불투명도를 설정할 수 있다. (0~1 지정 가능)

4. 상대 단위 vw / vh

요소의 규격을 viewport의 너비값과 높이값에 비례하여 결정한다.

📌 viewport 란?
Device > Browser > Viewport
브라우저에서 메뉴바를 제외하고 실제로 컨텐츠가 노출되는 영역을 의미한다.
반응형 작업을 할 때 viewport 단위를 사용한다.

예시)
viewport가 1200px x 920 px 인 경우,

10vw -> 1200 x 0.1 = 120px
50vh -> 920 x 0.5 = 460px
100vw -> 1200 x 1 = 1200px

5. calc() 함수를 이용한 단위값 설정

CSS에서도 함수를 사용할 수 있다.

calc() 함수는 사칙연산을 수행한 결과를 속성값으로 사용한다.
덧셈, 뺄셈을 할 경우 기호 앞뒤로 공백이 필수이다.

width: calc(100%/4);
width: (100% - 120px);

6. Position

HTML 요소가 배치되는 방식을 결정하는 속성이다.

top / left / bottom / right
해당 방향 기준으로 요소의 좌표값을 변경한다.

1) static (기본값)

요소를 문서상 원래 있어야 하는 위치에 배치한다.
top/left/bottom/right 적용이 불가하다.

2) relative

원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다.

3) absolute

절대 좌표를 기준으로 요소의 위치를 조정할 수 있다.
절대 좌표의 기준은 부모 박스 중 relative가 적용된 박스가 된다.
만약 relative가 적용된 부모 박스가 없다면, html의 body전체를 기준으로 삼게된다.
여러개의 relative가 적용된 부모 박스가 있다면, 가장 가까운 바로 상위의 요소를 기준으로 삼는다.

4) fixed

스크롤과 무관하게 뷰포트를 기준으로 요소의 위치를 고정시켜 설정할 수 있다.
예) 쇼핑몰 메인 메뉴, 상담 요청 퀵 버튼

5) sticky

요소의 원래 위치에 있다가 스크롤이 내려가면 지정한 좌표에 고정된다.
기준은 부모 요소의 좌표이다.
static + fixed를 혼합한 경우와 비슷하다.
최초 상태에서는 static처럼 작동하고, 스크롤이 내려갈 경우에는 fixed처럼 고정시킨다.

6) z-index

여러개의 요소가 겹쳐져 있을 때, 무엇이 앞으로 나올지 결정하는 속성이다.
기본값은 auto 이다.
1,2,3 ... 숫자를 입력하여 순서를 지정할 수 있다. 숫자가 높을 수록 앞으로 나오는 순서가 높다.

📌 position이 적용되어 있지 않을 경우(static), z-index 역시 적용되지 않는다.

7. Transition

css속성을 이용한 변화의 전/후 사이에 애니메이션을 사용해 움직임을 부드럽게 만들어준다.

1) transition-property

어떠한 속성에 transition을 적용할 것인지 지정한다.
예) transition-property: color, transform;

2) transition-duration

걸리는 시간을 지정한다. 초는 s, 밀리초는 ms
예) transition-duration: 0.2s

3) transition-timing-function

transition의 속도 패턴을 지정한다

linear : 일정한 속도로 변화한다.
ease : 시작할 때에는 빨라지다 느려진다.
ease-in : 천천히 시작했다가, 속도를 높여 끝난다.
ease-out : 빠른 속도로 시작했다가, 천천히 끝난다.
ease-in-out : 천천히 시작했다가, 정상 속도가 됐다가, 빠르게 끝난다. 위화감 없이 가장 많이 사용된다.

4) transition-delay

transition 요청을 받은 후, 실제로 실행되기까지 기다려야하는 시간을 지정한다.
여러개의 transition의 순서를 지정하고 싶을 경우 사용해준다.
transition-delay: 2s

5) transition 단축 속성

보통 transition 단축 속성을 이용하여 작성해준다.

📌 순서에 유의!
{ transition: property duration timin-function delay; }

{ transition: color 0.4s ease-in-out 1s }

오늘의 회고

CSS에 대해 자세히 배우다 보니 점점 몰랐던 내용들을 접하게 되는것 같다.
object-fit이나 position sticky와 같은 새로운 내용들은 복습을 통해 기억하도록 해야겠다.

오늘로 벌써 2주차 마지막날이 되었다. 시간이 느리게 가는듯 하다가도 빨리가는 기분..
아직까진 온라인 수업이라 많이 힘들진 않지만, 계속 앉아있다 보니 피곤하긴 하다.
오프라인 수업에 들어가면 학원까지 왕복하는 시간이 부담스러워서 근처에 방도 빨리 구해야 될 것 같다.
그 전까지 운동을 더 열심히해서 체력을 길러놔야겠다.

nana

프론트엔드 개발자 도전기

이전 포스트

[TIL] 22.10.13

다음 포스트