반응형 CSS

안녕하세요. 

오늘은 반응형 웹개발에 대해서 작성해 보려고 해요. 

 

요즘, 워낙 다양한 크기의 기기들이 많아서 반응형 웹개발은 필수가 되었는데요, 

다양한 요소가 필요하지만 주요 CSS 속성으로는 다음과 같은 것들을 활용할 수 있습니다. 

 

%

자주 사용하는 것으로 % 가 있는데요, 

기억해야 할 것은 %는 부모 컨테이너의 영향을 받기 때문에,

100% 라고하면, 부모 컨테이너의 100%가 되는 것입니다. 

 

vh

대신, vh 라고 하면 화면의 높이를 의미하는 것이기 때문에, 

100vh 라고 하면 전체화면의 높이가 됩니다. 

 

이 밖에도 flex gird, flex box, vw 등을 사용할 수 있습니다. 

---

화면 크기에 따라 박스 배치를 바꾸고 싶다면 Media Queries를 사용할 수 있는데요, 

보통은 3가지 크기에 따라 다음과 같이 범위를 정할 수 있을 것 같아요 

• mobile : 320px ~ 480px
• tablet : 768px ~ 1024px
• desktop : 1024px ~

자세한 내용은 mdn 에서 살펴보면 됩니다. 

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

 

반응형 웹을 개발하면서 필요한 내용들은 또 추가를 해보도록 하겠습니다.