위코드 1주차 과제 제출을 부랴부랴 마치고, 마음속에 반응형으로 만들지 못했던게 찝찝하게 남아있었다. 찝찝함보다는 정복(?)하고 싶은 정복욕이라고 하는게 더 맞겠다. 그래서 과제 제출은 끝났지만 만들어놓았던 페이지를 반응형으로 만들어 보았다. 그러면서 배운 지식 몇 가지를 아래에 기록으로 남기고자 한다.
✨ 새롭게 공부한 것
media query and responsive web
반응형으로 만든다니 어려울 것 같았지만, 결국 기본 컨셉은 화면을 줄여놓고 모바일이나 아이패드에서도 컨텐츠가 잘 보이도록 재배열 하는 것이었다. 그 breakpoints 크기로 화면을 줄여놓고 보면서 추가적으로 배열이 필요하거나 글씨 크기 조정이 필요한 곳은 CSS rule을 추가해주면 되는 것-! 그걸 단순히 아래 syntax에 맞춰 써주면 되는 것이었다.
MDN 공식문서 : Beginner's guide to media queries
1. basic syntax and usage
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}어디에서 찾아보면 media only screeen이라고 나와있고, 어디에 보면 media print라고 나와있고,, 뒤쪽도 어디에 보면 max-width를 사용하고 어디에는 orientation:landscape를 이용하고..넘나 헷갈리는 것이었다. 결국 나는 다시 MDN 공식문서로 가서 배웠다.
media type : all, print, screen
media-feature-rule : width and height / orientation / use of pointing devices
위의 두가 지 조건에 대한 걸 넣어주면 되는 것이었다.
따라서 내 코드에 다음과 같이 넣어줬다.
media screen and (max-width: 768px) {
}2. So what are the common breakpoints?
만들다 보니 궁금해진건, 미디어 쿼리가 적용되는 그 시점을 어디로 해야하냐는 것이었다. 자기소개 페이지에는 한 구간만 적용해 주었으나, 앞으로를 위해 조금 더 서칭해보았고, 이 글애 의하면, 아래와 같이 적용할 수 있겠다.
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more — Extra large screens, TV
정해진 것은 없기에 목표하는 바에 따라 조정해주면 되겠다.
✨ 반응형으로 적용하며 막힌 것과 해결방식
두 가지 문제가 있었다. 하나는 전체화면으로 봤을때 적용되어 있었던 애니메이션이 미디어 쿼리를 적용하니 전혀 반응하지 않았고, 작은 화면에서는 오히려 글씨가 움직이면 이상해 보여 재배치를 해야했다. 또 하나는 공부하기 위한 취지에서 그리드를 사용해 보았는데, 이걸 반응형으로는 세로로 쭉 나오게 하고 싶은데, 이게 죽어도 안되는 것이었다. 생각보다 해결점은 간단했고, 아래와 같다.
문제 1
- 🚫 문제점 : 미디어 쿼리를 적용하자 JS로 연결해놓은 animation이 적용되지 않는 문제
- 💡 해결방식 : Javascript에서 mediaquery를 인식하도록 만들어 준 후, 해당 범위에서만 animation이 적용되도록 설정해준다.
- ✍️ 적용한 코드 : Window.matchMedia() - MDN 공식사이트
if (window.matchMedia("(min-width: 768px)").matches){
} else {
}내가 써놓았던 코드를 이 안에 넣어주어 만들어주었다. 지금은 HTML에 아예 element를 넣어놓고 JS로는 keyframes을 감지하게 만들어 놓았는데, 다시 한 번 만든다면 이런 요소는 아예 JS createelement로 넣어서 코드를 더 깔끔하게 만들고 싶다.
문제 2
- 🚫 문제점 : Grid를 반응형으로 줄였을때 item들이 한 칸만 차지하며 세로로 쭉 나오게 만들어야 한다.
- 💡 해결방식 : Javascript에서 mediaquery를 인식하도록 만들어 준 후, 해당 범위에서만 animation이 적용되도록 설정해준다.
- ✍️ 적용한 코드 : Grid-template-columns : MDN 공식사이트
내가 실수한게 있어서 한참동안이나 안되었던 것이다. 그것은 바로..syntax 실수!!
'grid-template-columns: 1fr' 단순히 이렇게만 적용해 주고 있었기 때문에 이틀동안 아무리 왜 잘못되었는지 찾아봐도 안되는 것이었다. 이걸,, '100% 1fr'을 넣어주니 한번에 해결이 되었다. 다음부턴 뭐가 제대로 적용이 안되면 기본 syntax부터 확인하자..!
그 후에는 grid-template-row로 사진 각각의 크기에 맞게 높이를 조정해주었고, 사진의 끝부분이 보여지는 등 컨텐츠가 제대로 보여지지 않는 부분은 object-position을 사용해서 위치를 조정해주었다.
.about__container{
padding: var(--padding);
display: grid;
grid-template-columns: 100% 1fr;
grid-template-rows: 1.7fr 1.7fr 2.0fr 1.8fr 1.6fr 1.5fr 1.7fr;
grid-gap: 0.6rem;
}
#eat{
grid-row: 1/2;
grid-column: 1/2;
}
#eat img{
object-position: top;
}
#tree{
grid-row: 2/3;
grid-column: 1/2;
}
#stollen{
grid-row: 3/4;
grid-column: 1/2;
}
#swingdance{
grid-row: 4/5;
grid-column: 1/2;
}
#photography{
grid-row: 5/6;
grid-column: 1/2;
}
#travel{
grid-row: 6/7;
grid-column: 1/2;
}
#travel img{
object-position: 50% 80%;
}
#workout{
grid-row: 7/8;
grid-column: 1/2;
}
#workout img{
object-position: 50% 30%;
}
코린이는 그렇게 syntax를 잘 몰라 헤매기도 하고, syntax를 틀려 한참을 막히기도 했다고 한다...다음부터는 제대로 보고 적용해보기! 자기소개 페이지를 빌미로 이것저것 공부해보고 참 재미있었다.
