220525) 반응형 웹(3)

학습한 내용

반응형 웹에 쓰는 폰트 단위

px
사이즈 고정값

%
부모 사이즈 기준

em
가장 근접한 부모의 사이즈 기준
10px로 썼으면 자식태그에서 1em이 10px이다.

rem
제일 상위인 html을 기준으로 크기를 가진다.


기본 font-size는 16px이다.
1em = 16px
2em = 32px . . .

---

object-fit: cover;

가로세로비를 유지하면서 이미지를 채움

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/object-fit

---

css 인용구(blockquote)

article blockquote:before{
    content:'\201C';
    top: 2.5rem;
    left:0;
}
article blockquote:after{
    content:'\201D';
    bottom: .5rem;
    right:0;
}

앞뒤로 따옴표 인용구가 생긴다.

:before , :after

content:''; 요소를 대체하는 자리

참고 - https://unicode-table.com/kr/

---

학습한 내용 중 어려웠던 점 또는 해결못한 것들

background-image:linear-gradient(45deg, #fff 30%, #ccc 30%, #ccc 50%, #fff 50%, #fff 80%, #ccc 80%, #ccc 100%);
background-size: 6px 6px;

이걸 쓰면 영역에 기울어진 실선으로 배경이 생기는데 왜 그런지 잘 이해가 안갔다.

해결방법

부분적으로 지워봤다가 그림판에 그려보고 하다가 알게되었다..

해석하면 45도로 기울이고,
#fff 30%, #ccc 30~50%,
#fff 50~80% #ccc 80~100% 순으로 색이 채워진 결과물이다.

2색깔만 쓰고 사이즈를 지정안하면 그라데이션이 되는데
사이즈를 6픽셀로 지정했기 때문에 칸칸이 나뉘어지는 모양새였다.

학습 소감

오늘은 반응형 웹 수업 후반부라서 새로 정리할 내용은 많이 없었다.
카테고리나 미디어쿼리는 내일 해야해서 사실상 오늘 반응형 웹에 자주 쓰인 것은 단위가 대부분이라 이부분을 검색해보면서 벨로그를 작성했다. 진도 따라가면서 쓰고나면 이해안되는 부분은 넘어가있는데 벨로그에 다시한번 짚으니까 정리가 잘 되는것같다.