본문 바로가기

css124

W3C 미디어 쿼리 level 4(Candidate Recommendation), 번역해 보다 W3C 미디어 쿼리, 번역해 보다 제가 블로그 공백이 너무 길다 보니 처음 글로 무엇을 쓸까 참 많이도 헤멨는데.... 그러다가 반응형 웹 기술에 필요한 '미디어 쿼리'가 가장 적절하고 필요한 글이란 생각이 들었답니다 예전에 미디어 쿼리 관련 글([css] 미디어 쿼리, @media query 이해하기)을 쓴 적도 있지만, 보완해야 할 점이 많이 보이더라고요. 그런데 이 자료 저 자료를 모으다 보니 시간이 생각 외로 너무 많이 걸려서요... --; 그래서 마음에 부담을 줄일 겸, W3C에서 작성한 미디어 쿼리 글을 번역해 보려고 합니다. (원문을 통째로 번역한 것은 아니며, 제가 자의적으로 제외시킨 부분도 있음) 이 문서는 권고안이 되기 전 권고안 후보(Candidate Recommendation)이며,.. 2019. 10. 5.
[반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴 [반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴 오늘은 반응형 웹사이트에서 자주 등장하는 개념 정리를 해 보려고 합니다. 반응형 웹사이트란, 브라우저나 기기 환경에 따라 레이아웃이 유동적으로 변하는 것을 말하지요. 그래서 자주 등장하는 단어가 아래 두 가지입니다. Fluid Grids (유동적인 그리드) Fluid Images (유동적인 이미지) 먼저 그리드란? 그리드란 우리말로 격자라고 하는데, 웹페이지를 수직 수평선으로 분할하는 레이아웃 요소입니다. 수직, 수평선은 사용자에게 보이지 않을 수도 있습니다. 아래 이미지는 부트스트랩 그리드 예시임. 제 블로그 역시 헤더, 본문, 사이드바, 푸터 등 전형적인 레이아웃 입니다. http://getbootstrap.com/examples.. 2015. 4. 6.
IE6~8에서 미디어쿼리 지원하기 (respond.js vs css3-mediaqueries.js) IE6~8에서 미디어쿼리 지원하기 보통 반응형 웹사이트를 만들 때, 화면이 특정 너비가 되면 화면이 변하는 분기 처리(breakpoint)를 할 때 @media 미디어 쿼리 구문을 사용합니다. 하지만 @media 구문을 지원하는 브라우저를 보면 다음과 같습니다. [css] 미디어 쿼리, @media query 이해하기 이미지 출처 : http://caniuse.com/#search=%40media 위 이미지에서 빨간색으로 표시된 IE8은 지원이 되지 않습니다. IE6, 7은 말할 것도 없겠죠.. 아래 두 자바스크립트 라이버러리는 미디어쿼리를 지원하지 않는 IE6~8에서 반응형 웹디자인을 가능하게 해주는 스크립트입니다. respond.js css3-mediaqueries.js respond.js 장점: 빠.. 2015. 3. 27.
css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. 지난 시리즈에 이어지는 반응형 메뉴 만들기 연습입니다. css로 토글 메뉴 만들기(메뉴 열고 닫기) 반응형 메뉴 만들기(select 태그를 이용) css로 반응형 메뉴 만들기 off canvas (left) 오늘은 화면 너비 480px 이하에서, MENU라는 글자와 메뉴 아이콘이 등장하며 (가로 화면 100%) 메뉴 클릭 시 하단으로 펼쳐지는 메뉴를 만들어 보겠습니다. (아래 그림 참조) A 화면 (너비 480px 이상일 때) B 화면(너비 480px 이하일 때) C 화면(너비 480px 이하에서 메뉴 클릭할 때) 이번에도 체크박스를 응용했습니다. 체크박스 기초가 필요하신 분은 아래 링크 참조 css로 토글 메뉴 만들기(메뉴 열고 닫기) h.. 2015. 3. 16.
[css3] transition 속성(transition-property/transition-duration/transition-timing-function/transition-delay ) [css3] transition 속성 오늘 배울 속성은 transition 입니다. transition은 한 가지 상태에서 다른 상태로 변화하는 것이라고 보면 됩니다. 예를 들어, 너비가 100px 였다가 마우스 오버할 경우 200px로 늘어난다든지 글꼴 크기가 14px 였다가 마우서 오버 시 20px로 확대 되는 등. transition 속성으로 이 두 가지의 이행 과정을 부드럽게 표시할 수 있습니다. *보통 트렌지션은 요소에 마우스 오버 했을 때 변화가 나타남 transition 속성은 아래 네 가지 속성의 단축 속성입니다. 각 속성은 본문 참조 transition-property 속성 transition-duration 기간 transition-timing-function 시기 선택 transiti.. 2015. 3. 10.
[CSS3] text-overflow 속성 [CSS3] text-overflow 속성 박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성입니다. 주의 : text-overflow 속성은 다음 2가지를 모두 충족할 경우에만 적용됩니다. 1. overflow 속성값이 hidden, scroll, auto 일 때(visible 제외) 2. white-space:nowrap (텍스트 길어도 줄바꿈 되지 않음) 또는 텍스트가 다음 줄로 이동하지 않는 비슷한 경우 overflow 속성 (overflow: visible, hidden, scroll, auto 차이) white-space 속성(pre, pre-wrap, pre-line 차이) ▶ 브라우저 지원 ie6.0+, chrome 4.0+, firefox 7.0+, safari 3.1+, .. 2015. 3. 6.