article search result of 'css' : 123

  1. 2015.04.06 [반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴
  2. 2015.03.27 IE6~8에서 미디어쿼리 지원하기 (respond.js vs css3-mediaqueries.js)
  3. 2015.03.16 css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. (1)
  4. 2015.03.10 [css3] transition 속성(transition-property/transition-duration/transition-timing-function/transition-delay )
  5. 2015.03.06 [CSS3] text-overflow 속성
  6. 2015.03.05 [css3] overflow-x / overflow-y 속성
  7. 2015.02.23 [css] cursor 속성 (마우스 모양 선택) (2)
  8. 2015.02.13 css로 반응형 메뉴 만들기 off canvas (left)
  9. 2015.02.12 반응형 메뉴 만들기(select 태그를 이용)
  10. 2015.02.11 [css] :checked 선택자를 이용한 토글 버튼
  11. 2015.02.10 css로 토글 메뉴 만들기(메뉴 열고 닫기) (3)
  12. 2015.02.06 css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)
  13. 2015.02.06 CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게
  14. 2015.02.05 반응형 웹사이트(소스) 만들기 연습
  15. 2015.02.03 [css] 미디어 쿼리, @media query 이해하기 (8)
  16. 2015.01.29 [css3] repeating gradient (반복형 그레디언트)
  17. 2015.01.28 [css] gradient (radial-gradient)
  18. 2015.01.27 [css3] gradient (linear-gradient) 사용법
  19. 2015.01.15 [CSS] @viewport rule (2)
  20. 2014.12.22 IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기

[반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴

 

 

[반응형 웹사이트] 유동적인 그리드, 이미지, 크기 조절이 가능한 글꼴

 

오늘은 반응형 웹사이트에서 자주 등장하는 개념 정리를 해 보려고 합니다.

 

반응형 웹사이트란,

 

브라우저나 기기 환경에 따라 레이아웃이 유동적으로 변하는 것을 말하지요.

 

그래서 자주 등장하는 단어가 아래 두 가지입니다.

 

Fluid Grids (유동적인 그리드)
Fluid Images (유동적인 이미지)

 

 

먼저 그리드란?

 

그리드란 우리말로 격자라고 하는데,

 

웹페이지를 수직 수평선으로 분할하는 레이아웃 요소입니다. 

 

수직, 수평선은 사용자에게 보이지 않을 수도 있습니다.

 

아래 이미지는 부트스트랩 그리드 예시임.

 

제 블로그 역시 헤더, 본문, 사이드바, 푸터 등 전형적인 레이아웃 입니다.

 

http://getbootstrap.com/examples/grid/


유동적인 그리드 

 

예전에는 그리드를 만들 때 px 같은 절대 단위를 사용했습니다

 

화면 비율에 따라 유동적인 그리드를 만들려면, 상대적인 % 값으로 바꿀 필요가 있습니다.

 

 

고정형 단위를 백분율(%)값으로 바꾸는 법은?

  

구하려는 요소의 값을 가장 큰 요소의 값(브라우저 창이나, wrapper)으로 나눔.

 

예를 들어 아래와 같은 레이아웃이 있다고 가정하면,

 

wrapper  1040 px, contents 780px, sidebar 200px, margin 60px

 

contents의 백분율을 구하려면? 1040px / 780px

 

margin의 백분율을 구하려면 ? 1040px / 60px

 

 

☞ wrapper  100%, contents 75% sidebar 19% margin 5%

 

 

 

유동적인 이미지

 

화면 크기에 따라, 이미지도 조절이 되게 하려면 위와 마찬가지로 백분율 값을 사용할 수 있습니다.

 

원래 이미지 크기를 유지하려면

 

img{max-width: 100%:}

 

라고 설정하면 됩니다.

 

다만 이미지보다 부모 요소 너비가 작을 경우, 부모 요소의 너비대로 

 

이미지가 표시됩니다. 이미지 width가 300px 인데 부모 div width가 100px 일 경우, 후자로 표시.

 

max-width: 100%을 적용하면, 높이는 자동적으로 계산되어, 원래 비율을 유지함.

 

 

 

img.html

 

 

 

크기 조절이 가능한 글꼴

 

글꼴 역시 고정형 단위인 px를 자주 사용하고 있지만, 반응형 웹사이트에서 글꼴 역시 크기 조절이 가능하게 하려면

 

상대 단위로 바꿀 필요가 있습니다.



 

대표적으로  em, rem 단위 사용법을 알아보겠습니다.

 

*em과 rem은 현재 글꼴 크기에 상대적인 값을 말함. 2em 이란 현재 글꼴 크기의 2배라는 뜻.

 

*rem은 root em의 약자로, root 요소란 html(최상위) 요소를 말함.

 

* %(백분율)은 부모에 상대적인 값. em과 비슷함.

 

css 길이 단위

 

글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이)

 

 

주의할 점!

 

상대적인 단위 em과 % 값은  부모로부터 물려받은 font-size 값으로 계산합니다.

 

따라서 중첩 구조로 되어 있을 경우, 글꼴이 일관적이지 않을 수 있습니다.

 


em 단위 계산법

 

body{font-size: 62.5%;}  /* 브라우저 기본값이 16px이므로, 16 x 62.5% = 10px  */

h1{font-size: 2.4em;}  /* 10 x 2.4 = 24px  */
li{font-size: 1.6em;} /* 10 x 1.6 = 16px  */

li li{font-size: 1.6em;}  /* 16 x 1.6 = 25.6px */

 

em 단위는 부모로부터 상속받은 font-size를 참조하여 계산하므로, li 안의 li는 값이 달라지게 됨.

 

rem 단위는 html 요소의 font-size를 참조하므로, li 안의 중첩된 li도 같은 값을 가짐.


 

rem 단위 계산법

 

html{font-size: 62.5%;} 

h1 {font-size: 2.4rem;} /* 10 x 2.4 = 24px */
li{font-size: 1.6em;} /* 10 x 1.6 = 16px  */

li li{font-size: 1.6em;}  /* 10 x 1.6 = 16px */

 

em vs rem

 

첨부파일 다운받아 비교해 보세요~

 

em.html

 

rem.html

 

하지만 rem 브라우저 지원이 ie9부터 이므로, 하위 브라우저와의 호환이 필요합니다.

 

 

-이미지 출처 : http://www.w3schools.com/cssref/css_units.asp-

 

 

해결책은?

 

픽셀값으로 먼저 지정하고 rem을 지정하기.

 

rem 단위를 지원하는 브라우저는 rem을 사용하고

 

그렇지 않은 브라우저는 픽셀 값으로 계산합니다.

 

예.

 

h1
{
font-size: 32px;
font-size: 2rem;
}

 

반응형 이미지(SVG)에 대한 글도 필요한데, 아직 설명할 수준이 못 되어 나중에 추가적인 글을 써 보도록 할게요.

 

 

참조:  https://github.com/chuckcarpenter/REM-unit-polyfill

http://www.graphics.com/article-old/brief-history-grids
http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design

http://www.sitepoint.com/css3-rem-units/  

 

신고
지구별에
css 2015.04.06 11:35

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

 

 

장점: 빠르고 가벼움

 

주의: 

 

1. 미디어 구문 중 min-width와 max-width만 지원함.

 

(width, device-width, device-height, orientation, aspect-ratio 등을 지원하지 않음.)

 

2. 다음 처럼 link 태그 안에 속성 media를 지원하지 않음.

 

<link media="screen and ..."> 

 

3. @import 형식의 스타일시트 지원하지 않음

 
▶사용법

 

CDN 으로 삽입할 때

 

1. 다음 구문을 </body> 바로 위에 삽입.

 

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

 

if lt ie9는 ie9 이하버전일 경우... 라는 뜻이며, 해당 버전만 이 구문을 해석하고 실행하며

 

다른 브라우저들은 이 구문을 무시합니다.



 

2. 그리고 미디어쿼리 구문을 작성합니다.

 

@media screen and (min-width: 980px)
{
 / * CSS Document * /
}

 

 

직접 다운 받아 파일 삽입하려면?

 

다운로드 사이트 : https://github.com/scottjehl/Respond

 

 

css3-mediaqueries.js

 

respond.js 파일보다는 속도가 느림

 

주의 사항은 respond.js와 동일함

 

 

▶사용법

 

다음 구문을 </body> 바로 위에 삽입.

 

  <! - [If lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></ script>
 <! [Endif] ->

 

참조 : https://code.google.com/p/css3-mediaqueries-js/

 

 

▶읽어주세요

 

css3-mediaqueries.js파일은 respond.js 을 사용할 수 없는 상황에만 쓰는 게 바람직하다고 하는데

 

respond.js 는 보고되는 버그가 많습니다.

 

그리고 서브도메인을 사용하고 있을 경우 작동이 잘 안 됩니다.

 

저도 여러가지 방법으로 이 파일 삽입을 시도했지만 티스토리에서 전혀 작동하지 않고 있습니다.

 

하지만 하나 생각해 볼 것은, 반응형 웹디자인은 다행히도 모바일 환경에서 자주 사용되고

 

대부분 모바일이 iOS, Android  운영체제라  IE6~8에서 미디어쿼리가 적용되지 않더라도

 

크게 문제될 것은 없을 것으로 보입니다.

 

IE6~8 버전은 어차피 데스크탑 환경에서 사용하는 브라우저이므로, 반응형이 되지 않더라도

 

가독성이 그리 떨어지지 않으니까요

 

[참조 사이트]


http://lipstickonthepig.com/wordpress/using-respond-js-when-your-site-css-is-on-a-cdn-or-subdomain/


https://github.com/scottjehl/Respond/blob/master/README.md

 

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기

 

신고
지구별에
css 2015.03.27 17:58

css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴.

 

 

css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴.

 

지난 시리즈에 이어지는 반응형 메뉴 만들기 연습입니다.

 

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 

반응형 메뉴 만들기(select 태그를 이용)

 

css로 반응형 메뉴 만들기 off canvas (left)

 

 

오늘은 화면 너비 480px 이하에서, MENU라는 글자와 메뉴 아이콘이 등장하며 (가로 화면 100%)

 

메뉴 클릭 시 하단으로 펼쳐지는 메뉴를 만들어 보겠습니다. (아래 그림 참조)

 

A 화면 (너비 480px 이상일 때)

 

 

B 화면(너비 480px 이하일 때) 

 

 

C 화면(너비 480px 이하에서 메뉴 클릭할 때)

 

이번에도 체크박스를 응용했습니다. 체크박스 기초가 필요하신 분은 아래 링크 참조

 

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 

 

html

<div id="header">
<label for="toggle" onclick>MENU</label>
<input type="checkbox" id="toggle"/>

 

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Noitce</a></li>
</ul>
</div>

<div id="contents">본문</div>

<div id="footer">저작권 정보</div>

 

 


 

▶설명

 

위에 세 div가 있습니다

#header는 메뉴 아이콘과, 메뉴 목록을 하나로 묶어 제어하기 위해 만듦

#contents 본문 영역

#footer 저작권 영역

 

label 에서 for=" "과 input에서 id=" "는 동일해야 합니다.

 

input type="checkbox"로 체크박스를 만드는데 label은 이 체크박스의 이름표 역할을 합니다.

 

하지만 여기서는 체크박스를 실상 사용하지 않으므로 숨겨둡니다.

 

css

#header{background-color:#6A84B7;color:white;}                /*헤더 영역의 배경색과 글자색 지정*/
a{text-decoration:none;color:white;}                                  /*링크 색상*/
label, #toggle{display:none;}                                            /*체크박스 이름표와, 체크박스 숨김*/ 
#nav{ padding:0; margin:0;display:inline;}                          /*메뉴를 일렬로 늘어놓기*/   
#nav li{display:inline;}                                                     /*메뉴 목록을 일렬로 늘어놓기*/
#contents {background: #D9E5FF; min-height: 200px;}         /*본문 영역 배경색 지정, 최소 높이 설정*/ 
#footer{background-color:#EAEAEA;font-size:13px;}           /*푸터 영역 배경색, 글꼴 크기*/

 

@media screen and (max-width: 480px)                            /*화면 너비 480px 이하에서 스타일 적용*/        
{
#nav{display:none;}                                                      /*메뉴 숨김*/
#toggle:checked + #nav{display:block;}                          /*체크박스 선택되면 메뉴가 나타남*/
#nav li{display:block;width:100%;text-align:center;border-top:1px solid #ccc;padding: 4px;}
label {display:block; text-align:center;background: url('me.png'); background-repeat: no-repeat;background-position:97% 10px;background-size: 24px 19px;
font-size:20px; font-weight:bold;padding:4px 3%;}
}

 

▶설명

 

다른 부분들은 이전 강좌에 모두 설명되어 있으니 이전 강좌를 참고해 주시고요.

 

오늘 새로 배울 부분만 설명하겠습니다.

 

화먼 너비 480px 이하에서 메뉴 목록을 수직으로 나타나게 하고, 너비 100% 차지하게 하려면

 

#nav li{displya:block; width:100%}

 

중앙 정렬 하려면

 

text-align:center

 

위 이미지를 참고하면 수직으로 메뉴가 나타날 때 하얀색 선이 등장합니다.

 

border-top:1px solid #ccc

 

여백도 적절하게 지정해줍니다

 

padding: 4px;

 

그리고 체크박스 이름표(즉 MENU와 아이콘)가 원래 숨김 상태였는데 화면이 480px 이하에서 등장하도록 하려면

 

label{display:block;}

 

이번 시간엔 메뉴 아이콘으로 이미지를 사용했습니다. () 안에 이미지 위치 지정해주세요.

 

background: url('menu.png');

 

메뉴 아이콘은 한 번만 나오면 되므로 아래처럼 지정 (이것을 지정하지 않으면 기본값으로 반복 패턴이 됨)

 

background-repeat: no-repeat;

 

배경 이미지 위치는 상단 오른쪽에 적절히 지정합니다(앞쪽 값이 가로, 뒤쪽이 새로 위치임/ %값이나 길이값 가능)

 

background-position:97% 10px;

 

배경 이미지 크기도 지정합니다. (앞이 가로, 뒤가 세로 크기)

 

background-size: 24px 19px;

 

글꼴 크기와, 굵기 지정

 

font-size:20px; font-weight:bold;

 

여백 지정 (앞에 상/하 값, 뒤가 좌/우 값)

 

padding:4px 3%;

 

반응영 메뉴 드롭다운 메뉴 소스는 아래 파일 다운받아 실행해 보세요

 

dropdownmenu.zip

 

 

 

 

 display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이)

 

background-position 속성(배경이미지 위치 지정)

 

background-size 속성(배경이미지 크기 조절)

 

background 속성(배경 전체 지정)

 

신고
지구별에
css 2015.03.16 11:42

[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 시기 선택
transition-delay 지연

 

▶transition 문법

 

transition: transition-property | transition-duration | transition-timing-function | transition-delay 

 

* transition-property  : css 속성을 지정함.

* transition-duration  : 트렌지션 실행 시간.

                                속성은 항상 지정해주어야 합니다. 그렇지 않을 경우 기본값 0s이 적용되는데

                                아무런 효과가 나타나지 않습니다.

* transition-timing-function : 트렌지션이 실행되는 동안 속도 설정

* transition-delay : 언제 트렌지션을 시작할지 지정

 


*기본값 : all 0 ease 0


 

▶transition 브라우저 지원:

 

표준 문법


ie 10.0+, chrome 26.0+ , firefox 16.0+ ,safari 6.1+ , opera 12.1+

 

접두어 버전


chrome 4.0+  :  -webkit-

firefox 4.0+ : -moz-
safari 3.1+ : -webkit-
opera 10.5+ :  -0-

 

▶사용 예

 

#one{

width: 100px;
transition:width 3s; 

}


#one:hover{

width: 200px;

}

 

 

 

transition-property 속성

 

어떤 속성에 트렌지션 효과를 적용할지를 지정

 

▶문법

 

transition-property: none | all | property

 

all 기본값. 모든 속성에 트렌지션 효과가 나타남
none 아무 속성도 트렌지션 효과가 나타나지 않음
property 트렌지션 효과를 적용하고 싶은  css 속성

           (하나 이상의 속성을 나열할 때 쉼표로 분리함)  

 

트렌지션에 사용할 수 있는 속성은, 움직일 수 있는 속성만 가능함(다음 표) 

 

 

이미지 참조: http://www.w3.org/TR/css3-transitions/#transition-property-property

 



▶사용 예

 

#two{

width: 100px;

background-color:yellow;
transition-property:width 3s;  /* transition-duration 속성은 항상 지정*/

}


#two:hover{

width: 200px;

}

 

▶사용 예 2

 

#two{

width: 100px; height: 100px;

background-color:yellow;
transition-property: width, height, 3s;  /* transition-duration 속성은 항상 지정*/

}


#two:hover{

width: 200px; height: 200px;

}

 

transition-duration 속성

 

트렌지션을 완수하는 데 걸리는 시간

 

▶문법

 

transition-duration: time

 

time  기본값은 0s. 초(seconds) 또는 천만분의 1초 (milliseconds) 단위로 지정 (10진수로 표시하며, 음수값은 불가)

        여러 가지 속성을 지정할 때 쉼표로 분리하여 지정.

 

▶사용 예

 

#three{

width: 100px;

background-color:yellow;
transition-duration:width 3s;  /* transition-duration 속성은 항상 지정*/

}


#three:hover{

width: 200px;

}

 

▶사용 예 2

 

#three{

width:100px;

font-size:14px;

transition-property: width, font-size;
transition-duration:3s, 5s;                      /*width에 3초, font-size에 5초가 부여됨*/

}


#three:hover{

width: 200px;

font-size:20px;

}

 

 transition-timing-function 속성

 

트렌지션 효과가 진행하는 동안 속도의 변화를 지정

 

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()

 

* ease : 기본값. 천천히 시작해서, 빠르게 진행하며, 천천히 끝남.
            cubic-bezier(0.25,0.1,0.25,1))와 같음

* linear : 처음과 끝이 같은 속도로 나타남
            cubic-bezier(0,0,1,1))와 같음

* ease-in : 천천히 시작  cubic-bezier(0.42,0,1,1))와 같음


* ease-out : 천천이 끝남  cubic-bezier(0,0,0.58,1))와 같음

* ease-in-out 천천히 시작해서 천천히 끝남  cubic-bezier(0.42,0,0.58,1))와 같음


* cubic-bezier(n,n,n,n)  직접 값을 지정할 수 있음. 가능한 값은 0부터 1까지 숫자값

 

cubic-bezier 값 설정 방법은 아래 링크 참조해주세요.

 

http://roblaplaca.com/blog/2011/03/11/understanding-css-cubic-bezier/

http://www.w3.org/TR/css3-transitions/#transition-property-property
http://www.roblaplaca.com/examples/bezierBuilder/##

 

▶사용 예 1

 

#four{

width: 100px;

background-color:yellow;
transition-timing-function:width 3s ease-in-out;  /* transition-duration 속성은 항상 지정*/

}


#four:hover{

width: 200px;

}

 

▶사용 예 2

 

#four{

width: 100px;

background-color:yellow;
transition-timing-function:width 3s cubic-bezier(0.42,0,0.58,1))

}


#four:hover{

width: 200px;

}

 

transition-delay 속성

 

언제 트렌지션 효과를 시작할지 지정함.

 

▶문법

 

transition-delay: time

 

*time : 트렌지션 효과가 시작되기 전 기다리는 시간. (초나 ms로 지정) 

 

▶사용 예

 

#five{

width: 100px;

background-color:yellow;
transition-timing-function:width 3s ease-in-ou5 2s;  /* transition-duration 속성은 항상 지정*/

}


#five:hover{

width: 200px;

}

 

 

transition.html파일 다운받아 실행해 보세요~ 마우스 오버해야 트렌지션 효과가 나타납니다

 

 

 

gradient (linear-gradient) 사용법

 

text-shadow 속성(글자 그림자 효과)

 

border-radius 속성(둥근 모서리)

 

브라우저 업체별 접두어(vendor prefix)

신고
지구별에
css 2015.03.10 16:40

[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+, opera 11.0+

 

 

▶  text-overflow 속성값

 

clip | ellipsis | string | initial| inherit

 

clip 기본값. 텍스트를 자름.

 

ellipsis 잘린 텍스트를 생략 부호(...)로 표시함.

 

string 잘린 텍스트를 지정한 문자열로 표시 예: div{ text-overflow: "---"; }
        * 하지만 string의 경우, 현재 지원하는 브라우저가 없음*

 

 

 

html 작성 예

<h3>text-overflow: clip</h3>
<div id="one">
It took me a long time to learn where he came from.
The little prince, who asked me so many questions,  
</div>


<h3>text-overflow: ellipsis</h3>
<div id="two">
It took me a long time to learn where he came from.
The little prince, who asked me so many questions,  
</div>


<h3>text-overflow: ellipsis2</h3>
<div id="three">
It took me a long time to learn where he came from.
The little prince, who asked me so many questions,  
</div>

 

css

div{width:300px; height: 30px;background-color:yellow; border:1px solid black;padding:5px;}
#one{overflow: hidden;white-space: nowrap; text-overflow:clip;}
#two{overflow: scroll; white-space: nowrap; text-overflow: ellipsis;}
#three{overflow: auto;white-space: nowrap; text-overflow: ellipsis;}

 

 

▶실행화면

 

다운받아 실행해 보세요~  text-overflow.html

 

 

 

 

overflow-x / overflow-y 속성

 

overflow 속성 (overflow: visible, hidden, scroll, auto 차이)

 

신고
지구별에
css 2015.03.06 17:50

[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;


visible 기본값으로 내용이 잘리지 않음. 넘치는 내용은 밖으로 흘러 넘침.


hidden 내용이 잘림. 스크롤바가 나타나지 않음.

          (x축의 스크롤바가 나타나지 않을 뿐 브라우저에 따라 y축의 스크롤은 나타나기도 합니다)

scroll 내용이 잘림. 스크롤바가 나타남.

auto 내용이 잘림. 필요할 때만 스크롤바가 나타남.

 

 

▷overflow-y 속성값  

 

visible|hidden|scroll|auto|initial|inherit;


visible 위 내용 과 동일


hidden 내용이 잘림. 스크롤바가 나타나지 않음.

          (y축의 스크롤바가 나타나지 않는 것.  브라우저에 따라 x축의 스크롤은 나타나기도 함)

scroll 위 내용과 동일

auto 위 내용과 동일

 

 

▶html 작성 예

 

너비 높이가 200px인 div를 만들어,  div보다 큰 이미지 (256x333 px)을 넣어 보겠습니다.

 

 

 

<h3>1. overflow-x:visible</h3>
<div id="x">
 <img src="bird.png">
</div>
<h3>1. overflow-y:visible</h3>
<div id="y">
 <img src="bird.png">
</div>

 


<h3>2. overflow-x:hidden</h3>
<div id="x2">
 <img src="bird.png">
</div>
<h3>2. overflow-y:hidden</h3>
<div id="y2">
 <img src="bird.png">
</div>

 


 <h3>3. overflow-x:scroll</h3>
<div id="x3">
 <img src="bird.png">
</div>
<h3>3. overflow-y:scroll</h3>
<div id="y3">
 <img src="bird.png">
</div>

 


 <h3>4. overflow-x:auto</h3>
<div id="x4">
 <img src="bird.png">
</div>
<h3>4. overflow-y:auto</h3>
<div id="y4">
 <img src="bird.png">
</div>

 

 



css

div{width:200px; height:200px; border: 1px solid green;}
#x{overflow-x:visible;}
#y{overflow-y:visible;}
#x2{overflow-x:hidden;}
#y2{overflow-y:hidden;}
#x3{overflow-x:scroll;}
#y3{overflow-y:scroll;}
#x4{overflow-x:auto;}
#y4{overflow-y:auto;}

 

▶실행화면 overflowxy.html

 

 

 

 

 

 

 

 

미디어 쿼리, @media query 이해하기

 

반응형 웹사이트(소스) 만들기 연습

 

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

 

css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

cursor 속성 (마우스 모양 선택)

 

신고
지구별에
css 2015.03.05 11:18

[css] cursor 속성 (마우스 모양 선택)

 

 

[css] cursor 속성 (마우스 모양 선택)

 

무척이나 길었던 명절 연휴... 잘 지내고 오셨는지 모르겠네요

 

너무나 오랫동안 글을 쓰지 못했네요.^^

 

오늘부터 또 조금씩 야금 야금 밀린 숙제를 해치워 나가야겠어요

 

오늘 배울 부분은 마우스 커서 모양을 지정하는 cursor 속성입니다.

 

cursor 속성 : 마우스 포인터가 요소 위에 있을 때 표시되는 마우스 커서 모양을 지정

 

 


 

css 2.1  cursor 속성

 

브라우저 지원:  https://developer.mozilla.org/ko/docs/Web/CSS/cursor 참조해 주세요

 

속성값 부분에 마우스를 대면 어떤 모양인지 나옵니다~

 

속성값 설명
default 기본 커서. 보통 화살표
auto

기본값, 브라우저가 문맥에 기초하여 커서를 표시함

crosshair 십자 표시, 주로 비트맵에서 선택을 가르키기 위해
pointer 링크를 가리키는 표시
move 옮길 수 있음을 표시
progress 프로그램이 수행중임, 사용자가 프로그램과 상호작용할 수 있다는 점에서 wait과 다름
help 도움말. 보통 물음표나, 풍선
text 텍스트가 선택될 수 있음을 표시. 보통 I 자형
url 이미지 파일을 가리키는 주소(사용법은 본문 하단 참조)
wait 프로그램이 바쁘므로 사용자는 기다려야 함. 보통 시계 모양
e-resize 사이즈 조절과 스크롤 커서
n-resize "
ne-resize "
nw-resize "
s-resize "
se-resize "
sw-resize "
w-resize "
inherit 상속
initial 초기화

 


 

 

css 3  cursor 속성

 

브라우저 지원 : http://www.gtalbot.org/DHTMLSection/Cursors.html#CSS3  참조

 

속성값 설명
none 커서가 없음
cell 셀이 선택될 수 있음을 표시
context-menu 문맥 메뉴, 작은 메뉴가 딸린 화살표로 표시
vertical-text 수직 텍스트가 선택될 수 있음을 표시. 수평 I자형으로 나타남
alias 단축키 모양
copy 복사 모양
no-drop 드래그된 아이템이 현재 커서 위치에서는 drop될 수 없음을 표시
not-allowed 요청된 행동이 수행될 수 없음을 표시
ew-resize 양방향의 크기 조절 커서
ns-resize "
nesw-resize "
nwse-resize "
all-scroll 어느 방향으로든 스크롤 될 수 있음을 표시
col-resize 열을 수평으로 크기조절 할 수 있음을 표시
row-resize 줄을 수직으로 크기조절 할 수 있음을 표시
grab 손으로 움켜질 수 있음을 표시
grabbing 손으로 움켜진 모양을 표시
zoom-in 확대가 가능함
zoom-out 축소가 가능함

 

 

[속성값 url 사용법]


브라우저 지원
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url 참조.


 

기본 구문(css 2.1)

 

여러 개의 url을 넣을 경우 쉼표로 분리하며, 맨 마지막에는 지원하지 않는 브라우저를 위해 url이 아닌 속성값을 넣어 줍니다.

 

▶사용 예

 

#foo {cursor: url(test1.cur), url(test2.gif), auto;}

 

먼저 test1.cur 파일을 시도해 보고, 지원하지 않을 경우 test2.gif을 사용하며, 이도 적용되지 않을 때는 auto값을 사용하겠다는

의미


 

css3 구문

 

css3구문에는, x y 좌표가 추가되었습니다.

 

▶사용 예

 

#foo {
cursor: auto
cursor: url(test.png) 4 12, auto;}

 

4는 x(가로) 12는 y(세로)이며, 상단 왼쪽(0, 0)으로부터 4, 12픽셀 지점에 설정됨.


폴백 auto는 ie를 위해서 별도로 지정함. 

 

 

 

gradient (linear-gradient) 사용법

 

gradient (radial-gradient)

 

repeating gradient (반복형 그레디언트)

 

미디어 쿼리, @media query 이해하기

 

신고
지구별에
css 2015.02.23 16:48

css로 반응형 메뉴 만들기 off canvas (left)

 

 

css로 반응형 메뉴 만들기 off canvas (left)

 

지난 시간엔 select 요소로 드롭다운 메뉴를 만들었어요.

 

반응형 메뉴 만들기(select 태그를 이용)

 

오늘은 반응형 메뉴 중 off canvas 메뉴를 배워보겠습니다.

 

캔버스란 화폭을 말하죠. off canvas란 화폭 밖으로 분리된 것이라 보면 되겠습니다.

 

화면이 축소될 때 메뉴 아이콘이 등장히고, 아이콘을 클릭하면 메뉴바가 나타나며  본문을 밀어내는

 

형식입니다.

 

아래 이미지를 보고 A화면→B화면→C화면 순으로 코드 작성을 해 보세요

 

 A 화면

 

 B 화면

 

 C 화면

 

 

전체 html

<label for="menu" onclick>&#8801;</label>                 /*메뉴 아이콘*/
<input type="checkbox" id="menu">                            /*체크박스*/

 

<div id="nav">                                                         /*메뉴*/
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Notice</a></li>
</ul>
</div>
 
<div id="content">본문</div>                                      /*본문*/

 

접이식 메뉴를 만들 때 label와 체크박스를 이용하는 법을 배웠지요.

 

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 



input type="checkbox"로 체크박스를 만들고, label 요소는 이 체크박스의 이름표 역할입니다.

 

하지만 이 이름표 대신에 메뉴 아이콘 &#8801; 을 넣을 생각이에요.

 

 &#8801;는 특수기호를 표시하게 해주는 html 코드라고 생각하시면 돼요.

 

html 화면에서 이 코드를 입력하면 웹브라우저에서 특수 기호로 표시됩니다.

 

<div id="nav"> </div> 부분은 메뉴 목록을 담고 있습니다.

 

전체 css     

#nav, #content{background-color:#ccc;margin:5px; padding:5px;}  /*메뉴와 본문 배경색, 여백지정*/
ul{margin:0; padding:0; list-style:none;}                                      /*목록 여백 초기화, 머리 기호 없애기*/
ul > li{display:inline;}                                                                /*메뉴 목록 수평으로*/
label, #menu{display:none;}                                                      /*메뉴 아이콘과 체크박스 숨김*/

 


@media screen and (max-width: 44em)                                       /*화면 너비 44em 이하에서 스타일 적용*/
{
label {display: block;}                                                              /*메뉴 아이콘 드러내기*/
#nav{position: absolute;left: -20em; width: 10em;}  /*메뉴 위치: 왼쪽으로 -20em절대 위치, 너비 10em*/

ul > li{display:block;}                                                              /*메뉴 목록 수직으로*/
input:checked ~ #nav{left: 0;}                                                  /*아이콘 클릭시 메뉴 위치가 left:0으로 이동*/
input:checked ~ #content {margin-left: 10.5em; margin-right: -10.5em;} /*동시에 본문 위치가 이동*/
}

 

화면이 44em이하로 축소되기 전에는 메뉴바가 나타나 있고, 메뉴 목록은 일렬로 늘어 놓은 형태입니다.

 

ul > li{display:inline;}

 

메뉴 아이콘과 체크박스는 숨김 상태가 되어야 합니다.

 

label, #menu{display:none;}                                                     

 

44em이하가 되면, 메뉴 아이콘이 생성되고

 

label {display: block;}   

 

메뉴도 나타납니다. 하지만 아이콘을 클릭하기 전까지는 왼쪽으로 마이너스 값을 주어 화면에서 숨겨놓습니다.

 

#nav{position: absolute;left: -20em; width: 10em;} 

 

메뉴 목록은 일렬이 아닌 수직 형태로 나타납니다

 

ul > li{display:block;}     

 

아이콘을 클릭하면(체크 상태) 메뉴 위치가 마니너스 값(left:-20em) 에서 left:0으로 바뀌며,

너비 10em 인 메뉴 목록이 등장합니다.

 

input:checked ~ #nav{left: 0;}

 

동시에, 본문 위치 역시 메뉴 옆으로 이동합니다.

 

input:checked ~ #content {margin-left: 10.5em; margin-right: -10.5em;}

 

이때 본문의 margin-left 값은, 메뉴의 너비값(width:10em)+여백값(0.5정도) = 10.5em 입니다.

 

margin-right값은 margin-left 의 음수값(-10.5em)로 지정해 주면 본문 내용이 적절한 크기로 나옵니다.

 

소스는 아래 파일 다운받아 실행해 보세요

 

offcanvas menu.html

 

모바일 사파리와 안드로이드에서 작동하지 않을 때 아래 링크 참조해주세요.

 

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 

소스 참조 사이트 : Responsive Menu Concepts

 

 

:checked 선택자를 이용한 토글 버튼

 

[css] 미디어 쿼리, @media query 이해하기

 

반응형 웹사이트(소스) 만들기 연습

 

 

 

신고
지구별에
css 2015.02.13 09:33

반응형 메뉴 만들기(select 태그를 이용)

 

 

반응형 메뉴 만들기(select 태그를 이용)

 

어제는 체크박스와 :checked 선택자를 이용하여 토글 메뉴 만드는 법을 배웠습니다.

 

오늘은 select 요소를 이용하여, 반응형 메뉴를 만들어 보겠습니다.

 

select 요소는 드롭다운 목록 만들 때 사용하며, 각 선택 항목은 option을 사용합니다. 

 

[html] select 태그

 

[html] option 태그


 

▶전체 html

 

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Notice</a></li>
</ul> 

 

<select onchange="if (this.value) window.location.href = this.value;">
    <option value="#">Home</option>
    <option value="#">Guest</option>
    <option value="#">Notice</option>
</select>  
</div> 

 

<div id="contents">본문</div>

 

 

우선 메뉴 목록을 만드는 것은 지난 시간에 배운 것과 동일합니다.

 

그리고, 화면 너비가 25em 이하에서는 드롭다운 목록이 나올 수 있도록 select를 이용하여

 

새로운 목록을 구성합니다.

 

 <select onchange="if (this.value) window.location.href = this.value;">
    <option value="#">Home</option>
    <option value="#">Guest</option>
    <option value="#">Notice</option>
   </select>  

 

onchange="if (this.value) window.location.href = this.value 이 부분은 자바스크립트인데

 

select를 작동시키기 위해 필요합니다. select에 onchange 이벤트가 발생하면 window.location.href로 주소를

 

바꾼다는 뜻이라네요  (http://css-tricks.com/responsive-menu-concepts/참조)

 

option태그는 value 속성과 함께 쓰는데 value값은 서버로 전송되는 값입니다. home, guest, notice를 넣으면 됨.

 

▶ 전체 css

 

ul{margin:0; padding:0; listy-style:none;}       /*목록 여백 초기화, 머리 기호 없애기*/
ul li{display:inline;}                                     /*목록을 일렬로 늘어놓기*/

select {display:none;}                                 /*select 창 숨기기*/

 

 

@media screen and (max-width: 25em)          /*화면 너비 25em 이하일 경우 스타일 적용*/ 
{
ul {display:none;}                                   /*초기 메뉴 숨기기*/
select {display:block; width:100%;}               /*select 창 드러내기, 가로 너비 100%로*/ 

 



우선 select 메뉴를 숨겨둡니다.

 

그리고 화면 너비가 25em 이하일 경우 기존의 메뉴바를 숨기고

 

ul {display:none;}

 

select 창이 보이도록 합니다. (화먼 너비 전체를 차지하게)

 

select {display:block; width:100%;} 

 

 

▶ 실행화면

 

select menu.html

 

 

화면 너비 25em 이상일 경우

 

 

 

화면 너비 25em 이하일 경우(파이어폭스)

  

 

화면 너비 25em 이하일 경우(구글 크롬)

 

 

 

다양한 크기에서 테스트 해 보기

 

위 화면을 보면 [반응형 웹 디자인 보기]를 설정하여, 화면 크기별로 어떻게 보이는지 확인해 볼 수 있습니다.

 

구글 크롬과, 파이어폭스 브라우저에서 개발자도구를 설치한 후

 

마우스 오른쪽 [요소검사] 선택후 위 이미지에서 빨간색 사각 아이콘을 클릭하면 됩니다.

 

개발자도구 사용법은 아래 링크 참조하시면 자세히 나와 있어요

 

웹개발자 도구, 웹 디벨로퍼 툴바 설치/제거 방법

 

웹 개발자 도구 web developer toolbar 개관

 

 

 

 

 

신고
지구별에
css 2015.02.12 14:27

[css] :checked 선택자를 이용한 토글 버튼

 

 

[css] :checked 선택자를 이용한 토글 메뉴 버튼

 

어제는 기본적인 토글 메뉴를 만들어 보았어요.

 

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 

label 요소와, 체크박스, checked 선택자를 이용하여

 

메뉴 아이콘을 클릭하면 메뉴가 생성되고, 다시 클릭하면 메뉴가 사라지는 방식을

 

배웠습니다.

 

이번에는 토글 메뉴 버튼을 만들고,

 

전체적인 레이아웃까지 만들어 볼게요.

 

A 화면

 

 

B 화면

 

 

C 화면

 

 

▶전체 html

 

<div id="header">
<button type="button"><label for="toggle">&#8801;</label></button>
<input type="checkbox" id="toggle"/>

 

<ul id="nav">
<li><a href="#">Home</a> &#10072;</li>
<li><a href="#">Guest</a> &#10072;</li>
<li><a href="#">Noitce</a></li>
</ul>
</div> 

 


<div id="contents">본문</div>
<div id="side">오른쪽 사이드바</div>
<div id="footer">footer</div>

 

 



모두 지난 시간 배운 것을 응용했기 때문에 지난 강좌를 먼저 읽고 오셔야 이해하기 쉽습니다~

 

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 

css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

지난 시간과 달라진 것은, button 요소가 추가되었습니다.

 

<button type="button"><label for="toggle">&#8801;</label></button>

 

메뉴 아이콘이 버튼 모양이 됩니다.(위 그림 참조)

 

 

 

▶전체 css

 

#header, #footer, #side {background-color:#FFE08C;}
#header{margin-bottom:10px;}
a{text-decoration:none;}

 

button, #toggle{display:none;}

 

#nav{ padding:0; margin:0;display:inline;}
#nav li{display:inline;}
#contents {min-height: 400px; width: 80%; background: #E4F7BA;float:left;}
#side {min-height: 400px;}
#footer {margin-top: 10px;}

 

@media screen and (max-width: 480px)
{
#nav{display:none;}
button {display:inline;}
#toggle:checked + #nav{display:inline;}
#contents { width: auto; float: none; min-height: 200px;margin-bottom: 10px;}
#side { width: auto; min-height: 0;}
}

 

button, #toggle{display:none;} 은 버튼과, 체크박스를 숨김

 

#nav{display:none;} button {display:inline;}

화면이 480px 이하로 축소되면, 메뉴바가 사라지며 메뉴 아이콘 버튼이 생성됩니다.

 

#toggle:checked + #nav{display:inline;}

메뉴 아이콘을 클릭하면 메뉴바가 생성됩니다.

 

소스는 아래 파일 다운 받아 실행해 보세요~ 

 

 

toggle menu button.html

 

지금까지 css를 이용해서 토글 메뉴 버튼 만들기를 배웠어요.

 

그런데 이 메뉴의 단점은 checked 선택자라든지 @media 구문이 ie9부터 지원이 된다는 점...

 

hover 선택자는 ie7부터 지원.

 

추가 : 파이어폭스에서 실행해 보니 아이콘 클릭시 메뉴가 나오지 않네요 ㅠ.ㅠ

 

오히려 IE6 이상 지원이 되는 jquery를 이용하는 것도 좋은 방법일 것 같습니다.

 

*jquery - 자바스크립트 라이브러리로, 자바스크립트를 단순화시킨 것

http://www.w3schools.com/jquery/default.asp

 

 

 

 

[css] 링크 가상 클래스(:link, :visited,:hover, :active)

 

[css3] :target 가상 클래스

 

[css] :checked 선택자를 이용한 토글 메뉴 버튼

 

[html] input type 속성

 

 

신고
지구별에
css 2015.02.11 15:29

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 

 

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 

미디어 쿼리를 이용해서, 반응형 웹사이트 만들기 연습해 보고 있습니다.

 

지난 시간에는 숨김 메뉴를 드러낼 때, hover 선택자로 마우스 오버할 때만 메뉴가 생성되었는데요...

 

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

 

css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

 

오늘은 메뉴 아이콘을 클릭했을 때 메뉴가 보이고, 다시 한 번 더 클릭하면

 

사라지는 방식을 배워볼게요.  영어로 toggle menu(토글 메뉴)라고도 하며

 

자바스크립트나 jquery를 이용한 방법도 있는데,

 

오늘은 css로만 만들어 보겠습니다.

 

 

html 소스

<label for="toggle">&#8801;</label>          /*메뉴 아이콘*/
<input type="checkbox" id="toggle"/>        /*체크박스*/ 

 

<ul id="nav" >                                        /*메뉴*/
<li><a href="#">Home</a> &#10072;</li>
<li><a href="#">Guest</a> &#10072;</li>
<li><a href="#">Noitce</a></li>
</ul>

 

[html] label 태그

 

input type 속성

 

 

label 요소는 체크박스를 설명하는 이름표 역할을 하는데요. 이 자리에 메뉴 아이콘을 넣습니다.

 

이름표를 클릭했을 때 체크박스도 같이 선택되고, 다시 클릭하면 선택이 해제 됩니다.

 

 

 

 

css

#nav{margin:0; padding:0; list-style:none;display:inline;}  /*목록 여백 초기화, 머리기호 없애기, 메뉴 일렬로*/
#nav li {display:inline;}                                                 /*메뉴 목록 일렬로*/

 

▶실행 화면

 

체크박스는 label 때문에 만들었을 뿐, 실상 쓰임은 없으므로 숨겨 두겠습니다

 

메뉴도 아이콘을 클릭했을 때만 표시하도록 숨겨 볼게요



 

css

#nav, #toggle {display:none;}

 

▶실행 화면

 

 

이제 아이콘을 클릭했을 때 메뉴를 드러내도록 하겠습니다.

 

또 다시 클릭 하면 메뉴가 다시 사라지도록이요

 

css

#toggle:checked + #nav{display: inline;}

 

[css3] :checked 가상 클래스

 

▶실행 화면

 

전체 css

#nav{margin:0; padding:0; list-style:none;display:inline;}
#nav li {display:inline;}
#nav, #toggle {display:none;}
#toggle:checked + #nav{display: inline;}

 

소스는 아래 파일 다운 받아 실행해 보세요

 

 

basic toggle.html

 

 

이 소스를 응용해서, 지난 시간에 배운 반응형 웹사이트의 메뉴를 만들어 보세요~

 

 

※주의

 

 

체크박스의  단점

 

1. 모바일 사파리 iOS 6.0 이하에서 작동하지 않음

 

버그 때문에 label 클릭이 되지 않음. 

 

해결책 :  label에 빈 onclick을 추가하는 것.

 

<!-- iOS 버그 교정-->

 

<label for="toggle" onclick></label>

<input type="checkbox" id="toggle">


2. 안드로이드 브라우저 android 4.1.2 이하에서 작동하지 않음.


예전엔 webkit 에서, 형제(+)/일반(~) 선택자와 가상 클래스와 결합할 때 버그가 있었는데,

 

체크박스 핵은  형제 선택자와 가상 클래스 :checked를 사용하기 때문.


버그는 webkit 535.1(chrome 13)부터 교정되었는데,

 

안드로이드 4.1.2의 실제 웹킷은 534.30이기 때문에, 구 안드로이드 장치에서

 

작동하지 않음.


 

해결책: body 요소에 webkit만의 가짜 애니메이션을 추가하는 것.

/* Android 버그 교정 */
body {
  -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
  from { padding: 0; }
  to { padding: 0; }
}

 

출처 : http://css-tricks.com/responsive-menu-concepts/ 

 

 

 

http://www.outofscope.com/css-only-menu-toggle-no-javascript-required/

 

위 사이트를 참고로 했습니다.

 

신고
지구별에
css 2015.02.10 18:03

css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

 

css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

미디어 쿼리를 이용하여 반응형 웹사이트 만들기를 해 보고 있어요.

 

 

미디어 쿼리, @media query 이해하기

 

반응형 웹사이트(소스) 만들기 연습

 

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

 

이번 시간엔

 

1. 화면 480px 이하로 축소하면, 상단 메뉴바가 사라지고

2. 메뉴 아이콘이 새로 등장하며

3. 아이콘을 클릭했을 때 다시 메뉴가 등장하는 방법

 

을 배워 볼게요.

 

 

 A 화면

 

  B 화면

 

 C 화면

 

A화면 만들기

 

전체 html 소스

<div id="header">
<a href="#" id="menu">&#8634;</a>             /*메뉴 아이콘*/
<ul id="nav">                                            /*메뉴*/
<li><a href="#">Home</a> &#10072;</li>
<li><a href="#">Guest</a> &#10072;</li>
<li><a href="#">Notice</a></li>
</ul>
</div>

 

<div id="contents">본문</div>                   /*본문 영역*/ 
<div id="side">오른쪽 사이드바</div>         /*사이드바 영역*/ 
<div id="footer">footer</div>                      /*푸터 영역*/ 

 

 



그럼 하나씩 살펴보도록 하겠습니다~

 

메뉴 아이콘 만들기

 

<a href="#" id="menu">&#8634;</a>

위 코드에서 &#8634 와 &#10072은 특수 기호를 입력하는 html 코드입니다.

 

chracter entity라고 부르며, &#8634 으로 메뉴 아이콘을 만들고, &#8634 는 수직바 입니다.

(위 이미지에서 C화면 참조)

 

chracter entity를 더 보시려면 http://dev.w3.org/html5/html-author/charref 참조  

 

 

 

메뉴 만들기

 

이건 지난 시간에 배운 것과 다르지 않습니다. 1단 메뉴 만드는 기본 구성입니다.

 

<ul id="nav">                                           
<li><a href="#">Home</a> &#10072;</li>
<li><a href="#">Guest</a> &#10072;</li>
<li><a href="#">Notice</a></li>
</ul>


 

 

나머지는 지난 시간에 배운 것과 동일하며

 

한 가지 다른 점은, 메뉴를 감싸는 #header div가 새로 생겼습니다.

 

 

이제 css 작성법을 보도록 하겠습니다

 

css

#header, #footer, #side {background-color:#FFE08C;}        /*헤더,푸터,사이드 배경색 지정*/

#header{margin-bottom:10px;}                                         /*하단과의 여백 조절*/

a#menu{text-decoration:none;display:none;}                      /*링크 밑줄 없애기, 초기화면에서 아이콘 숨김*/

 

#nav { padding:0; margin:0; display:inline;}                      /*메뉴 여백 초기화, 메뉴바를 일렬로 늘어놓기*/
#nav li{display:inline;}                                         /*메뉴 목록을 일렬로 늘어놓기*/

 

#contents {min-height: 400px; width: 80%; background: #E4F7BA;float:left;}
#side {min-height: 400px;}
#footer {margin-top: 10px;}

 

초기 화면에서는 아이콘이 드러나지 않아야 하므로 숨김 상태로 해 놓습니다.

 

나머지 설명이 따로 없는 부분은 이전 강좌를 보시면 다 나옵니다~

 

 

 

B화면, C화면 만들기

 

css

@media screen and (max-width: 480px)
{

#nav{display:none;}
a#menu{display:inline;}
a#menu:hover + #nav{display:inline;}
 

#contents {width: auto; float: none; min-height: 200px;margin-bottom: 10px;}
#side {width: auto; min-height: 0;}
}

 

#nav {display:none;} 는 화면 축소 시 메뉴바를 감추는 것

 

a#menu(display:inline;} 는 메뉴 아이콘만 생성하는 것

 

a#menu:hover + #nav{display:inline;} 은 아이콘에 마우스 오버했을 때 메뉴를 드러나게 하기


 

마우스 오버가 아닌, 마우스 클릭 시 메뉴를 드러나게 하려면

 

:target 선택자를 사용할 수 있는데, 문제는 한 번 클릭을 하면, 화면을 확대하고 다시 축소 시에도

 

2번째 메뉴가 계속 드러나 있습니다.

 

이건 아마도 자바스크립트를 이용해 풀어야 하나 봐요. (자바스크립트 소스는 다음 시간에 알아 볼게요)

 

아무튼 :target 선택자 소스는 다음과 같습니다

 

#nav:target {display:inline;}

 

두 가지 다 다운 받아서 실행해 보세요

 

media query(icon).html 

media query(target).html

 

 

 

 

 

   

IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge")

 

meta viewport (메타 뷰포트 태그) 사용법

 

웹사이트 운영자라면 알아야할 html, css 상식

 

신고
지구별에
css 2015.02.06 15:15

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

 

 

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

 

미디어쿼리를 이용한 반응형 웹사이트 만들기 연습해 보고 있어요.

 

지난 강좌를 읽고 오셔야 이해가 쉽습니다.

 

[css] 미디어 쿼리, @media query 이해하기

 

반응형 웹사이트(소스) 만들기 연습

 

 

오늘은 지난 시간에 낸 연습 문제, 화면이 480px 이하로 축소될 때 본문 바로 밑으로 사이드 바가 떨어지게 만들어 보겠습니다.

 

또 480px 이하일 때, 사이드바를 없애는 법과, IE6,7,8에서 미디어쿼리를 적용하는 방법도 알아 볼게요

 

[소스 작성 순서]

 

A 화면 만들기 -> B 화면 만들기 

 

 A 화면

 

B 화면

 

 

A화면 만들기

 

어제 배운 소스를 그대로 활용해서 몇 가지만 수정하면 됩니다.

 

html

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Noitce</a></li>
</ul>
<div id="contents">본문</div>
<div id="side">오른쪽 사이드바</div>
<div id="footer">footer</div>

 

 

이번엔 #side(오른쪽 사이드바)를 본문 아래 쪽에 작성했는데, 본문 바로 밑으로 사이드바가 떨어지게 하기 위함이랍니다~

 

css

#nav, #footer, #side {background-color:#FFE08C;}
#nav{margin:0 0 10px 0; padding:0px;}
#nav li{display:inline;} 
#contents {min-height: 400px; background: #E4F7BA; width: 80%; float:left;}
#side {min-height: 400px;}
#footer {margin-top: 10px;}

 

css 작성에서 어제와 틀린 부분은

 

#side 에 너비 설정을 하지 않고

 

#contents에 float 설정을 하고 너비 설정을 함

 

여기까지 작성하면 A화면 대로 나옵니다.

 


 

B화면 만들기

 

@media screen and (max-width: 480px)
{
#contents { width: auto; float: none; min-height: 200px;margin-bottom: 10px;}
#side { width: auto; min-height: 0;}
}

 

위에서 #contents를 float 시켰기 때문에 미디어쿼리에서, #contents 쪽에 float 해제 시켜 줍니다(float:none)

 

이렇게만 하면 화면이 480px 이하 시 아래처럼 표시됩니다.

 

 

만일 480px 이하에서 사이드바가 사라지게 하려면?

 

#side{display:none;} 이라고 하면 됩니다.

 

css

@media screen and (max-width: 480px)
{
#contents { width: auto; float: none; min-height: 200px;margin-bottom: 10px;}
#side { display:none;}
}

 

 

 소스는 파일 다운 받아 활용하세요~

 

media_query2.html

 

 

제 소스를 보면 아래와 같은 코드가 있는데, 뷰포트는 모바일 장치에서 화면 크기 조절을 위해 사용합니다.

 

<meta name="viewport" content="width=device-width, initial-scale=1" />

 

meta viewport (메타 뷰포트 태그) 사용법

 

 

IE6~8에서 미디어 쿼리를 적용하려면?

 

@media 구문은 IE9 이상에서 지원이 되는데요

 

구글에서 제공하는 자바스크립트 라이브러리를 사용하면 IE6~8에서도 미디어 쿼리가

 

작동한다고 합니다.

 

조건부 주석을 통해 스크립트를 감싸며,

 

IE9 이하에서만 이 스크립트가 로드되며, 다른 브라우저는 이 구문을 무시합니다.

 

ie678에서 미디어쿼리.txt

 

 

*속도 향상을 위해 이 구문은 </body> 바로 위에 삽입합니다.

*@import 된 스타일시트에서는 작동하지 않음.

 

 

 

이번 시간은 너무 쉬운 감이 있네요. 다음 시간엔 약간 복잡해집니다.

 

1. 화면이 480px 이하 시, 메뉴 Home Guest Notice가 사라지고

 

2. 대신 메뉴 아이콘이 새로 등장하며

 

3. 메뉴 아이콘을 클릭했을 때 메뉴가 다시 등장하기

 

를 배워보겠습니다.

 

 

 

크로스브라우징, 웹표준과 핵(hack)

 

@import rule 사용법, link 태그와 차이

 

신고
지구별에
css 2015.02.06 11:23

반응형 웹사이트(소스) 만들기 연습

 

 

반응형 웹사이트 만들기 연습(소스)

 

지난 시간에 미디어 쿼리 문법을 배웠습니다.

 

[css] 미디어 쿼리, @media query 이해하기

 

간단한 연습 문제를 내 봤는데, 풀어 보셨는지요?

 

문제는 A화면에서,  480px 이하로 화면이 축소될 경우 B화면으로 바뀌는 미디어 쿼리를 작성하는 것이었습니다.

(컴퓨터, 스마트폰 화면일 경우)

 

 A 화면

 

B 화면

 

 

우선 A 화면부터 작성해 보겠습니다~

 

 

html

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Noitce</a></li>
</ul>
<div id="side">오른쪽 사이드바</div>
<div id="contents">본문</div>
<div id="footer">footer</div>

 

 

#side를 #contents 앞에 두었는데, B화면에서 #side가 먼저 오도록 하기 위함입니다.

 



css

#nav, #footer, #side {background-color:#FFE08C;} /*메뉴,사이드바,푸터 배경색 설정*/

#nav{margin:0px 0px 10px 0px; padding:0px;}} /*목록 여백 초기화, 하단과 여백 조절*/
#nav li{display:inline;}  /*메뉴를 일렬로 늘어놓기*/
#side {min-height: 400px; width: 200px;  float: right;} /*사이드바를 오른쪽으로 float 시킴. 너비 200px 최소높이 400px*/
#contents {min-height: 400px; background: #E4F7BA;} /*최소높이 400px로 지정, 배경색 지정*/
#footer {margin-top: 10px;} /*상단과의 여백 조절*/

 

보통 #side와 #contents를 모두 float 시키고  float를 해제하기 위해, #footer에서 clear:both 해주는 경우가 많은데

 

다른 사이트에서 이보다 간결한 방법이 나와서 저도 이용해 보았어요.

 

즉 한쪽에 고정 너비를 주어 float 시키고, 나머지 한 쪽은 너비를 지정하지 않아, 자동으로 나머지 가로를 채우도록 합니다.

 

그럼 #footer에 따로 clear하지 않아도 글자가 따라 붙지 않습니다.

 

높이가 너무 줄어들지 않도록 최소 높이도 같이 지정해 줍니다.

 

 

이제 화면 너비가 480px로 줄어들면 아래 B처럼 오른쪽 사이드바가 떨어지게 만들어 보겠습니다

 

 

 css

@media screen and (max-width: 480px)
{

#side { width: auto; float: none; min-height: 0;margin-bottom: 10px; }

#contents { width: auto; min-height: 200px;}
}

 

화면 너비가 480px 이하이면, #side와 #contents가 모두 자동 너비가 되도록 하고,

 

#side(오른쪽 사이드바)는 float:none으로  float를 해제합니다. float를 해제하면

 

#side가 가로화면 전체를 차지하며 다음 div가 아래로 떨어짐

 

원래 오른쪽 사이드바의 최소 높이가 400px이었는데, 축소 화면에서는 최소 높이를 0px로 지정했습니다.

 

참 쉽죠~ㅇ 

 

실행 화면은 파일 다운 받아 활용하세요

 

 

media_query.html

 

 

다음 연습 문제로, 이번엔 사이드바가  본문 아래쪽으로 떨어지도록 만들어 보세요~

 

 

 

[css]드롭다운 메뉴 만들기(기초)

 

드롭다운 메뉴 만들기 (2단 수직 메뉴편)

 

드롭다운 메뉴 만들기(2단 수평 메뉴편)

 

드롭다운 메뉴 만들기 (3단 수평 메뉴편)

 

meta viewport (메타 뷰포트 태그) 사용법

 

 

신고
지구별에
css 2015.02.05 15:14

[css] 미디어 쿼리, @media query 이해하기

 

 

[css] 미디어 쿼리, @media query 이해하기

 

오늘은 반응형 웹에서 자주 사용하는 미디어 쿼리 문법을 배워 보겠습니다.

 

미디어 쿼리는 장치에 따라 각기 다른 레이아웃을 작성하거나,

 

다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹페이지를 작성할 때

 

유용한 구문입니다.

 

▶ @media 브라우저 지원

 

ie9+, chrome 21+, firefox 3.5+, safari 4.0+, opera 9+

 

 

미디어 쿼리 사용법

 

미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다.

 

css 내부에 삽입하기 

 

<style>
@media (max-width: 700px) {
  .container{
    margin:0px; padding: 0px;
  }
}
</style>

 

링크로 연결할 때


<link red="stylesheet" media="(max-width: 700px)" href="test.css" />

 

*test.css 파일 안에는 위 미디어쿼리 구문이 들어가야 합니다.

 

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

 

미디어 쿼리 문법

 

css에서

 

@media not|only media type and (media feature) {CSS-Code;}

 

 

링크로 연결할 때

 

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="test.css">

 

 

 

위 문법을 하나씩 살펴 볼게요.

 

우선 and나, not, only 등을 연산자라고 부르는데요.

연산자는 and, 쉼표, not, only가 있습니다.

 

 

▷ 연산자

 

and | not | only | ,

 

 

and 연산자 : 여러 미디어 특징들을 하나로 결합함 .

 

, (or)연산자: 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.

 

not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.

 

only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지


* not이나 only를 사용하려면 미디어 타입을 규정해야 함.

* 미디어 쿼리는 대소문자 구별하지 않는다

 

사용 예.

 

가장 단순한 형태의 미디어 쿼리

 

@media (min-width: 700px) {background-color: yellow;}

 

위 구문에서 미디어 타입이 생략되어 있지만, 미디어 타입의 기본값은 all입니다.

 

따라서 다음 구문과 같은 말임

 

@media all and (min-width: 700px) {...}

 

모든 유형의 장치이며 최소너비 700px 일 때 스타일을 적용하겠다는 의미

 

 

and 연산자의 사용

 

*새로운 미디어 특징들을 추가할 때마다 and 연산자를 사용합니다.

 

@media (min-width: 700px) and (orientation: portrait) { ... }

 

위 예는, 모든 유형의 장치이며 최소 너비 700px 이며, 방향이 세로 모드일 때만 적용한다는 뜻

 

 

@media print and (min-width: 700px) and (orientation: landscape) { ... }

 

프린트 장치이며, 최소 너비가 700px이며, 방향이 가로일 때 적용함.

 

 

 

쉼표 연산자의 사용

 

*쉼표는 각각 개별 미디어 쿼리로 인식합니다.

 

@media (min-width: 700px), print and (orientation: landscape) { ... }

 

모든 장치에서 최소너비 700px이상일 때 적용하거나, 프린트 장치에서는 가로 방향일 때만 적용하겠다는 뜻.


 

not 연산자의 사용

 

@media not all and (color) { ... }

 

not은 전체 미디어 쿼리를 수식합니다. 즉 not은 all and (color)를 포함하여 부정함.

 

 @media not (all and (color)) { ... } 와 같은 말


모든 색상 장치에서  이 스타일을 적용하지 않겠다는 뜻.

 

쉼표로 분리하여 사용할 때, 미디어 구문은 개별 미디어 쿼리로 인식하므로

 

not은 쉼표 이후에 영향을 미치지 않습니다.

 

@media not screen and (color), print and (color)는

 

따라서 위 예는, 모든 스크린 색상 장치에서 적용하지 않거나, 프린트 색상 장치에서 적용하겠다는 뜻

 

 

only 연산자 사용

 

<link rel="stylesheet" media="only screen and (color)" href="test.css" />


오직 스크린에 색상 장치일 때만 이 스타일을 적용하겠다는 뜻.

 



▷ media type(미디어 종류)

 

all | print | speech| screen 

 

● all 기본값. 모든 미디어 장치에 사용 됨
● print 프린터에 사용
● screen 컴퓨터 스크린, 테블릿, 스마트폰 등
● speech 페이지를 읽어주는 화면 낭독기

 

미디어 종류 중 퇴화된 것.

aural ,braille, embossed, handheld, projection , tty, tv 

 

 

▷ media feature(미디어 특징)

 

width | height | min-width | min-height | max-width | max-height
device-width | device-height | min-device-width | min-device-height  | max-device-width | max-device-height
aspect-ratio (min- / max- 접두어 사용가능)
device-aspect-ratio (min- / max- 접두어 사용가능)
color (min- / max- 접두어 사용가능)
color-index (min- / max- 접두어 사용가능)
monochrome (min- / max- 접두어 사용가능)
resolution (min- / max- 접두어 사용가능)
scan | grid

 

 

● width  화면 영역 너비(브라우저 창 같은)


예 1: @media (min-width: 20em) {...}

 

* 모든 장치에서 최소 너비 20em 이상이면 적용

 
예2 : <link rel="stylesheet" media="screen and  (min-width: 500px) and (max-width: 800px)
    href="test.css" />


* 스크린 장치 최소 화면이 500px보다 크고 800px보다 작을 때  스타일 적용
 

 

● height  화면 영역 높이

 

  

● device-width 출력 장치의 너비.(컴퓨터 스크린 같은)

 

예 : <link rel="stylesheet" media="screen and (max-device-width: 450px)" />

 

* 장치 너비가 450px보다 작을 때 적용


● device-height 출력 장치의 높이

 

● aspect-ratio  화면 영역의 가로 세로 비.


기호 '/'을 사용하여, 앞에는 수평 픽셀 비율. 뒤에는 수직 픽셀 비율 (양수이며 정수)

 

예 : @media screen and (min-aspect-ratio: 1/1) { ... }

 

*가로 화면 비가 1:1 이상일 때 적용. 즉, 화면이 직사각이거나 세로일 때만 적용


● device-aspect-ratio  출력 장치의 가로세로 비.(첫번째 값이 수평픽셀 비, 두번째 값이수직 픽셀 비)

 

예: @media screen and (device-aspect-ratio: 16/9) { ... }

 

* 장치 가로 세로 비가 16:9일 때 적용.

 

● color 출력 장치의 색상 구성요소 당 비트 수 (장치가 색깔 장치가 아니면 값은 0)


예1 : @media all and (color) { ... }

 

* 모든 색상 장치에 적용.

 

예 2: @media all and (min-color: 4) { ... }


* 색상 구성요소당 최소 4비트를 지닌 장치에  적용


● color-index 장치가 표시할 수 있는 색상 수

 

예: <link rel="stylesheet" media="all and (min-color-index: 256)" href="test.css" />

 

* 최소 256 색상을 지닌 모든 장치에 적용

 

● grid 출력 장치가 그리드 장치 또는 비트맵 장치냐에 따라 결정.

 

장치가 그리드 기반이면  값은 1. 그렇지 않으면 0

 

● monochrome 흑백(회색톤)장치에 색상 당 비트  수.

 

장치가 흑백이 아니면, 값은 0

 

예: @media all and (monochrome) { ... }

 

* 모든 흑백장치에 적용

 

● orientation 화면이 가로 모드인지, 세로 모드인지 지정

 

예 : @media all and (orientation: portrait) { ... }

 

*오직 세로 방향에서만 적용.


● resolution 출력 장치의 해상도

 

해상도는 dpi (dots per inch)나, dpcm(dots per cintimeter)로 지정
 

예: @media screen and (min-resolution: 300dpi) { ... }

 

* 최소 300dpi 이상 해상도를 지닌 장치에 적용

 

● scan 텔레비전 출력 장치의 스캐닝 과정

값은  progressive | interlace

 

*tv값이 퇴화되었으므로 이 값도 사용하지 않을 것 같네요

 

[참조 사이트]

 

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html 

 

▶간단한 예제

 

처음에는 A 화면이었다가, 컴퓨터, 스마트폰 등에서 480px이하로 화면이 축소되면 B 화면처럼 바뀌는

 

소스를 작성해 보세요~ 정답은 다음 시간에

 

 

A 화면

 

B 화면

 

 

min-width 속성, min-height 속성 사용법

 

max-width 속성, max-height 속성 알아보기

 

외부 문서를 연결하는 link 태그 사용법


meta viewport (메타 뷰포트 태그) 사용법


신고
지구별에
css 2015.02.03 15:37

[css3] repeating gradient (반복형 그레디언트)

 

 

[css3] repeating gradient (반복형 그레디언트)

 

반복형 그레디언트는, 그레디언트를 반복 패턴으로 보여줍니다.

 

선형 그레디언트는, 반지름형 그레디언트 모두 반복 패턴으로 만들 수 있습니다.

 

두 강좌 먼저 읽고 오시면 이해하기 쉬울 거예요~

 

gradient (linear-gradient) 사용법

 

gradient (radial-gradient)

 

 

☆repeating-linear-gradient 반복형 선형 그라디언트

 

linear-gradient 문법과 비슷합니다.

 

 

최소 2가지 이상의 색상을 선택하고, 색상의 위치도 지정할 수 있습니다.

 

▶예

 

#linear1{background:repeating-linear-gradient(white, yellow 20px, green 40px);}

 

linear-gradient와 다른 점이 있다면, 반복 패턴으로 보여준다는 것.

 

white가 시작점, yellow 20px는 중간색이며, green 40px는 마지막 색상점입니다.

 

그레디언트 크기는 마지막 색상점 위치와 크기와 동일합니다. 이 예에서는 40px.

 

이 40px가 반복 패턴으로 보이게 됩니다. 

 

 

[비교해서 보기]

 

 

 

2번 예를 보면, 색상이 점차적으로 희미해지는데, 색상이 뚜렷한 줄 무늬를 반복적으로 보여주려면 어떻게 할까요?

 

아래 3번 예처럼, 4가지 색상 선택을 하면 됩니다.

 



white는 시작점, 두번째 white 위치는 20px, 그러므로 0과 20px 사이는  흰색으로만 나타납니다.

 

20px부터 40px 지점까지는 갈색 색상으로만 나타납니다.

 

 

이번엔 선을 좀 더 가늘게 표시해 보겠습니다.

 

아래 4번 예에서는, 38px부터 40 px 지점까지만 갈색으로 표시가 됩니다.

 

 

이번에는, 각도를 이용해 대각선 방향으로 만들어 보겠습니다.

 

#re-linear4{background:repeating-linear-gradient(45deg, white, white 20px, #997000 20px, #997000 40px);} 


 

 

 

 

repeating-radial-gradient 반복형 반지름형 그레디언트

 

repeating-radial-gradient라고 쓰는 것 빼고는 사용법은 반지름형 그레디언트와 동일합니다.

 

#re-radial1{background:repeating-radial-gradient(white, white 20px, #997000 20px, #997000 40px);}

 

 

▶브라우저 지원

 

표준 문법 : ie10.0+, chrome 26.0, firefox 16.0+, safari 6.1+, opera 12.1+

 

접두어 버전 :
chrome 10.0+과 safari 5.1+은 -webkit-
                   firefox 3.6+ 은 -moz- 
                    opera 11.1+은 -o-

*  repeating-linear-gradient은,  opera 11.1+부터 접두어 버전을 지원하고

   repeating-radial-gradient은, opera 11.6+부터 지원

 

 

▶사용 예

#re-radial{
  background: -webkit-repeating-radial-gradient(white, white 38px, brown 40px);  /*사파리 5.1~ 6.0, 크롬 10~25 */
  background: -o-repeating-radial-gradient(white, white 38px, brown 40px);  /* 오페라11.6~12.0 */
  background: -moz-repeating-radial-gradient(white, white 38px, brown 40px);  /*파이어폭스3.6~15 */
  background: repeating-radial-gradient(white, white 38px, brown 40px);  /* 표준*/
}

 

참조: http://www.hongkiat.com/blog/css3-repeating-gradients/

 

 

 

background-repeat 속성(배경 이미지 패턴)

 

background-position 속성(배경이미지 위치 지정)

 

background-size 속성(배경이미지 크기 조절)

 

background 속성(배경 전체 지정)

신고
지구별에
css 2015.01.29 16:06

[css] gradient (radial-gradient)

 

 

[css] gradient (radial-gradient)

 

지난 시간에 linear-gradient(선형 그레디언트)를 배웠습니다.

 

 

[css3] gradient (linear-gradient) 사용법

 

오늘은 반지름형 그라디언트 입니다. 이전 강좌를 미리 보고 오셔야 이해가 더 쉬울 거예요.

 

선형 그레디언트가  일직선의 그레이디언트를 만들었다면, 반지름형 그레디언트는 반지름이나

 

타원형, 원형 형태의 그레디언트를 만들 때 사용합니다.

 


radial gradients 반지름형 그레디언트


반지름형 그레디언트는 그레디언트 중앙을 축으로 반지름을 그립니다.

 

그레디언트를 만들려먼 최소 두 가지 색상을 지정해야 합니다.


 

[색상 선택] color-stop

 

색상 지정은 linear-gradient와 동일한 방식으로 합니다.

 

색상의 시작점과 끝점 2개는 필수로 지정하고, 중간에 선택적으로 여러 색상을 넣을 수 있어요.

 

색상은 영문 색상 이름, rgba, 16진수값 다양하게 지정할 수 있어요.

 

색상점 위치도 같이  설정할 수 있어요 (%나 길이값 가능)
 
0%, 0는 그레디언트  중앙
100%는 그레디언트 끝지점
그 사이의 백분율은 그레디언트 선에 선형적으로 위치됨.

 

▶예 1

#radial{background: radial-gradient( yellow, green);}

 

 

▶예 2

#radial{

background: radial-gradient(rgba(234,237,242,1) 0%, rgba(19,30,46,1) 61%, rgba(19,30,46,1) 100%);

}


 
[모양]

 

반지름형 그레디언트의 모양은 기본값이 타원형이며, 타원형과 원형 두 가지 값이 있습니다.


ellipse | circle
ellipse  타원
circle 원형


▶예

#radial1{
background: radial-gradient(green 5%, blue 25%, white 50%);
}
#radial2{
background: radial-gradient(circle, green 5%, blue 25%, white 50%);
}

 

▶실행화면

 

 

 

[위치]

 

반지름이 시작하는 위치로, 기본값이 center입니다.

 

background-position 속성과 비슷하게 키워드나, 길이 값을 사용합니다.

 

background-position 속성(배경이미지 위치 지정)

 

길이값을 사용하면 수평이 먼저 오고 그 다음이 수직.

 

문법 at을 사용함
 

▶예

#radial3{
background: radial-gradient(at 30%,  green 5%, blue 25%, white 50%);
}


수평이 30%, 수직이 생략되었으므로 center 임.

 

#radial4{
background: radial-gradient(at left top, green 5%, blue 25%, white 50%);
}

 



그레디언트가 왼쪽 상단에 위치함

 

#radial5{
background: radial-gradient(at 60% bottom, green 5%, blue 25%, white 50%);
}

 

수평이 60%, 수직이 아래 

 

▶실행화면

 

 

[모양 크기]

 

그레디언트 끝 모양의 크기를 지정합니다.

 
closest-corner | closest-side | farthest-corner | farthest-side

 

closest-corner 끝 모앙이 그레디언트 중앙에서 가장 가까운 모서리로 흐려짐.
closest-side 끝 모양이 그레디언트 중앙에서 가장 가까운 변으로 흐려짐.
farthest-corner 기본값. 그레디언트 중앙에서 가장 먼 모서리로 흐려짐
farthest-side 그레디언트 중앙에서 가장 먼 변으로 흐려짐

 

 

▶예

#cc, #cs, #fc, #fs{width:200px; height: 200px;}
#cc{background: radial-gradient(closest-corner, yellow 5%, green 25%, pink 50%);}
#cs{background: radial-gradient(closest-side, yellow 5%, green 25%, pink 50%);}
#fc{background: radial-gradient(farthest-corner, yellow 5%, green 25%, pink 50%);}
#fs{background: radial-gradient(farthest-side,  yellow 5%, green 25%, pink 50%);}

 

 

▶실행화면

 

캡쳐한 화면이라 closest와 farthest가 눈에 띄게 차이가 나지 않지만

farthest가 원 모양이 바깥 쪽으로 좀 더 퍼져 나가는 모양입니다. 그래서 끝 부분도 조금 흐릿하구요..

 


▶ 브라우저 지원

 

표준 버전: ie10.0+, chrome 26.0, firefox 16.0+, safari 6.1+, opera 12.1+

 

 

접두어 버전: chrome 10.0+ / safari 5.1+은 -webkit-

                   firefox 3.6+ 은 -moz-

                   opera 11.6+은 -o-

 

 

브라우저 업체별 접두어(vendor prefix)

 

 

▶사용 예

#radial{

background-color: green;  /* fallback */  
background: -webkit-radial-gradient(yellow, green, white); /* Safari 5.1~6.0 , chrome 10.0~25.0 */
background: -o-radial-gradient(yellow, green, white); /* Opera 11.6 ~ 12.0 */
background: -moz-radial-gradient(yellow, green, white); /*Firefox 3.6 ~15 */
background: radial-gradient(yellow, green, white); /*표준 문법*/
}

 

모양 크기를 지정할 때는 문법이 조금 다릅니다


#radial{
background: -webkit-radial-gradient(60% 40%, closest-side,yellow, green, white);/* Safari 5.1+, chrome 10.0+ */

background: -o-radial-gradient(60% 40%, closest-side,yellow, green, white);/* Opera 11.6 ~ 12.0 */

background: -moz-radial-gradient(60% 40%, closest-side,yellow, green, white);/*Firefox 3.6 ~15 */
background: radial-gradient(closest-side at 60% 40%,yellow, green, white);/*표준 문법*/

}

 

복잡하신 분은, 그레디언트 생성기를 이용하시면 될 것 같아요.

 

http://www.cssmatic.com/gradient-generator

 

위 사이트도  참조하시면 도움 됩니다. 

 

신고
지구별에
css 2015.01.28 17:03

[css3] gradient (linear-gradient) 사용법

 

 

[css3] gradient (linear-gradient) 사용법

 

그동안 미루어 두었던 gradient 속성

 

어렵다고 자꾸 미루다 보니, 영엉  못 쓸 거 같아서 조금씩 다루어 보려고 해요^^

 

예전에 어느 모임에 갔다가,  초등 꼬마가 발표하는 걸 들었는데

 

코끼리를 냉장고에 넣는 법에 관한 이야기였어요.

 

코끼리를 한 번에 집어넣으려고 하면 못 넣지만,

 

조금씩 잘라서 넣으면 다 들어갈 수 있다는 얘기입니다.

 

좀 잔인한 이야기 같지만^^, 이 이야기의 교훈은

 

아무리 어렵게 느껴지는 일도 조금씩 나누어 하면, 어느새 다 할 수 있다는

 

깊은 뜻이 담겨 있습니다^^

 

그래서 정말 하기 싫고, 어려운 일이 생기면 이 우화를 떠올려 봐요.

 

그런 의미에서, gradient에 대한 완벽한 글을 쓰기보다는,

 

제가 이해한 것만 조금씩 정리하려고 해요.

 

 

 

gradient는 세 가지 종류가 있는데

 

→linear-gradient 선형 그레디언트

→radial-gradient 반지름형 그레디언트

→repeating gradient 반복형 그레디언트

 

오늘은 linear- gradient만 다루겠습니다

 

 

gradient의 뜻은 '기울어짐'의 정도나, 기온이나 압력의 '변화 비율'을 뜻합니다.

 

css에서 gradient 는 한 방향에서 다른 방향으로 색이 점차 흐려지거나, 색이 변화하는 효과를 줄 때 쓰는 속성이에요.

 

css gradient는  색상이 아닌, 크기가 없는 이미지입니다.

 

그래서 css로 색상을 지정할 때 background-color 혹은 단축 속성 background 속성을 사용했다면,

 

배경색 background-color 속성 배우기

 

background 속성(배경 전체 지정)

 

 

그레디언트를 지정할 때, background-image 속성을 사용합니다. 단축 속성 background 속성도 가능.

 

배경 이미지를 넣는 background-image 속성

 


그레디언트는 브라우저가 생성하는 것이기 때문에


이미지를 사용했을 때보다 용량이 훨씬 적고, 화면을 확대해도 이미지보다 선명하게

 

잘 나옵니다.

 

 

 

linear gradient(선형 그레디언트)

 

색상 선택(color stops)

 

우선 선을 그릴려면 색을 설정(color stop)해야 하고,

 

시작 색상, 끝 색상, 이 2가지는 필수로 선택합니다.

 

중간에 선택적으로 여러 색상을 더 넣을 수 있어요.

 

여러 가지 색상을 넣을 때 쉼표로 분리해서 적습니다

 

예> linear-gradient(orange, yellow, green)

 

색상은, 영문 색상이름, rgba, hsla 등 가능합니다.

 

[css] 색상값 단위 5가지(rgba 포함)

 


방향 또는 각도 설정

 

방향도 선택할 수 있어요. (기본값은 위에서 아래로)

 

방향을 지정할 때, 시작 지점을 생략하며, 도착 지점만  to를 사용 지정합니다.

 

→왼쪽에서 오른쪽으로 지정

 

body{background-image:linear-gradient(to right, black, #D5D5D5);}

 

→상단 오른쪽으로

 

body{background-image:linear-gradient(to top right, black, #D5D5D5);}

 

→하단 왼쪽으로

 

body{background-image:linear-gradient(to bottom left, black, #D5D5D5);}

 

 

각도 지정하기


(각도를 지정하지 않으면, 하나는 자동으로 주어진 방향에 기초하여 결정)

 

body{background-image:linear-gradient(45deg, black, gray);}

*deg는 degree의 약자

 

0deg는 아래에서 위 방향

 

45deg는 하단 왼쪽에서 상단 오른쪽 방향(즉 45도 방향임)


90deg는 왼쪽에서 오른쪽 방향

 

180deg는 상단에서 하단 방향

 

음수값도 가능함. -45deg

 

 

색상점 위치 지정하기(stop position)

 

그레디언트 축에서 색상점(color stop)의 위치를 지정할 수 있는데 %나 길이값(20px 등)도 가능 합니다.

 

body{background:linear-gradient(to right, skyblue 5%, green 20%, white);}

 

 

▶html 작성 예

 

 

<h3>linear-gradient(skyblue, white);</h3>
<div id="linear">
</div>

 


<h3>linear-gradient(to right, skyblue, white);</h3>
<div id="linear2">
</div>

 


<h3>linear-gradient(to right, skyblue 5%, green 20%, white);</h3>
<div id="linear3">
</div>

 

 

▶css

 

 

div#linear1, #linear2, #linear3{width:200px; height: 100px;}
#linear1{background-image:linear-gradient(skyblue, white);}
#linear2{background-image:linear-gradient(to right, skyblue, white);}
#linear3{background-image:linear-gradient(to right, skyblue 5%, green 20%, white );}

 


 

▶실행화면

 

1번 예제는 방향 설정 없이 색깔 두 가지만 입력했을 때 기본적인 화면입니다.

(기본값으로 상단에서 하단 방향으로 색이 점차 흐려집니다)

 

2번 예제는 방향을 왼쪽에서 오른쪽으로 설정했을 때

(시작 지점은 생략함)

 

3번 예제는, 방향을 오른쪽으로 설정하고, 세가지 색상을 쉼표로 분리하여 지정했어요.

 

각 색깔의 위치도 같이 지정할 수 있어요.

 

▶html 작성 예 2(각도 설정)

 

<h3>linear-gradient(0deg, skyblue, yellow);</h3>
<div id="linear4_1">
</div>
<h3>linear-gradient(45deg, skyblue, yellow);</h3>
<div id="linear4_2">
</div>
<h3>linear-gradient(90deg, skyblue, yellow);</h3>
<div id="linear4_3">
</div>
<h3>linear-gradient(180deg, skyblue, yellow);</h3>
<div id="linear4_4">
</div>

 

▶css

 

#linear4_1,#linear4_2,#linear4_3,#linear4_4{width:200px; height: 100px;}
#linear4_1{background-image:linear-gradient(0deg, skyblue, yellow );}
#linear4_2{background-image:linear-gradient(45deg, skyblue, yellow );}
#linear4_3{background-image:linear-gradient(90deg, skyblue, yellow );}
#linear4_4{background-image:linear-gradient(180deg, skyblue, yellow );}

 

▶ 실행화면

 

0도는 하단->상단

45도는 하단 왼쪽->상단 오른쪽

90도는 왼쪽->오른쪽

180도는 상단->하단 임

 

 

 

▶linear-gradient 브라우저 지원

 

표준 문법 : ie10.0+, chrome 26.0, firefox 16.0+, safari 6.1+, opera 12.1+

 

 

 

 

접두어 버전 : chrome 10.0+과 safari 5.1+은 -webkit- 

                   firefox 3.6+ 은 -moz- 

                  opera 11.1+은 -o-

 

IE6~8 버전 :  유효하진 않지만 작동함

 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='16진수 색상값', endColorstr='16진수 색상값');

 

IE8+ 버전: 유효함

 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";

 

※ background-image 속성은 filter를 무시합니다. 그래서 폴백으로 사용하기에는 부적당함

 하지만 background-color 속성과 filter는 동시에 사용할 수 있습니다. 

※ filter를 통해서 alpha 투명도도 만들 수 있습니다. 

 

rgba(92,47,90,1) == #FF5C2F5A
 

 

브라우저 업체별 접두어(vendor prefix)

 

 

▶사용 예

 

우선 그레디언트를 지원하지 않는 브라우저를 위해, 배경 색이나, 배경 이미지를 넣어주기도하고

 

표준 문법은 맨 아래에 써 줍니다.

 

#linear-gradient{

  background-color: skyblue;  /* fallback */
  background: -webkit-linear-gradient(skyblue, white); /* Safari 5.1 ~ 6.0, chrome 10.0~25 */
  background: -o-linear-gradient(skyblue, white); /* Opera 11.1~ 12.0 */
  background: -moz-linear-gradient(skyblue, white); /* Firefox 3.6 ~ 15 */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='16진수 색상값', endColorstr='16진수 색상값'); /*IE6~8*/

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='16진주', endColorstr='16진수')"; /*IE8+*/

  background: linear-gradient(skyblue, white); /*표준 문법 */
}

 

 

 

표준 문법만 달랑 써도 되는 날이 어서 오면 좋겠습니다 ㅠ

 

위 예는 linear-graident의 기본적으로 두 가지 색상만 설정한 것인데,

 

사실 방향을 설정할 때 접두어 버전의 문법이 다르답니다.

 

자세한 예는 첨부파일을 통해 확인해 주세요.

 

browser support.txt

 

복잡하신 분은 그레디언트 생성기(자동으로 접두어 버전을 만들어주는 사이트)를 이용하셔도 좋을 거예요.

 

http://www.colorzilla.com/gradient-editor/

 

 

[참고 사이트]

 

http://www.impressivewebs.com/css3-linear-gradient-syntax/

 

http://www.w3schools.com/Css/css3_gradients.asp

 

http://css-tricks.com/css3-gradients/

 

신고
지구별에
css 2015.01.27 11:37

[CSS] @viewport rule

 

 

[CSS] @viewport rule

 

지난 시간엔 meta viewport 태그를 배웠습니다

 

meta viewport (메타 뷰포트 태그) 사용법

 

 

head안에 사용하는 이런 것들 말이죠

 

<meta name="viewport" content="width=device-width,initial-scale=1" />

 

잠깐 복습하면, 메타 뷰포트 태그(meta viewport)는 애플이 사파리 아이폰 브라우저를 위해 처음 개발했지만


이후 다른 브라우저들(오페라, 안드로이드, 페넥 브라우저)도 채택하여 사용하고 있습니다.

 

현재는 메타 뷰포트 태그가 널리 사용되고 있지만, 이 태그는 표준이 아니며, 

 

W3C에서 메타 뷰포트 태그의 기능들을

 

@viewport rule로 표준화하려는 시도를 하고 있습니다. (참조: CSS Device Adaptation )

 

 

@viewport rule는 현재 제안된 표준으로, 초안 단계입니다.

 

정식 표준이 되면 기존에 사용하는 메타 뷰포트 태그는 점차 폐지될 것으로 보입니다.

 

▶브라우저 지원: IE10과 Opera11에서만 지원하며 -ms-, -o- 업체별 접두어가 각각 필요함

 

브라우저 업체별 접두어(vendor prefix)

 

 

▶ @viewport rule 사용법

 

메타 뷰포트 태그는 html에 포함시켰다면 @viewport rule은 css 안에 포함시킵니다.

 

예:

<style type='text/css'>
@-ms-viewport { width: device-width; }

@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</style>


내용과 표현의 분리라는 측면에서, 뷰포트 설정은 표현에 관한 것이므로 css에 들어갈 필요가 있다는

 

것이죠.

 

이 페이지에서는 @viewport rule에 대한 대략적인 사용법을 살펴볼 텐데요.

 

 @viewport rule 은 정식 표준으로 발표된 것이 아니기에 내용이 변경될 수 있고,

 

제가 아직 이해하지 못한 측면도 있어서  보완해야 할 점이 많다는 점 주의 부탁드릴게요.

 

 

 

먼저, 메타 뷰포트 태그로 뷰포트를 설정할 때 가장 기본적으로 사용하는 코드는 다음과 같습니다.

 

<meta name="viewport" content="width=device-width,initial-scale=1" />

 

*width=device-width    뷰포트 너비를 장치 너비로 설정

*initial-scale=1  초기 화면 배율(줌 레벨)을 1로 설정

 


@viewport rule로 옮기면 다음과 같습니다.

 

@viewport {
zoom: 1;
width: device-width;
}

 

다음 코드는 

 

<meta name="viewport" content="width=640" />


@viewport 로 하면 다음과 같습니다

 

@viewport {
    width: 640px;
}

 

 

아래 코드에서 user-scalable=1(사용자 크기 조절)은,

 

<meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1">

 

user-zoom: zoom으로 옮깁니다.

 

@viewport {
  width: 480px;
  zoom: 2.0;
  user-zoom: zoom;}

 


 

최대 화면 배율은 max-zoom으로 옮깁니다. 

 

@viewport {
    width: 960px;
    zoom: 1;
    max-zoom: 3;
}

 

 

@viewport rule에서 유용한 속성 중 하나는 가로 모드와 세로 모드 설정을 고정하는 것입니다.


가로 모드는 landscape 세로 모드는 portrait 임

 

@viewport {
    orientation: landscape;
}

 

 

미디어 쿼리와 함께 사용할 수도 있습니다(예: 960px보다 큰 뷰포트는 960이하로)

 

@media screen and (min-width: 960px){
    @viewport {
        width: 960px;
    }
}

 

 

[주의]


CSS Device Adaptation 에서 2013년 발표된  편집자 초안은 device-width 키워드를 폐지합니다.

 

초안에 따르면  device-width 는 100vw로,  device-heigh 100vh로 옮깁니다.

 

아래 코드는

 

<meta name="viewport" content="width=device-width,initial-scale=1" />

 

 

다음처럼 옮깁니다.

 

@viewport {
zoom: 1;
width: extend-to-zoom;
}

 

 

이러한 구문은 2013까지 제안된 것이 아닙니다.

 

그런데 IE10과 11은 이미 개발된 상태였던 터라, 마이크로소프트는 업체별 접두어를 만들었습니다(@-ms-viewport –)

 

 

@-ms-viewport-는  width, height 두 가지 속성만을 지원합니다.

 

하지만 %, px, 또는 vw. vh도 사용할 수 있음.

 

 

아래 코드는  윈도우 8 앱 윈도우에서 뷰포트를 올바르게 설정하기에 충분하지만,

 

@-ms-viewport {
width: 100%;
}


윈도우 폰은 100%을 장치에서 가능한 해상도의 100%로 번역합니다.

 

그래서 윈도우폰 IE10이 뷰포트를 올바로 표시하기 위해 아직까지는

 

다음처럼 옮길 수 있습니다.

 

@-ms-viewport {
width: device-width;
}

 

 

@viewport rule 에 들어갈  속성은 다음처럼 요약됩니다.

 

이미지 출처 :  CSS Device Adaptation

 

 

더 자세한 내용은 아래 링크 참조 부탁드려요

 

http://dev.w3.org/csswg/css-device-adapt/

 

http://www.webdesignerdepot.com/2013/08/how-to-build-standards-compliant-responsive-design-using-viewport/

 

Surveying the viewport


@-ms-viewport rule

 

 

 

신고

'css' 카테고리의 다른 글

[css] gradient (radial-gradient)  (0) 2015.01.28
[css3] gradient (linear-gradient) 사용법  (0) 2015.01.27
[CSS] @viewport rule  (2) 2015.01.15
IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기  (0) 2014.12.22
css 길이 단위  (0) 2014.12.11
[css] height 속성  (0) 2014.12.10
지구별에
css 2015.01.15 13:02

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기

 

 

IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기


 

지난 시간엔, ie6-8에서 html5 요소 적용하는 방법과, ie6-8을 ie9처럼 행동하게 만들기를 배웠습니다.

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

 

오늘 역시 여기에 이어지는 글입니다.

 

css3 속성들 중 박스를 꾸미는 속성 일부를 ie6-8에서 적용하는 방법입니다.

 

여러 가지 방법이 있겠지만, 가장 잘 알려진 것으로 CSS3 Pie가 있습니다..

 

http://css3pie.com

 

 

CSS3 PIE란?

 

PIE란  Progressive Internet Explorer(진보적 인터넷 익스프롤러)의 약자입니다.

 

PIE는 구 ie가 css3 속성을 표시하게 하는  IE 에 결부된 behavior 입니다.(크로스 브라우징이 아님)

 

현재 IE6부터 8까지 다음 CSS3 특징들을  일부 또는 전부 지원 합니다.

 

border-radius (축약 속성만 지원. border-top-left-radius 등은 지원하지 않음.)


box-shadow(현재 inset 키워드를 지원하지 않음)


border-image(IE6-8에서 'streth' 만 지원/ie9에서는 'repeat'와  'round' 또한 지원함)                  

 

multiple background images (여러 개의 배경 이미지 넣기)


linear-gradient as background image (배경 이미지에서 linear-gradient 적용)

 

 

IE7.js  VS  CSS3 Pie

 

IE7.js 파일(IE8/IE9.js 포함)은 IE 레이아웃 버그를 교정하고, 몇 가지 CSS3 선택자를 실행할 수 있도록 합니다.

 

하지만 CSS3 박스를 꾸미는 속성에 관한 부분은 포함돼 있지 않습니다. 

 

CSS3 PIE는 CSS3 선택자에 관한 부분은 없고, css3 속성 중 박스를 꾸미는 속성 지원이 핵심입니다.

 

그러니까 두 파일은 서로 겹치지 않게 다른 부분을 지원합니다.

 



CSS3 PIE 사용법

 

1. 아래 사이트로 이동 후 가장 최신 버전인 Download PIE 2.0 beta 1 파일을 다운받습니다.

 

http://css3pie.com/download/

 

 

 

 

2. 압축 풀기

 

압축을 풀면, pie의 세 파일이 있고(htc, php. js)

 

uncompressed가 있는데 uncompressed는  압축되지 않은 버전으로 용량이 조금 큽니다. 

 

htc 파일 vs javascrip 파일

더보기

 

 

우리가 사용할 파일은 2kb로 된 pie.htc 파일입니다.

 

 

3. pie.htc 파일을  본인 사이트에서 원하는 폴더에  업로드 합니다.

 

 

4. 적용방법 

 

우선 다음과 같은 css가 있다고 했을 때

 

div {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
     border-radius: 1em;
}

 

아래 빨간 색 코드를 추가합니다. 

div {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
     border-radius: 1em;

     behavior: url(PIE.htc);
}

 

*url() 안에 PIE.htc 파일이 있는 경로를 적습니다.

경로는 html 파일에 상대적인 주소여야 함(css 파일이 아니라)

 

 

 

 

5. css3 pie가 적용되지 않을 때

 

아래 링크  Known Issues(알려진 문제들)을 참조해 주세요.

 

http://css3pie.com/documentation/known-issues/

 

 

 

신고

'css' 카테고리의 다른 글

[css3] gradient (linear-gradient) 사용법  (0) 2015.01.27
[CSS] @viewport rule  (2) 2015.01.15
IE6,7,8에서 css3 속성(border-radius, box-shadow 등) 적용하기  (0) 2014.12.22
css 길이 단위  (0) 2014.12.11
[css] height 속성  (0) 2014.12.10
[css] width 속성  (0) 2014.12.09
지구별에
css 2014.12.22 17:13
Powerd by Tistory, designed by criuce