2023.05.04 CSS 기본 개념

font-family: inherit 되는 속성

폰트 적용하는 법

@font-face {
  font-family: '작명~~';
  src : url(../font/NanumSquareR.ttf)
}

한글폰트 사이즈는 너무 커서 1~2개만 사용을 권장함

용량을 주리려면 .woff → ttf의 3분의1까지 줄여줌

Anti-aliasing

폰트 부드럽게 처리하는법

→ 맥 OS의 경우 자동으로 처리를 해주므로 안해도 무관

아래와 같이 아주 조그만한 각도를 회전시키면 된다.

p, h4, h3, h2, h1, span {
  transform: rotate(0.03deg)
}

레이아웃 - Flexbox

display: flex

→ 부모 속성에 주기

flex 특징

• width 600px를 준다고 해도 600px가 되지 않는다.

flex 이용 시 정렬

• justify-content: 가로 정렬
• flex-direction: row(가로배치) / column(세로배치)
• align-item : 상하정렬

flex-wrap : wrap → 요소 width가 크면 아래로 보내줌

flex-grow : 박스 크기를 비율로 설정

CSS 단축키

→ 입력 후 tab키

m10 → margin:10px

mt10 → margin-top: 10px

w100% → width: 100%

단위

vw(Viewport) : 브라우저 폭에 비례해서 설정해줌

vh() : 브라우저 높이에 비례해서 설정해줌

rem : html 사이즈(16px)의 10배, 기본 폰트 사이즈(16px)에 비례 ( 16px = 1rem / 160px = 10rem )

em : 내 폰트 사이즈의 X배 ( font-szie(15px) = width:20em(300px) )

미디어쿼리

@media screen and (max-width: 1200px)→ 현재 브라우저 폭이 1200px 이하일 경우 {

.main-title {

font-size: 30px; → 이렇게 적용시켜주세요.

}}

작성할 땐 큰 사이즈 → 작은 사이즈 순서로 작성

많이 사용 하는 사이즈: 태블릿 1200px / 모바일 992px 768px 576px

 

숙제 하나 할 때마다 1~2시간이 걸리지만 이걸 해결 했을 때의 뿌듯함이 좀 더 큰 것 같다. 좀 더 열심히 해서 시간을 줄이고 싶다.