🎆 오늘 한 것
- 수업 들은 거 정리하고 복습
- 테일윈드 모각코(2시간)
🙄 오늘 하려고 했는데 못한 것
- 리덕스(FE/BE 코드까지)
- 알고리즘(해결 또는 단순화)
✨ 반응형 성능 개선 관련으로
오늘도 내 html css는 '얼렁뚱땅 기본기 없음 레전드'였음을 깨닫는 하루였고...
솔직히 반응형 배운다는 말에 든 첫 생각은 '반응형 뭐 어려운 게 있나?' 였음ㅎㅎ; 그야말로 우매함의 봉우리 그 잡채
🎇 지금껏 작업해오던 방식
full 페이지를 먼저 싹 다 모양을 잡아놓은 후에 스타일을 덮어씌우면서 반응형으로 만드는 것...
이게 뭐? 싶었는데 성능 부분에서 효율적이지 못하다. 생각해보니 진짜임...
그럼 어떻게 작성?
🎇 공통 스타일 / 모바일 스타일 / 데스크탑 스타일
이렇게 세 가지로 분류해서 작성하는 게 더 효율적이다. js 작성할 때도 중복 코드 최대한 줄이려고 온갖 쇼를 하잖아 css도 똑같은데 css에서는 왜 안하고 있었지? 싶다. 반성...!😅
/* 공통 */
body{
background-color: yello;
}
/* 모바일 디바이스 (Mobile Device) */
@media (min-width: 320px) and (max-width: 768px){
body{
background-color: blue;
}
}
/* 데스크탑 디바이스 (Desktop Device) */
@media (min-width: 769px) {
body{
background-color: blue;
}(당연하지만 브레이크 포인트의 개수는 더 많아질 수 있다.)
기존에는 @media (min-width: 320px) and (max-width: 768px) 이런 식으로 범위를 따로 정하지 않고, 계속 케스케이딩하며 덮어씌우는 방식으로 작업했다.
하지만 이렇게 범위를 정해서 작성을 하게 되면 스타일을 계속 덮어씌우는 것이 아닌, 특정 사이즈에서만 필요한 스타일은 이 범위에서만 적용 시킬 수 있다. 당연히 성능면에서 이게 낫다.
하지만 문제가 있다면?! 이 방식은 겁나 어렵다.
작업 시작할 때부터 모든 사이즈를 확인해가며 작성해야 된다. 많은 연습이 필요할 듯
아 그리고 오늘 수업을 통해서
테일윈드를 사용해서 반응형 작업
도 딱 이 방식이랑 똑같은 식이었다... 왜 특정 브레이크 포인트를 하나하나 다 앞에 달아줘야 되지 겁나 불편하다... 이러고 있었는데 이게 저 범위를 정한 미디어쿼리랑 동일한 역할을 하는 것이었다.
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">✨ 고해상도 디바이스를 위한 css
🎇 우선 내 기기의 CSS pixel-ratio는?
지금 내가 쓰고 있는 기기의 pixel-ratio 확인해볼 수 있는 사이트
애플이 픽셀 밀도를 겁나 중시하는구나 싶다 ㅎㅎ
아무튼, 저렇게 배율이 높은 기기는 일반적인 이미지는 해상도 화질 가능성이 있다는 말이다.
(배율이 1인 윈도 환경에서는 멀쩡하게 잘 보이던 이미지가 배율 2인 맥북에서 보면 살짝 불-편하게 화질저하가 생긴다든지)
그렇다면 어떻게 하는 게 좋을까!?
-webkit-min-device-pixel-ratio: 2
이런 상황에 써먹을 수 있는 미디어쿼리도 존재한다는 사실
/* 고해상도 배경이미지 미디어쿼리 */
@media (-webkit-min-device-pixel-ratio: 2),
/* 2배율 이상일 때 */
(min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
.logo__link {
background-image: url(./../images/webcafe-logo@2x.png);
}
}특정 pixel Ratio 이상의 디바이스에서는 더 고화질의 이미지를 보여주는 방식이다.
📌 참고글
Retina Ready Images and Responsive Web Design
🎆 내일 할 것
- 수업 들은 거 정리하고 복습
- 테일윈드 스터디
- 리덕스(FE/BE 코드까지)
- 알고리즘(해결 또는 단순화)
📌 킵해놓을 todo
- preload / modulepreload / prefetch 공부... 언제하지?
- deep dive 19장 프로토 타입
📚 이번 주 개인 목표
- 프로토타입
- 클로저 ✅
- 타입스크립트 책 보기
- 고급 리덕스 파트 강의 보기
- 알고리즘 문제 해결 접근법 파트 강의 보기(여유있으면 해결 패턴까지)
- 야무님 강의 플렉스/그리드, 반응형 파트
📝 오늘의 일기
웹스톰 깔아봤다... vscode에서 갈아타겠다는 건 아니고(vscode에 너무 익숙해짐) 편하다길래 한 번 찍먹... 낯설어서 어렵당
오늘도 유익했군😎 야무쌤 강의도 봐야겠다 빨리...
아... 오늘도 뭔가 하루가 금방 지나갔다. 요며칠 해이해졌네 열심히 좀 하자!! 이러다 이번 주 목표치 반도 못 채우겠어ㅠ
📌 오늘 강사님께서 추천하신 책
제프리 젤드만의 웹표준 가이드 : 꼭 봐라는 아니고 볼 사람은 봐라 느낌
