본문 바로가기
반응형

미디어 쿼리3

W3C 미디어 쿼리 level 4(Candidate Recommendation), 번역해 보다 W3C 미디어 쿼리, 번역해 보다 제가 블로그 공백이 너무 길다 보니 처음 글로 무엇을 쓸까 참 많이도 헤멨는데.... 그러다가 반응형 웹 기술에 필요한 '미디어 쿼리'가 가장 적절하고 필요한 글이란 생각이 들었답니다 예전에 미디어 쿼리 관련 글([css] 미디어 쿼리, @media query 이해하기)을 쓴 적도 있지만, 보완해야 할 점이 많이 보이더라고요. 그런데 이 자료 저 자료를 모으다 보니 시간이 생각 외로 너무 많이 걸려서요... --; 그래서 마음에 부담을 줄일 겸, W3C에서 작성한 미디어 쿼리 글을 번역해 보려고 합니다. (원문을 통째로 번역한 것은 아니며, 제가 자의적으로 제외시킨 부분도 있음) 이 문서는 권고안이 되기 전 권고안 후보(Candidate Recommendation)이며,.. 2019. 10. 5.
css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 미디어 쿼리를 이용하여 반응형 웹사이트 만들기를 해 보고 있어요. 미디어 쿼리, @media query 이해하기 반응형 웹사이트(소스) 만들기 연습 CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 이번 시간엔 1. 화면 480px 이하로 축소하면, 상단 메뉴바가 사라지고 2. 메뉴 아이콘이 새로 등장하며 3. 아이콘을 클릭했을 때 다시 메뉴가 등장하는 방법 을 배워 볼게요. A 화면 B 화면 C 화면 A화면 만들기 전체 html 소스 ↺ /*메뉴 아이콘*/ /*메뉴*/ Home ❘ Guest ❘ Notice 본문 /*본문 영역*/ 오른쪽 사이드바 /*사이드바 영역*/ footer /*푸터 영역*/ 그럼 하나씩 살펴.. 2015. 2. 6.
[css] 미디어 쿼리, @media query 이해하기 [css] 미디어 쿼리, @media query 이해하기 오늘은 반응형 웹에서 자주 사용하는 미디어 쿼리 문법을 배워 보겠습니다. 미디어 쿼리는 장치에 따라 각기 다른 레이아웃을 작성하거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹페이지를 작성할 때 유용한 구문입니다. ▶ @media 브라우저 지원 ie9+, chrome 21+, firefox 3.5+, safari 4.0+, opera 9+ ▶ 미디어 쿼리 사용법 미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다. css 내부에 삽입하기 링크로 연결할 때 *test.css 파일 안에는 위 미디어쿼리 구문이 들어가야 합니다. CSS란? (HTML과 CSS의 차이, CSS 작성법) ▶ 미디.. 2015. 2. 3.
반응형

티스토리툴바