CSS 3

Day·2022년 1월 7일

김버그의 HTML&CSS는 재밌다

목록 보기

6/8

💻 1. Media Query

반응형 웹을 만들기 위해 반드시 알아야 하는 CSS 선언 중 하나

Responsive Web?

데스크탑 뿐만 아니라 모바일, 태블릿의 화면에 딱 맞게 보일 수 있게 하는 것

viewport meta와 media query가 필요하다.

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

@media screen and (min-width: 768px) {
  /* Where all the magic happens... */
}

미디어 쿼리를 사용할 때는 모바일부터 시작하는 것이 정석!
Iphone 5/SE가 가장 작기 때문에 이걸로 설정해두고 해두면 👍
각 요소마다 사이즈 정해주기 (정해진 게 없으면 width: 100%; height: 100vh;)
요소 가운데 정렬 해주고 싶을 때

.class-name {
  display: flex;
  justify-content: center;
  align-item: center;
}

미디어 쿼리 영역에는 바뀌는 부분만 작성하면 된다.
position 해제할 때, auto를 써주면 됨

💻2. Typography

Typography: 텍스트를 예쁘게 디자인 하는 것

font-size: 글자 크기
- 단위: px(절대 단위) | em, rem (상대 단위)
- em: equal to capital M -> 실제로 적용된 폰트 사이즈가 1em이 됨. 불안정하기 때문에 선호하지 않음.
- rem: root em -> root는 <html>의 em. html에 적용된 폰트 사이즈가 1rem이 된다.
line-height: 줄 간격
- 단위: px | em | rem
- 주로 em을 많이 사용함. font-size를 px로 지정하고 line-height를 단위 없이 (em으로) 사용하는 것이 관례.
- line-height가 얼마가 되더라도 글자는 줄 간격의 가장 가운데에 배치됨
letter-spacing: 글자와 글자 사이의 간격. 자간
- 단위: px | em
font-family: 폰트 서체
- serif: 삐침이 있는 서체 | sans-serif: 삐침이 없는 서체

.text {
  font-family: "Poppins";
  font-family: "Poppins", sans-serif; /* Poppins 폰트가 없으면 sans-serif 아무거나 적용해라 */
  font-family: "Poppins", "Roboto", sans-serif;
}

font-weight: 폰트 굵기
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700| 800 | 900
- Regular: 400 | Bold: 700
color: 폰트 색상
- 작성 방식: hex(#fff) | rgb | rgba (a: 투명도. 0-투명 1-불투명)

✍2-1. 중요하지는 않지만 알아두어야 하는 속성들

text-align: 텍스트 정렬
- left | center | right
text-indent: 들여쓰기 | 내어쓰기
- text-indent: 10px;
text-transform: 텍스트 변형(알파벳)
- none | captialize(앞자리 대문자) | uppercase(모두 대문자) | lowercase(모두 소문자)
text-decoration: 텍스트 꾸미기
- none | underline | line-through | overline
- a 태그 밑줄 없앨 때 사용
font-style: 폰트 스타일
- normal | italic | oblique (얘도 기울이기인데 이탤릭이랑 별 차이 없음)
- em에서 기본 이탤릭 해제해줄 때 사용

✍2-2. Web Font

가져다 쓰기
google font에서 원하는 폰트 선택해서 html, css에 코드 복붙
직접 제공
1) 프로젝트에 폴더 생성해서 폰트 넣고 불러오기
2) font.css에 font-face 설정 (서치해서 하는 것이 편함)
3) import 해주기 (HTML or CSS)

✍2-3. Typography Library

일종의 Kit 같은 것
자주 사용하는 class를 만들어서 꺼내 쓰는 것
class명은 일관되고 직관적이게 정하는 것이 좋다. (ex. font-size -> .fs-name)

💻3. Background

Icon을 만들거나 이미지를 명시할 때 사용

✍Background 관련 요소

background-color: 배경색
- hex | rgb | rgba
background-image: 배경 이미지
- url() 필요함
background-repeat
- *repeat(기본값) | no-repeat
background-size
- contain | cover | custom(사이즈 조절-50% auto)
- contain: 요소 안에 모든 면이 들어감
- cover: 요소 안에 빈 공간을 남기지 않고 꽉 차게 사이즈 조정됨
background-position
- x축, y축 명시해주어야 함
- 주로 background-position: center center; 많이 사용

✍참고사항

마크업 시 기본 세팅 먼저 하기

box-sizing, margin 세팅

font 설정

이미지 html 처리 | css에서 bg로 처리

부모 요소의 크기가 정해져 있는 경우, html에서 img 태그로 이미지 삽입 시 세로가 긴 이미지인지, 가로가 긴 이미지인지에 따라 작업을 더 해줘야하는 경우가 생길 수 있음. 굉장히 번거롭기 때문에 bg로 처리하면 좋다. 모든 css 작업할 때 논리적으로 생각하면서 마크업을 하자.

strong과 span는 inline 태그!!!! 마진이랑 패딩 top-bottom 줄 때 display 변경해주자😇

html에 마크업이 되어있지 않는 요소를 추가할 때, 그게 symantic한 요소가 아닐 경우에는 가상 유도 이용하기

가로배치는 마크업 후에 진행하기

flex-grow: 공간이 남으면 플렉스 적용한 요소가 그 공간을 차지할 것인지 정해주는 프로퍼티

flex-grow: 1;

display:none을 하게 되면 스크린 리더가 인식하지 못함

width나 height에 0을 줘도 스크린 리더가 인식하지 못함

집 나간 애 취급해버리기 => position: absolute
.sr-only {
  position: absolute;
  z-index: -100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

💻4. Transition

어떤 요소에 변화를 줄 때 자연스럽게 스르륵 전환하게 만드는 요소

✍Transition을 사용할 때는

property | duration | [timing-function] | [delay]
와 같은 요소들이 명시되어야 함 []는 생략 가능

property: css 속성을 뜻함. 변화 일어날 속성이 어떤 것인지 명시해주어야 함
duration: 변화가 얼마동안 일어나는지 명시
- ms | s
- 1000ms === 1s
timing-function: 속도에 대해 지정해줌
- ease-in: 처음에는 천천히 / 나중에는 빠르게
- ease-out: 처음에는 빠르게 / 나중에는 천천히
- ease-in-out: 짬뽕
- cubic-bezier(): customizing 가능. cubic bezier 서치해서 조정하기🙄
delay: 지연 시간 지정

💻5. Animation

animation vs. transition

transition은 전환. 이미 선언해놓은 프로퍼티 값이 부드럽게 바뀔 때 사용

animation은 별개로 animation을 주고 싶을 때 줄 수 있음. 더 자유로움

animation의 속성은 굉장히 많기 때문에 property를 쪼개서 사용하는 것이 좋다

✍Animation 사용하는 법

@keyframes: 어떤 식으로 애니메이션이 동작하는지 정의해주어야 함.

from to나 %로 변화시킬 요소들 작성

@keyframes name {
  from {
    /* Rules */
  }
  to {
    /* Rules */
  }
}
@keyframes name {
  0% {
    /* Rules */
  }
  50% {
    /* Rules */
  }
  100% {
    /* Rules */
  }
}

name: animation 지정한 name 작성
duration: 변화가 얼마동안 일어나는지 명시
- ms | s
timing-function: 속도 지정
- transition과 동일 (ease-in, ease-out ...)
delay: 지연 시간 지정
iteration-count: 반복 횟수
- 정수 | infinite
direction: 방향
- reverse 사용 시 to -> from
- alternate: 번갈아가면서

mdn에서 서치하면서 사용해보기

💻6. Box-shadow

그림자 주기
h-offset | v-offset | blur | spread | color
(x축 이동 크기 | y축 이동 크기 | 흐린 정도 | 그림자 사이즈 | 색상)

보통 spread는 0
hover 시 그림자 나오게 하기
수치는 보통 디자인 툴에 나오기 때문에 너무 어려워하지 않아도 된다😇

💻7. Overflow

width와 height를 가질 수 있는 요소 안의 자식 요소나 컨텐츠가 해당 요소의 크기를 벗어났을 때 어떤 식으로 처리할 지에 대한 속성🌊

visible | auto | scroll | hidden

1. visible
overflow의 기본값
그냥 보이게 놔둠
터져 나간 컨텐츠는 다른 자식 요소들이 개무시함

2. auto, scroll
넘쳐 흐른 애들 자동으로 스크롤 생성

3. hidden
넘쳐 흐른 애들 가려버림

overflow-x | overflow-y: x, y축 따로 설정 가능

💻8. Transform

요소를 2차원/3차원의 공간에서 변형하고 싶은대로 변형할 수 있는 속성

translate() | scale() | rotate()

1. translate(x, y)
원하는 방향으로 옮길 때 사용
이동해도 원래 위치는 모두가 기억함. 다른 요소들에게 영향 주지 않음
단위는 px, %도 가능. %는 자기 자신의 상대값
position absolute에서 가운데 정렬 시에도 사용함 translate(-50%, -50%)

2. scale(N), scale(x, y)
배율
다른 요소들에게 영향 x
값은 자기 자신의 상대값

3. rotate(Ndeg)
각도 조정
deg를 작성해주어야 함 (transform: rotate(90deg))
다른 요소들에게 영향 x

💻9. Visibility

보이게 / 안 보이게 하는 속성

visible | hidden

hidden
보이지만 않는 것. opacity 0과 비슷한 상황
display: none; 과의 차이점?
box의 타입이 없는 것. 없는 박스 취급함

💖 짧은 후기

단기간에 많은 내용을 익히다 보니 슬슬 전에 배웠던 것들이 기억 안나기 시작한다😵 복습해야지...

재밌는데 어렵고 재밌당😇

css를 내가 다 짜다 보니 실습이 오래 걸린다. 연습을 꾸준히 해야겠다.

이거 다 듣고 나면 js 공부할 예정인데 js 공부하면서 작은 거라도 클론코딩 연습을 해야될 듯

Day

이전 포스트

CSS 2 - Float, Position, Flexbox

다음 포스트

CSS 3

김버그의 HTML&CSS는 재밌다

💻 1. Media Query

💻2. Typography

✍2-1. 중요하지는 않지만 알아두어야 하는 속성들

✍2-2. Web Font

✍2-3. Typography Library

💻3. Background

✍Background 관련 요소

✍참고사항

💻4. Transition

✍Transition을 사용할 때는

💻5. Animation

✍Animation 사용하는 법

💻6. Box-shadow

💻7. Overflow

💻8. Transform

💻9. Visibility

💖 짧은 후기

CSS 2 - Float, Position, Flexbox

CSS 4 - Selectors

0개의 댓글

CSS 3

김버그의 HTML&CSS는 재밌다

💻 1. Media Query

💻2. Typography

✍2-1. 중요하지는 않지만 알아두어야 하는 속성들

✍2-2. Web Font

✍2-3. Typography Library

💻3. Background

✍Background 관련 요소

✍참고사항

✍sr-only CSS 적용

💻4. Transition

✍Transition을 사용할 때는

💻5. Animation

✍Animation 사용하는 법

💻6. Box-shadow

💻7. Overflow

💻8. Transform

💻9. Visibility

💖 짧은 후기

CSS 2 - Float, Position, Flexbox

CSS 4 - Selectors

0개의 댓글