fontawesome 다운받아 이용하는 법

 

 

Font Awesome 다운받아 이용하는 법

 

지난 시간에는 font awesome을 인터넷 링크로 내려받아 사용하는 법을 알아보았어요.

 

font awesome 사용법(웹 아이콘 이용하기)

 

오늘은 직접 다운 받아 서버에 올려 사용하는 방법을 알아보겠습니다.

 

 

1. 다음 페이지로 이동하여, Download 버튼을 누릅니다.

 

 

 

 

 

 

2. 압축 파일을 풀면

 

font-awesome-4.3.0 폴더가 생깁니다.

 

하위 폴더는 다음과 같습니다.

 

 

 

css- font-awesome

       font-awesome.min

fonts-FontAwesome

        fontawesome-webfont

        fontawesome-webfont.eot

        fontawesome-webfont.svg

        fontawesome-webfont.woff

        fontawesome-webfont.woff2

less

scss

 

less와 scss는 제가 이용법을 모르므로, 상세 파일명을 적지 않았습니다.

 

css는 fontawesome 스타일 양식이라고 생각하면 됩니다. 확장명 min이라고 되어 있는 것은

        저용량화시킨 것.

 

fonts 폴더에 여러 파일이 있는데, eot, svg, woff 등의 차이는 아래 링크 참조해 주세요.

@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이)

 

 

3. css와 fonts 폴더에 있는 파일을 모두 서버에 올립니다.

 

   less와 scss도 필요하신 분은 전체를 올립니다.

  

 

4. head 안에 다름 링크를 삽입합니다.

 

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

 

href=" " 안에는 font-awesome.min.css가 있는 경로명입니다.

 

위 링크의 경로는, fontawesome 홈페이지에서 제공하는 기본 링크로, 이 링크 그대로 사용하실 분은

위 경로대로 폴더를 만들어 주어야 합니다.

 

링크 경로를 새로 만들 때 주의하실 점은,  font-awesome.css 파일을 열어 보면 상단에 font path라고 나오는데

 

fonts 폴더 안에 파일의 경로에 알맞도록 조정해주세요.

 

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

 

 

만일 ie7 지원을 위해 fontawesome 3.2.1 버전이 필요하신 분은 아래 링크로 들어가셔서 다운 받으시면 됩니다.

 

http://fontawesome.io/3.2.1/

 

fontawesome 아이콘 넣는 법은 아래 글 확인해 주세요.

 

font awesome 사용법(웹 아이콘 이용하기)

 

 

 

신고
지구별에
티스토리 툭탁툭탁 2015.04.09 10:23

[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

[html] mark 태그

 

 

[html] mark 태그

 

mark 태그는 사용자에게 관계된 텍스트를 강조하고자 할 때 사용합니다.

 

▶브라우저 지원


 

ie9+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

▶mark 요소 사용 예

 

1. 검색 결과에서 찾은 키워드를 두드러지게 표시하여 사용자가 원하는 것을 쉽게

 

   찾을 수 있도록 함.

 

2. 인용할 때 특정 텍스트를 강조하게 위해

 

 

strong, em,  mark 태그 차이

 

텍스트를 강조하는 의미에서 세 가지가 쓰일 수 있는데, 각기 용도가 다릅니다

 

em.  강세를 둔 강조. emphasized text 약자로  이탤릭체로 표시함.


강조의 위치는 문장의 의미를 바꿈

 

<p><em>Cats</em> are cute animals.</p>   '고양이'에 강조

<p>Cats are <em>cute</em> animals.</p>   '귀여움'에 강조

 


strong. 강조된 중요성. 제목, 문단 등에 사용하여 다른 것과 구분짓는 용도이며 굵은 글씨체로 표시함.

 

문장의 의미를 바꾸지 않음.

 

 

mark 참조 목적으로 강조된 문서의 텍스트. 인용문 일부에 주의를 끌기 위해


<blockquote>
<mark>mark</mark> 요소는 인용문의 특정 부분에 주의를 끌기 위해 사용될 수 있다.
</blockquote> 

 

em 태그는 css에서 font-style: italic; 과 같은 효과

 

strong 태그는 css에서는 font-weight: bold;과 같은 효과임.

 

▶html 작성 예

 

 

<strong>MARK 요소</strong>
<blockquote>
<mark>mark</mark> 요소는 인용문의 특정 부분에 주의를 끌기 위해 사용될 수 있다.
</blockquote>

 


<strong>EM 요소</strong>
<p><em>Cats</em> are cute animals.</p>   
<p>Cats are <em>cute</em> animals.</p>

 

 

 

▶css

blockquote{border-left:10px solid #D5D5D5; padding:5px;}
mark{background-color:yellow;}
em{color:red;}
strong{color:#6B9900;font-size:20px;}

 

 

▶실행화면

 

 

 

mark.html파일 다운받아 실행해 보세요~

 

 

  참조 : http://www.w3.org/html/wg/drafts/html/master/#the-mark-element

 

[html 기초] b, strong, em, i, cite, small 태그

 

[html] pre, code 태그 차이

 

 

신고
지구별에
html 2015.03.03 17:13

[html] abbr 태그

 

 

[html] abbr 태그

 

abbr 태그는 두문자어(acronym)와, 약어(abbreviation )에 사용하는 요소로, 브라우저나 검색엔진에

 

유용한 정보를 줍니다.


넷스케이프가 abbr 요소를 만들고, 마이크로소프트가 acronym을 만들어

 

두 요소 다 html4까지 사용하고 있었지만, 두 정의가 혼동스럽고 브라우저 지원도

 

저마다 달라, html5부터 acronym은 퇴화 요소로 규정합니다.

 

html5부터는 두문자어와, 약어에 모두 abbr 태그를 사용합니다.

 

참고

 

acronym: 단어의 머리글자를 딴 말. NATO는 North Atlantic Treaty Organization의 두문자어임

              '나토'라고 읽음.

 

abbreviation: 쉽게 알아들을 수 있도록 줄인 말. BBC는 British Broadcasting Corporation의 축약어.

                  '비비씨'로 읽음(각 철자를 분리해서 발음함.)

 

*abbr 요소는 인라인 요소

 

 

 

▶사용 예:

 

<abbr title="HyperText Markup Language">HTML</abbr>

 

<abbr title="Incorporated">Inc.</abbr>

 

▶실행 화면

 

HTML
Inc.

 

 

주로 title 속성과 함께 사용하는데, title은 abbr에 대한 설명 문구입니다.

 

abbr 태그를 사용하면 firefox, opera에선 기본값으로 점선 밑줄로 표시되며,


 

ie8, safari, chrome은 스타일에 변화가 없습니다..

 

모든 브라우저에서 일관적으로 표시하도록 아래처럼 스타일링을 해주는 것이 좋습니다.

 

abbr {border-bottom: 1px dotted black;}

 

▶실행 화면

 

HTML
Inc.

 

 

 

 

▶브라우저 지원:

 

ie7+, chrome 2.0+, firefox 1.0(1.7)+, opera 1.3+, safari

 

참조 사이트:

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr 

 

http://html5doctor.com/the-abbr-element/

 

  

HTML5 퇴화 요소(deprecated, obsolete 차이)

 

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

 

HTML5 기본 레이아웃

 

신고
지구별에
html 2015.03.02 15:42

HTML5 퇴화 요소(deprecated, obsolete 차이)

 

 

HTML5 퇴화 요소(deprecated, obsolete 차이)

 

예전에 table에서 퇴화 속성에 대해 적은 적이 있는데, 어떤 분이 퇴화 속성인데 왜

 

여전히 정상적으로 작동하는지 질문하신 분이 계셨습니다.

 

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리

 

 

저도 궁금하던 차였는데, 마침 글을 읽다가  deprecated, obsolete 차이에 대해 나온 글이 있어서

 

정리해 보았어요.

 

더불어 html5에서 퇴화로 규정된 태그를 살펴볼까 합니다.

 

우선 용어 정의부터....

 

제 블로그엔 '퇴화 요소' '퇴화 속성'이란 단어가 많이 등장하는데

 

deprecated와 obsolete를 저는 통일해서 '퇴화'라고 설명해 놓았습니다.

 

하지만 두 단어엔 차이가 있습니다.

 

 

deprecated

 

사전적 정의: computers. to mark as obsolete to warn against its use in the future so that it may be phased out.

 

W3C의 정의: 사용되지 말하여 하며, 여전히 지원을 계속하고 있지만, 미래 버전에서 곧 사라질 수 있음.

 

obsolete 
 

사전적 정의: no longer in use/ outmoded in design, style, or construction

 

W3C의 정의: 지원에 대한 보증이 없음. 퇴화 요소는 더 이상 명세에도 규정되지 않음.

 

 

 

요약해서 말하자면, obsolete는 이미 퇴화된 것이며,

 

deprecated는 현재 브라우저에서 지원을 계속하고 있지만, 곧 퇴화될 것임을 의미합니다.

 

어찌되었든, 두 단어로 규정된 태그, 속성들은 사용하지 않는 것이 좋습니다.

 

 

 

 

 

HTML5에서 퇴화 요소

 

font 태그

 

대신에 font 속성을 사용하세요.

 

글꼴을 지정하는 font 속성 배우기

 


center 태그

 

대신에 text-align:center

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 


dir, menu 태그

 

대신에 ul 태그

 

목록을 만드는 ul 태그


 
s, strike 태그 

 

대신에 text-decoration: line-through

 

text-decoration 속성(none, underline, overline, line-through)


u 태그

 

대신에  text-decoration: underline;


 

applet 태그

 

대신에 object이나 embed 태그

 

object 태그 정리

 

embed 태그

 


bgsound 태그

 

대신에 audio 태그

 

audio 태그로 음악 파일 삽입하기

 


frame, frameset, noframes 태그

 

대신에 iframe을 사용하거나 css

 

iframe 태그 사용법

 


isindex 태그

 

대신에 form 태그

 

form 태그(html 양식 만들기)

 


acronym 태그

 

대신에 abbr 를 사용하세요~

 

[html] abbr 태그

 

 

 

[참조 사이트]

 

http://www.w3.org/TR/html401/conform.html#deprecated

 

http://www.codehelp.co.uk/html/deprecated.html

 

http://www.thefreedictionary.com

신고
지구별에
html 2015.02.27 16:47

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

[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

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

 

 

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

 

 

오늘은 메타 태그 중 아래 코드에 대해 알아보겠습니다.

 

<meta http-equiv="x-ua-compatible" content="IE=edge" >

 

 

content="IE=edge"는 IE브라우저에서, 각 버전 중 가장 최신 표준 모드를 선택하는 문서 모드입니다.(IE6부터 IE11까지)

 

문서 유형 (document type) 선언과 함께 사용해야 유효합니다.

 

<!DOCTYPE html> /*가장 최신의 웹표준을 지원하는 HTML5 DOCTYPE을 추천함 */

 

 

DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

 

 

IE11에서는,  문서 모드가 곧 퇴화될 것이며 앞으로 사용되지 말아야할 것으로 규정합니다.

 

현재로서, IE11는 edge mode가 추천하는 문서 모드입니다.

 

참조: Document modes are deprecated

 

사용 예

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
..
..

 

 

 

 

그런데, 문서 모드란 무엇일까요?

 

 

문서 호환성 모드(document compatibility modes) 이해하기

 

IE 구버전은 IE가 웹페이지를 번역하고 표시하는 방법을 선택할 수 있도록 했습니다.

 

Quirks mode비표준 모드가 기본값이며, 구버전의 브라우저로 보는 것처럼 페이지를 표시하고,

 

Standards mode표준 모드(또는 strict mode엄격 모드)는 업계의 표준을 지원하도록 표시합니다.

 

이때 역시 문서 유형 선언(예: <!DOCTYPE>)을 있어야 하는데, 문서 유형 선언을 하지 않으면 quirks mode 로 표시함

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

IE7까지 두 가지 호환 모드만을 지원했기에, IE6 표준에 따라 설계된 페이지는 IE7 표준에 따라 설계된 페이지를

 

의도대로 표시할 수 없었습니다.

 

 

IE8은 새로 생긴 표준에서 여러 특질들을 추가 지원했는데, 일부 특징들이 앞서 발행된 표준과 달랐기 대문에,

 

웹 개발자가 어느 표준인지 선택하도록 하는, 문서 호환성 document compatibility 개념을 도입했습니다.

 



즉 meta요소를 사용하여, 웹페이지에 X-UA-Compatible header를 추가해


IE 버전을 지정하도록 한 것입니다.

 

<meta http-equiv="X-UA-Compatible" content=" ">

 

IE9 역시 새로 생긴 표준을 위한 추가적 지원을 도입했는데(HTML5, CSS3, SVG같은)


표준들이 여전히 개발중이었기에, 일부 행동들은 다양한 표준의 초기버전과 달랐습니다.

 

IE10은 추가적인 표준 지원을 추가하고, 또한 HTML5 명세에서 지정된 변화에 부합하기 위해

 

quirks mode를 업데이트합니다. 

 

이것은 quriks mode가 지금 표준 모드와 비슷한 특징들에 접근했다는 것을 의미합니다.

 

사이트가 IE에서 올바로 표시되지 않는다면, 가장 최신 웹 표준 지원을 위해 사이트를 업데이터하거나,(권장)


IE를  이전 버전의 브라우저에서 보는 것처럼 내용을 표시하도록 할 수 있습니다.

 

 

 

IE 문서 모드 종류

 

 

웹페이지가 IE 각 버전에 맞게 표준 모드로 제한함.
(IE를 그 버전에 지원된 특징들에 제한하도록 함)

 

    <meta http-equiv="x-ua-compatible" content="IE=9" > /*IE9 표준 모드*/
    <meta http-equiv="x-ua-compatible" content="IE=8" > /*IE8 표준 모드*/
    <meta http-equiv="x-ua-compatible" content="IE=7" > /*IE7 표준 모드*/

 

 

지정한 버전에 맞는 표준 모드로 표시하거나, Quriks mode로 표시함

다른 문서 유형DOCTYPE 값을 사용하는 웹페이지 모음을 가지고 있을 경우 유용함.
 

    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >

 

 

edge mode, IE 버전 중 가장 최신 모드로 표시

 

<meta http-equiv="x-ua-compatible" content="IE=edge" >

 

 

※ 항상 DOCTYPE과 함께 사용함
※ 맨 위에서 언급한 것처럼 IE 문서 모드는 곧 퇴화될 예정이며, 현재는 edge mode를 추천함.

 

참조:

 

Specifying legacy document modes

 

Understanding the need for document compatibility modes

 

 

 

신고
지구별에
html 2015.01.16 08:30

[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

[html5] main 태그

 

 

[html5] main 태그



main 요소는 문서의 주요한 내용을 담는 태그입니다.

 

<div id="main">과 같은 역할

 

문서에서 main은 하나 이상 있어선 안 되며, 페이지 당 한 번 사용할 수 있습니다.

 

사이드바, 네비게이션 링크, 저작권 정보에 있던 내용을 main에서 반복해서 사용할 수 없습니다.

 
또한 main은 article , aside, footer, header, nav의 자손이어선 안 됩니다.


main 요소가 문서 영역을 구분짓는 용도로 사용하진 않기 때문.  
 


▶브라우저 지원


ie 지원하지 않음, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

main 요소를 ie에서 지원할 때까지 "main" ARIA role 추가하는 것도 좋습니다.

 

<main role="main"> 내용</main>

 

 

*ARIA role이란?

ARIA(WAI-ARIA)는 HTML 요소에 추가할 수 있는 속성 집합임.

 

ARIA role을 실행을 하지만 아직 원래 요소의 역할을 구현하지 않은 브라우저 지원하기 위해 사용.


<main role="main"> 은  기술적으로 군더더기지만 일부 사용자를 돕고, 아무도 해치지 않음.
 
role의 또 다른 사용 예.

<a href="#" role="button" aria-label="Delete item 1">삭제</a>

 

위에서 a 태그를 사용해 링크로 사용하고 있지만 기능은 링크보다 버튼에 더 가까움. 

 

스크린리더는 이것을 버튼으로 듣게 됨.


위의 role="botton"은 속성 선택자로 사용할 수도 있음.

 
*[role="button"] {  /* 버튼 스타일 지정 */}

 

 

더 궁금하신 분은 아래 링크를 참조해 주시고

 

나중에 ARIA role에 대해 추가적인 글을 써 보도록 하겠습니다~

 

[참조]
http://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html
http://w3c.github.io/aria-in-html/


 

 

 

HTML5 기본 레이아웃

 

[html5] header 태그

 

 [html5] nav 태그

 

[html5] article vs section 차이

 

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

신고
지구별에
html 2015.01.14 09:56

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

 

 

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

 

 

얼마 전에 meta 태그 사용법이란 글을 썼는데 

 

[html] meta 태그 사용법

 

위 글에서 다루지 못한(빠진) 것들을 다루어 보려고 해요.

 

힌트를 주신 admin 님께 감사합니다.^^

 

오늘 다룰 부분은 meta viewport(메타 뷰포트 태그) 입니다.

 

웹페이지 소스를 보면 간혹 head 에 이런 meta 구문을 보신 적이 있으실 거예요.

 

<meta name="viewport" content="width=device-width">

 

 

meta viewport 태그는 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의

 

뷰포트(viewport) 크기 조절을 위해 만들었습니다. (뷰포트에 대한 설명은 본문 참조)

 

meta viewport 태그는 W3C 명세에는 없지만,(따라서 표준이 아님)

 

iOS 장치(아이폰 운영체제 브라우저 safari)가 널리 사용됨에 따라 사실상 표준처럼

 

사용되고 있고, 다른 브라우저들(Opera, Android,  Mobile firefox(Fennec) 등)도 이 태그를 채택하게 됩니다.

 

 

그런데, IE10(snap mode) 은 뷰포트 크기 조절을 위해 meta viewport 태그 대신에  표준으로 제안된

 

@viewport rule을 사용합니다.

 

@viewport는 W3C에 제안된 표준이고, Opera Mobile 11에서도 지원합니다.

 

그럼에도 여전히 viewport meta 설정을 고수하는 브라우저들이 있습니다.

 

따라서 아이폰과 IE10 브라우저 양쪽을 타켓으로 웹페이지를 설계하려면  현재는 두 가지 방식으로

 

viewport 크기 조절 하는 것이 필요합니다.   

 

 

 예

<head>
<meta name='viewport' content='width=device-width' /> 
<style type='text/css'>
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</style>
</head>

 

 

이 페이지에서는 viewport란 무엇인고, 왜 필요한지 알아보고,  meta viewport 태그 사용법을 다루겠습니다.

 

css @viewport rule은 다음 시간에 다루어 볼게요

 

 

viewort란?

 

viewport란 우리말로 보임창, 즉 화면 상의 화상 표시 영역을 뜻합니다.

 

데스크탑(pc)의 뷰포트와 모바일 뷰포트는 약간 다릅니다.

 

 

- 데스크탑(pc)의 뷰포트는 웹브라우저 창(visible area)의 뷰포트와 같음.

 

   사용자가 브라우저 창의 크기를 조절하면서 뷰포트 크기를 조절할 수 있음.

 

   웹페이지가 뷰포트보다 작으면, 스크롤로 나머지를 볼 수 있음.

 

이미지 출처: 애플

 

- 모바일 뷰포트는 웹브라우저 창(visible area)보다 크거나 작을 수 있음.


   그리고 창, 스크롤바, 크기조절 버튼이 없음. 


   대신, 상하좌우로 움직이거나, 더블탭이나, 확대 축소(zoom in/out)를 통해 뷰포트 배율을 바꿀 수 있음.(크기가 아니라)

  

 

뷰포트 980px



이미지 출처: 애플

 

 

viewport 크기 조절이 필요한 이유?

 

 

데스크탑에 기반하여 설계된 웹페이지를 모바일에서 보면 기본 뷰포트가 980px이기 때문에


내용이 작게 보입니다. (위 이미지'뷰포트 980' 참조)


뷰포트 설정을 하게되면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있습니다.


모바일 장치에 최적화된 웹페이지를 만들려면 html 문서 head에 뷰포트 설정을 포함해야 합니다.  



뷰포트 너비 320로 설정한 화면


 

 

 

meta viewport 태그 사용법 (간단 설명)

 

간단 설명과 긴 설명으로 구분했어요. 필요하신 부분을 골라서 보세요

 

1. viewport 너비 설정

 

<meta name="viewport" content="width=500">

 

너비는 px 단위이며 meta 태그에서는 단위 생략함 

 

content에 여러 속성값을 쓸 경우 쉼표로 분리함.

 


 

2. 너비를 장치너비로 설정(추천)

 

<meta name="viewport" content="width=device-width">

 

브라우저 너비를 장치 너비에 맞추어 표시함.

 

 

3. 너비를 장치높이로 설정

 

<meta name="viewport" content="height=device-height">

 

 

4. 초기 화면 배율(initial-scale) 설정(zoom 레벨 설정)

 

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

 

1.0은 100%와 같음. initial-scale은 긴 설명 참조


 

5. 최소 최대 화면 배율 설정(minimum and maximum scale)


<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">


최소 설정은 사용자가 너무 극닥적으로 화면 축소하는 것을 방지함 

 

(위 예에서는 초기값과 최소 화면 배율 설정을 같이 함)

 
 

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">

 

최대 화면 배율 설정은 극단적으로 화면 확대하는 것을 방지함.


(위 예는 최소와 최대 배율을 같이 사용한 예)

 

(minimum-scale, maximum-scale값은 긴 설명 참조)

 

 

6. 사용자가 크기 조절하기를 원치 않을 때


<meta name = "viewport" content = "user-scalable=no, width=device-width">

 

 

 

meta viewport 태그 사용법 (긴 설명)

 

(Safari Developer Library 사이트를 번역 정리한 것입니다)

 

1. viewport

 

iOS(아이폰 운영체제)에서 페이지를 표시할 때 사용하며,  창 크기를 바꿈

 

▷구문


<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">

 

▷설명

 

보통 viewport meta 태그는, 뷰포트의 너비와 초기 배율(zoom 레벨)을 설정하기 위해 사용.

 

예> 웹 페이지가 980px보다 폭이 좁으면, 뷰포트의 너비를 내용에 알맞도록 설정해야 함.


iOS에 기반한 웹을 디자인하려면, width를 device width로 설정해야 함.

 

하기 표 1은, viewport meta key와 그들의 기본값에 의해 지원되는 속성을 서술함. 


여러 개의 속성을 쓰려면  쉼표로 구분된 목록을 사용 함.

 

여러 개의 속성을 설정할 때 다음 규칙을 따른다.


-  세미콜론(;)을 구분 문자로 사용하지 말 것
- 공백은 구분 문자로 작동할 수 있지만, 쉼표를 추천함.
- 숫자 속성으로, 값이 숫자가 아닌 문자를 포함하지만 숫자로 시작되면, 숫자 접두어는 속성값으로 사용된다.

 

예> 1.0x는 1.0과 같음. 123x456은 123과 같음. 매개변수가 숫자로 시작하지 않으면 값은 0임.

 

장치의 치수(dimension)을 참조할 때, 숫자 값 대신2에 사용된 항수를 사용해야 함
 
예> width 320 대신 device-width, height 480 대신 device-height 사용(세로 화면에서)

 

모든 viewport 속성을 일일이 설정할 필요 없음.


일부 값이 설정되기 만하면 iOS 사파리는 다른 값을 추론한다.


예> scale 1.0으로 설정하면 사파리는 뷰포트 너비를  세로화면에서 device-width로 가정하고,


가로 화면에서 device-height 로 가정함.


width 980px과 initial scale 1.0으로 원하면, 둘을 모두 설정해야 한다.


예> width를 device-width로 설정하기


<meta name = "viewport" content = "width = device-width">

 

초기 화면 배율 1.0으로 설정하기


<meta name = "viewport" content = "initial-scale = 1.0">

 

초기 화면 배율 설정하고 크기 조절을 사용하지 않게 하기 


<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

 

표 1

속성값 설명
width 뷰포트의 너비(px).
기본값 : 980
범위 : 200~10,000 px
속성값은 표2처럼 항수(예:device-width)
로 설정할 수도 있음.
----------------------------------
height 뷰포트의 높이(px)
기본값 : width 속성값과 장치 영상의 가로 세로 비에  기초하여 계산됨.
범위 : 223~10,000 px
속성값은 표2처럼 항수로 설정할 수도 있음.
----------------------------------
initial-scale 뷰포트의 초기 배율(곱하는 수)
기본값 : 보이는 영역에서 웹페이지에 맞추기 위해 계산됨
범위 : minimum-scale과 maximum-scale 속성값으로 결정됨
----------------------------------
minimum-scale 뷰포트의 최소 배율값
기본값 : 0.25
범위 : 0~ 10.0
----------------------------------
maximum-scale 뷰포트의 최대 배율값
기본값 : 5.0
범위 :  0~ 10.0
----------------------------------
user-scalable

사용자가 화면을 축소/확대(zoom in/out))

할 수 있는지 여부를 결정
(사용자가 뷰포트의 배율을 변경할 수 있든 아니든)
yes는 크기 조절을 가능하게 설정(기본값)
no는 크기 조절이 불가능하게 설정
no로 설정하면 웹페이지가 input 영역에서 텍스트를 입력할 때 스크롤되는 것도 방지한다.

 

표 2

속성값 설명
device-width 장치 너비(px)
device-height 장치 높이(px)

*meta 태그에서 px은 생략함
 

2. apple-mobile-web-app-capable


웹응용프로그램을 전체 화면에서 작동시킬지를 설정 

 

▷구문

 

<meta name="apple-mobile-web-app-capable" content="yes">

 

▷설명


content가 yes면, 전체화면 모드로 작동함. no면 작동하지 않음.


기본값은 Safari가 웹 내용을 표시하도록 사용하는 것.

 

웹페이지가 window.navigator.standalone (읽기 전용 Boolean 자바스크립트 속성)을 사용하여

전체 화면 모드로 표시할지 결정할 수 있음.

 

3. apple-mobile-web-app-status-bar-style

 

웹 응용프로그램을 위한 상태 막대의 스타일 설정

 

▷구문


<meta name="apple-mobile-web-app-status-bar-style" content="black">

 

▷설명


apple-mobile-web-app-capable에 서술한 것처럼 전체화면 모드를 먼저


지정하지 않으면 효과가 없음.

 

content가 default이면, 상태 막대는 보통으로 나타남.(기본값)


black으로 설정하면, 상태 막대는 검은색 배경임.


black-translucent 이면 상태바 막대는 검정과 반투명


*default 또는 black으로 설정하면  웹 내용은 상태 막대 아래 표시됨.

 

*black-translucent로 설정하면, 웹 내용이 전체 화면에 표시됨,

 일부는 상태 막대로 인해  흐릿해짐.


4.  format-detection


iOS safari 웹페이지에서 가능한 전화번호의 자동 탐색이 가능하거나 불가능하게 설정


▷구문


<meta name="format-detection" content="telephone=no">

 

▷설명


기본적으로 iOS safari는 전화번호처럼 형식화된 어느 문자열이든 감지하여


전화로 호출하는 링크를 만듦.


telephone=no 라고 지정하면 이 특정을 불가능하게 함.

 

 

 

<같이 참조하면 좋은 글>

 

▣ http://www.quirksmode.org/mobile/metaviewport/  에서 ideal viewport 를 보면, 모바일 브라우저별

 

이상적인 뷰포트가 나옵니다.

 

 https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW8

 

 http://benfrain.com/understanding-the-viewport-meta-tag-and-css-viewport/


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


신고

'html' 카테고리의 다른 글

IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge")  (0) 2015.01.16
[html5] main 태그  (0) 2015.01.14
meta viewport (메타 뷰포트 태그) 사용법  (10) 2015.01.09
[html5] footer 태그  (0) 2015.01.07
[html5] aside 태그  (2) 2015.01.06
[html5] nav 태그  (4) 2015.01.05
지구별에
html 2015.01.09 17:36

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

 

 

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

 

크리스마스는 잘 보내셨나요?

 

저는 25일에 광명 이케아 갔다가 엄청 고생하고 왔습니다 ㅎㅎ

 

생각보다 가는 대중 교통 편이 너무 복잡하더라구요.

 

결국 택시 타고 갔는데, 입구에서 30~40분을 기다리고, 레스토랑에서 20분 정도 기다리고

 

나오면서 길 못찾아 헤매고, 건물 안은 사람들이 미어 터집니다.

 

그럼에도 가볼만은 했다고 생각은 하지만.... 다음엔 사람 없을 때 가고 싶네요.

 

며칠 남지 않은 12월, 사람들 많은 데 가서 고생하지 마시고, 조용하고 한적한 곳에서

 

지난 일을 관조하는 것도 좋을 것 같습니다.

 

오늘은 연말 결산으로, 지금까지 써온 글 중에 사이트(티스토리, 블로그, 까페 포함) 운영자라면 알아두어야

 

할 html, css 상식을 다루어 볼까 해요.

 

그러니까 이 글은 티스토리 운영자를 포함하여 직접 HTML, CSS를 손대고 싶지만

 

두려움을 갖고 있는 사람들을 위한 기초적인 내용을 묶은 글과

 

HTML, CSS를 보다 깊게 공부하는 분들이 알아야할 필독 글이 포함돼 있습니다.

 

 

 

이건 정말 알아야 해!

 

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

 

html, css, javascript 주석 처리 방법

 

여기까지는 어렵지도 않고, 처음 접하는 분들은 흥미로운 내용일 거라 생각합니다.

 

특히 html, css를 직접 손볼 때 주석조차 모르시는 분들도 간혹 계시더라구요.

 

 

그 다음으로 아래 링크는 태그 작성이나 편집을 하시는 분들이라면 필요한 내용이지만

 

조금 어려울 수 있습니다. 하지만 한 번씩 읽어두시면, 읽지 않으신 것보다 사이트 운영이

 


 

한결 수월해지리라 생각합니다.

 

또 원하는대로 스타일이 적용되지 않을 때 그 이유를 알 수 있습니다.

 

 

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

 

css 선택자, 선택자 종류와 사용법

 

CSS 선택자 요약표

 

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

 

css 길이 단위

 

스타일 적용 우선 순위와 속성 강제 적용 !important

 

티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유

 

 

 

 

html과 css를 공부하는 사람이라면 알아두어야 해!

 

아래 글은 html과 css를 본격적으로 공부하는 사람들이 필요한 내용입니다.

 

굳이 깊게 공부할 필요가 없는 부분은 지나쳐도 됩니다~

 

 

브라우저 기본값의 초기화 리셋(reset.css)의 개념

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

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

 

박스 모델 이해하기

 

haslayout 이란 (IE버그 해결책)

 

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

 

  

 

레아이웃 관련

 

span, div 태그 차이

 

DIV 태그를 이용하여 레이아웃 만들기

 

float 속성에 대하여

 

clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

float를 취소하기 (clearfix 4가지 방법)

 

position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

 

정렬하기

 

table 중앙 정렬하기

 

div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬)

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

수직으로 가운데 정렬 방법 (다섯 가지)

 

 

 

글꼴 관련

 

글꼴을 지정하는 font 속성 배우기

 

font-style 속성 (normal, italic, oblique 차이)

 

font-weight 속성 (bold, 100~900, bolder, lighter)

 

font-variant 속성(normal, small-caps)

 

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

 

글꼴을 지정하는 font-family 속성(serif, sans-serif차이)

 

글자색 color 속성, 배경색 background-color 속성 배우기

 

@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이)

 

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

 

나눔고딕 웹폰트 적용, 제대로 배우기

 

 

 
IE6~8에 대응하기

 

반응형 스킨을 사용하고 있거나, HTML5버전과 CSS3의 각종 효과를 바라는 분들에게

 

필요한 내용입니다.

 

HTML5 요소와 CSS3 선택자나 속성들은 IE9 이하에서 지원이 되지 않는 경우가 많습니다.

 

하지만 우리나라에서는 아직도 IE 7, 8 이용자가 많기 때문에 그에 대응하는 방법을 알아 보아요~

 

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

 

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

 

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

신고
지구별에
티스토리 툭탁툭탁 2014.12.26 17:33
Powerd by Tistory, designed by criuce