미디어쿼리

자주 사용하는 조건 목록

Device-pixel-ratio(DPR)

이에 관한 내용은 따로 정리하였다.
https://velog.io/@vnfdusdl/DPRDevice-pixel-ratio의-이해

오늘 배운 것들

• 웹 페이지를 로딩할 때, 300kb만 되어도, 무겁다고 생각함. -> 폰트를 많이 써야한다면, 비교적 사용이 적은 아이들은 가능하다면 이미지로 만들어 이미지텍스트로 사용하는 것이 좋다.
  
• 만약, 한 폰트에서 다른 weight를 5개 선택하였다고 해도, 그건 폰트를 5개 다운 받는 것과 같음. 2개 정도가 적당!
• 의미가 없는 이미지 같은 경우에는 가상 요소로 만드는 것이 좋다!
• html 파일을 다른 모바일 기기에서 보는 방법 :
  vscode에 live-server로 html 파일을 켜두고, 컴퓨터와 모바일기기를 같은 ip주소, 즉, 같은 인터넷에 연결시킨 후, IP:PORT/파일경로 를 통해서 모바일 기기에서 접속하면 된다. (그런데 나는 안된다.. 파일 경로를 바꿔도 안되고, 파일 이름을 바꿔도 안되고, 와이파이를 다른 걸로 잡아봐도 안되고, 애플기기 삼성기기 휴대폰 태블릿 모두 다 안된다.. 와이..? 나만 안되지 나만...😭 내일 물어봐야지..)
• clip 속성/ The clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed.A rectangular <shape()> of the form rect(<top>, <right>, <bottom>, <left>). The <top> and <bottom> values are offsets from the inside top border edge of the box, while <right> and <left> are offsets from the inside left border edge of the box — that is, the extent of the padding box. The <top>, <right>, <bottom>, and <left> values may be either a <length> or auto. If any side's value is auto, the element is clipped to that side's inside border edge. (출처:mdn) -> clip: rect(, , , )로 요소를 잘라서, 특정 부분만 나오게 할 수 있다.
• position: absolute;는 normal flow에서 벗어난다. 그리고 z-index의 기본값이 1이다.
  그런데 normal flow는 기본값이 0이기때문에 absolute 속성을 주면, 해당 요소가 normal flow보다 더 앞쪽에 보이게 된다. position: relative;는 normal flow이다.(단 offset이 지정된 경우에는 offset이 지정되기 전 기준으로 다음 element가 배치된다)
• <p>태그는 <small>태그 안에 올 수 없다.
• <p>태그 안에 <p>태그가 올 수 없다.
• 웹표준 검사, css 검사는 필수!
  https://validator.w3.org/ https://jigsaw.w3.org/css-validator/
• margin-collapsing 현상이 일어나면, 1. 부모 요소에 overflow 속성 값을 적용하기 2. 부모 요소에 display: inline-block 값을 적용하기 3. 부모 요소에 border 값을 적용하기
• margin-collapsing 현상이 형제 요소에서 일어났을 때는 부모 요소에 display: flex나 grid를 주면 해결 된다
• screen-reader에서만 읽히게 할 요소들 숨기기 : 네이버 홈에서 긁어왔다!

.sr-only {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1 px;
	height: 1 px;
	margin: -1 px;
	overflow: hidden;
  }

📢오늘의 회고

수업시간에 media query 배울 때, DPR이랑 레티나 디스플레이도 언급하셨는데, 이해가 잘 안돼서 한참을 찾아봤지만.. 아직 반만 이해한 느낌이다... DPR이 뭔지는 이해했는데.. 결과적으로 왜 레티나 디스플레이에서는 이미지가 더 흐리게 보인다는 거지..? 디스플레이가 보여주는 해상도만큼 이미지 해상도가 못 따라가서 흐리게 보인다는 걸까....?🙄 주말에 더 찾아보고 내용 보충해야겠다..😅
나는 flex러버라.. flex 없이는 간단한 레이아웃도 구현 못하는 사람이었는데, 수업을 들으면서 flex를 정말 많이 덜어내고 있다!! 간단하게 정렬을 맞출 수 있는 방법들이 떡하니 있는데,, 나는 왜 맨날 display: flex;부터 선언하고 봤을까😅 배우면 배울 수록 지원할 때 제출한 나의 포폴이 너무 부끄러워진다,, 고쳐주고 싶은 부분이 너무 많아서 나를 뽑아주신걸까.🤔 그럴듯한 추론 같다. 무튼 힘든 것과 별개로 수업 들을 수 있어서 참 다행이고 행복하다😀 내일만 지나면 주말이다 내일도 파이팅!💪💪💪