11월 11일 TIL 정리
미디어쿼리
- 미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용되도록 만들어주는 기능입니다.
ppi - pixel per inch
- device-pixel-ratio 디바이스 해상도에 따라 css 1px에 들어가는 해당 기기의 px 수
- 해상도에 따라 이미지가 다르게 보입니다.- 일반 디스플레이에서는 렌더링이 잘 되는데 레티나에서는 이미지가 흐려지는 현상이 생깁니다.
이미지가 작아집니다.
- 일반 디스플레이에서는 렌더링이 잘 되는데 레티나에서는 이미지가 흐려지는 현상이 생깁니다.
레티나란? 특정한 시야거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300ppi가 넘는)
고밀도 디스플레이.
-- ex) 가로, 세로가 100인 도형이 있는데 pixel-ratio 2라면 레티나 2배인 가로200 세로 200 으로 변경해야 합니다.
실습 - 1만 시간의 법칙
마크업을 하고 기본으로 해야 하는 필수 체크
https://validator.w3.org/#validate_by_input
https://jigsaw.w3.org/css-validator/#validate_by_input
reset.css
- 웹 브라우저마다 각기 다른 default 스타일이 지정되어 있어, 이를 초기화를 해서
공통된 스타일을 만들어 주기 위해 필요합니다.
**
요소 선택으로 스타일 주는 것은 최대한 사용하지 말자.
부모 클래스를 타고 들어가서 선택하자.
효율적으로 선택자를 사용해서 적용하자.
레이아웃에 직접적인 영향을 주는 width, height, padding, margin 스타일 작성할때
상단으로 올리자.
이미지의 의미를 판단해서 alt 설명이 필요한 것인지 확인하고 작성하자.
회고🔨
다른분들의 코드리뷰를 보면서 내가 놓치고 있는 부분이 많다는 걸 알 수 있었다.
내가 혼자 만든 것과 강사님과 같이 다시 만들어 보면서도 앞으로 마크업을 할때
모르고 놓친 부분들과 잘못된 부분을 바로잡아서 해야 한다고 생각했습니다.
많은 공부가 되는 시간이였다.👍👍
