CSS - 8. 뭔가 있어 보이는 반응형 디자인
https://opentutorials.org/course/3086/18323
*생활코딩의 CSS 강좌를 따라가고 있습니다.
1. 반응형 디자인 (Responsive Web)
요즘 이슈가 되고 있는 '반응형 웹'이란 '화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 동작하는 것'으로 한마디로 어느 화면에서든 최적화된 모습으로 웹이 변하게 하는 것이다. 왜냐하면 예전에는 컴퓨터에서만 동작하던 웹이 이제 수많은 형태에 화면에서 동작하게 되었다. 이를테면 스마트폰이나 아이패드 화면 같은 곳에서 말이다. 따라서 개발자들은 여러 화면에 대응되는 웹페이지를 만들기 위해 애를 써야 했다. 그 끝에 나온 것이 바로 반응형 디자인이다.
2. 반응형 디자인 연습 - 미디어 쿼리 (mediaquery)
그럼 우리도 한번 반응형 디자인이라는 것을 만들어보자 반응형 디자인 연습을 위해 기본적인 html 코드에 responsive라는 문자를 div로 씌워서 상자를 씌워보았다.
크기도 60px, 두꺼운 녹색 상자도 씌웠다. 우린 이제 이런 건 간단하게 할 수 있게 되었다. 멋지다, 나!
자 그럼 이제 이걸 화면의 크기에 따라 보였다 없앴다 할 것이다. 왜냐하면 그것이 바로 반응형 웹이니까!
요때 필요한 것이 미디어 쿼리이다.
1) 창 크기가 800px 보다 작을 때 글씨를 사라지게 하고 싶다
: 이를 위해 먼저 현재 내 웹 창의 크기를 확인한다. 웹 창 오른쪽 클릭> 검사창을 띄운 뒤 화면의 크기를 조정해보면 오른쪽 상단에 현재 창의 크기를 볼 수 있다.
커서로 창을 밀고 당길 때만 볼 수 있다!자 그럼 한 번 설정해보자.
2) 미디어 쿼리의 설정
미디어 쿼리는 @media 라는 이름으로 시작한다. 그리고 우리는 800픽셀보다 작을 때 <div>안에 있는 글씨가 사라지기를 원했다. 그러니까, 픽셀의 최대값이 800px이하이면 display를 none시킨다는 말이다. 그걸 그대로 @media 안에 넣는다.
<style>
@media(max-width:800px) {
div{
display:none;
}
}
</style>
자 이걸 적용시킨 뒤에 창을 줄여보면, 800 이하가 되었을 때 글자가 뿅 사라진다. 스마트폰 같은 소형화면을 사용할 때 이런 크기 설정을 통해 불필요한 글자나 디자인을 @media 방식을 통해 안 보이게 수 있는 것이다. 간단하다!
자 이제 연습을 다 했으니 우리 홈페이지에 적용해보자!
3. 자 배운 걸 적용해보자 - 작은 화면에서는 꾸민 것을 없애보자
화면을 작게 줄이면 이런 선과 목차로 형태는 본문이 찌그러지므로 보기가 싫다.
그래서 아래와 같은 방향으로 개편안을 짜 보았다
1) 선으로 잘라놓은 목차도 원래 모양대로 간편하게 돌아와 좁고 길어진 본문을 좀 더 넓게 봤으면 좋겠고,
2) 혼자 쓸 때 없이 커진 저 제목도 좁은 화면에서는 조금 줄어들었으면 좋겠다.
4. 800px보다 작거나 커지면 이 일이 일어난다
위의 조건을 먼저 입력해준다. 800px 보다 작을 때...
1) 목차와 본문이 나란히 있던 부분을 800px일 때는 적용되지 않도록 수정해보자
자 그리고 이 안에 목차와 본문을 나란히 배치할 때 썼던 코드를 복사해서 붙여 넣는다.
이 코드들이 복잡해 보이도록 꾸민 코드이다 그러니까 이걸 싹 지워준다. 그리고 원래대로 block으로 보이게 display 값을 변경해주자.
그리고 리로드 해주면, 나란히 놓였던 것이 풀려 있다.
2) 이번엔 목차에 있는 선을 없애보자.
목차의 선이 있게 만드는 부분은 바로 요기이다.
이걸 @media(max-width:800px){ 이 안으로 데리고 와서 } 값을 none으로 바꿔주자.
그리고 리로드 하면...!
역시나 사라졌다. 같은 방식으로 WEB 아래 있는 선도 없애면 된다.
이렇게!이렇게 최종적으로 우리는 화면의 크기에 따라 스스로 바뀌는 웹을 완성하였다.
