미디어쿼리3 css min&max-width&height 속성 오늘은 html의 지정 요소의 크기가 일정 크기 이상 벗어나지 않도록 최소&최댓값을 지정해 주는 속성에 대해서 알아보는 시간을 갖도록 하겠습니다. 브라우저의 크기가 달라지는 상황에, 우리가 원래 설정했던 이미지가 브라우저와 함께 커지거나 작아지고 부모의 영역을 벗어나거나 하는 경우가 있을 것입니다. 그럴 때 해당 요소에 min&max-width(height)값을 px값으로 지정해 주면 그 이상으로 커지거나 작아지는 것을 방지할 수 있겠죠? 추가로 전에 미디어쿼리(반응형웹) 포스팅을 할 때에도 min-width, max-width를 활용했었는데, 화면의 크기를 감지하여 웹의 디자인을 바꾸는 미디어쿼리에도 활용될 수 있을 것입니다. 예제 몇 가지를 보며 어떻게 실사용되는지 알아보겠습니다. .. 2021. 12. 19. css 미디어쿼리(ft.반응형 웹) 요즘 태블릿, 스마트폰과 같이 모바일 기기의 이용이 늘어나면서 웹을 제작할 때에도 반응형 웹으로 제작하는 것이 거의 필수가 되었습니다. 여기서 반응형 웹이란 쉽게 말해 디바이스의 종류에 따라 페이지가 알아서 재조정되는 것을 말합니다. 어떤 환경이든 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹인 것입니다. 그래서 오늘은, 이 반응형 웹에 있어 필수요소라고도 불리는 css의 미디어 쿼리에 대해서 알아보는 시간을 갖도록 하겠습니다. - 기본 문법 미디어 쿼리는 css에서 어떤 스타일을 선택적으로 사용하고 싶을 때 사용합니다. 어떻게 보면 다른 언어에서의 if 문법과 비슷한 개념이라 생각하면 이해하기 쉬울 것 같습니다. @media (조건) { 스타일 } c언어와 같은 언어에서의 if .. 2021. 12. 17. WAMP 설치, grid와 미디어 쿼리 - Bitnami WAMP 설치, 테스트 (1) bitnami.com 사이트에 접속하면 Window, Mac, Linux 등 운영체제가 나뉘어 있을 텐데 그 중 자신에게 맞는 운영체제로 다운로드 합니다. (2) 다운로드 받기 전, 어떤 화면이 뜨면 맨 아래의 'No thanks, just take me to the download'를 클릭하고 넘어가고, 다운로드 받은 파일을 실행해 줍니다. (3) setup 화면에서 Next, Select Components 화면에서 본인에게 필요한 부분만 체크하고 넘어갑니다. (저는 PhpMyAdmin만 체크하고 넘어갔습니다.) (4) Installation folder 화면에서 설치되는 경로를 잘 확인하고 Next를 누릅니다. (5) 후에 mysql에서.. 2021. 12. 7. 이전 1 다음
