본문 바로가기
반응형

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.
[css3] overflow-x / overflow-y 속성 [css3] overflow-x / overflow-y 속성 아주 오래 전에 overflow 속성에 대해 다루었죠. overflow는 내용이 넘칠 때 어떻게 보일지 선택할 수 있는 속성이라고 했습니다.(아래 글 참조) overflow 속성 (overflow: visible, hidden, scroll, auto 차이) overflow-x 속성은 x축, 즉 왼쪽과 오른쪽의 내용이 넘칠 때, overflow-y 속성은 y축, 즉 위에 아래의 내용이 넘칠 때 어떻게 보여줄지 지정합니다. ▶브라우저 지원 ie9.0+, chrome 4.0+, firefox 3.5+, safari 3.0+, opera 9.5+ ▷overflow-x 속성값 visible|hidden|scroll|auto|initial|inherit.. 2015. 3. 5.
[css] cursor 속성 (마우스 모양 선택) [css] cursor 속성 (마우스 모양 선택) 무척이나 길었던 명절 연휴... 잘 지내고 오셨는지 모르겠네요 너무나 오랫동안 글을 쓰지 못했네요.^^ 오늘부터 또 조금씩 야금 야금 밀린 숙제를 해치워 나가야겠어요 오늘 배울 부분은 마우스 커서 모양을 지정하는 cursor 속성입니다. cursor 속성 : 마우스 포인터가 요소 위에 있을 때 표시되는 마우스 커서 모양을 지정 css 2.1 cursor 속성 브라우저 지원: https://developer.mozilla.org/ko/docs/Web/CSS/cursor 참조해 주세요 속성값 부분에 마우스를 대면 어떤 모양인지 나옵니다~ 속성값 설명 default 기본 커서. 보통 화살표 auto 기본값, 브라우저가 문맥에 기초하여 커서를 표시함 crossh.. 2015. 2. 23.
css로 반응형 메뉴 만들기 off canvas (left) css로 반응형 메뉴 만들기 off canvas (left) 지난 시간엔 select 요소로 드롭다운 메뉴를 만들었어요. 반응형 메뉴 만들기(select 태그를 이용) 오늘은 반응형 메뉴 중 off canvas 메뉴를 배워보겠습니다. 캔버스란 화폭을 말하죠. off canvas란 화폭 밖으로 분리된 것이라 보면 되겠습니다. 화면이 축소될 때 메뉴 아이콘이 등장히고, 아이콘을 클릭하면 메뉴바가 나타나며 본문을 밀어내는 형식입니다. 아래 이미지를 보고 A화면→B화면→C화면 순으로 코드 작성을 해 보세요 A 화면 B 화면 C 화면 전체 html ≡ /*메뉴 아이콘*/ /*체크박스*/ /*메뉴*/ Home Guest Notice 본문 /*본문*/ 접이식 메뉴를 만들 때 label와 체크박스를 이용하는 법을 배웠.. 2015. 2. 13.
반응형 메뉴 만들기(select 태그를 이용) 반응형 메뉴 만들기(select 태그를 이용) 어제는 체크박스와 :checked 선택자를 이용하여 토글 메뉴 만드는 법을 배웠습니다. 오늘은 select 요소를 이용하여, 반응형 메뉴를 만들어 보겠습니다. select 요소는 드롭다운 목록 만들 때 사용하며, 각 선택 항목은 option을 사용합니다. [html] select 태그 [html] option 태그 ▶전체 html Home Guest Notice Home Guest Notice 본문 우선 메뉴 목록을 만드는 것은 지난 시간에 배운 것과 동일합니다. 그리고, 화면 너비가 25em 이하에서는 드롭다운 목록이 나올 수 있도록 select를 이용하여 새로운 목록을 구성합니다. Home Guest Notice onchange="if (this.valu.. 2015. 2. 12.
반응형