반응형2 [CSS 기초] 단위 (px, %, vw, vh, em, rem) 안녕하세요 PNcoding입니다 :) CSS에서는 선택자의 크기를 지정하기 위해 사용되는 여러 가지 단위가 있습니다. 예를 들어 div { width: 300px; } 이라고 적을 때 숫자 뒤에 쓰인 px이 바로 단위입니다. 이번 포스팅에서는 이러한 단위의 종류에 대하여 알아보도록 하겠습니다. px (pixels 픽셀) CSS에서 사용되는 가장 기본적인 단위입니다. 브라우저의 크기가 변경이 되든, 축소되든 확대가 되던지 항상 그 크기값이 변하지 않기 때문에 절대적인 값이라 불러 줍니다. 또한 다른 요소들의 크기에 영향을 받지 않습니다. % (퍼센트) 부모요소의 크기값에 비례하여 적용되는 단위입니다. 부모요소의 크기에 따라 값이 상대적으로 변하기 때문에 상대적인 값이라고 불러줍니다. 부모와 자식요소를 만들.. 2023. 11. 27. [CSS 기초] 미디어 쿼리 (media query) 안녕하세요 PNcoding입니다 :) 웹 사이트에 접속할 수 있는 기기는 다양한 종류가 있습니다. 예를 들면 맥북, 아이패드, 아이폰, 갤럭시 제트플립 등이 있죠. 이러한 다양한 기기는 또한 화면의 크기도 다양합니다. 따라서 이러한 다양한 화면에서 웹사이트를 잘 보이도록 스타일을 변경해 주는 게 필수 요소가 되었죠. 이렇게 스타일을 변경시켜 주는 것을 반응형이라고 하며, 이러한 반응형을 구현하기 위해 css의 미디어 쿼리를 활용을 해야만 합니다. 따라서 오늘은 요즘 시대의 필수 미디어 쿼리에 대하여 알아보도록 하겠습니다. 미디어 쿼리 (Media Query) 미디어 쿼리는 기기의 유형, 화면 해상도, 뷰포트 너비 등에 따라 웹사이트의 스타일을 변경할 때 사용합니다. 미디어 쿼리의 가장 기본적인 구조는 아.. 2023. 11. 20. 이전 1 다음 반응형
