고무나무 키우기

 

 

고무나무 키우기, 물주기, 분갈이하는 법

 

안녕하세요. 오랜만에 식물에 관해 글을 쓰네요

 

지난주에 화원에 가서 고무나무, 떡갈 고무나무, 스파티 필름을 데려왔어요.

 

아기 낳고 한 몇 년간은 키우던 화초들이 베란다에서 말라가는 것만 보다가,

 

이제서야 마음에 여유가 살짝 생겨 화원에 들렀습니다.

 

모두 작은 포트로 된 것들이여서 마사토와 배양토도 사와서 분갈이도 했어요.

 

이 세 가지 식물은 모두 처음 키워보는 식물인데 그래서 최적의 환경을 찾아주기 위해 공부도 하고

 

매일 매일 상태를 살피고 있어요.

 

오늘은 고무나무에 대해서 정리를 해 보려고 합니다.

 

고무나무 키우기

 

고무나무는 원래 열대우림지역, 그늘에서 자라는 식물이라고 합니다.

 

 

이 식물은 적절한 빛과, 적절한 그늘이 모두 필요한 식물인데요

 

직사광선보다는 간접적인 햇빛, 그리고 조금 습하고 16~24°C 정도의 따뜻한 환경에서 

 

잘 자란답니다. 제 경험에 비추어 보면 화초는 적절한 햇볕을 받아야 본연의 색깔이 나타나고

 

건강하더라고요. 그래서 직사광선에 내놓기도 했는데, 고무나무 같은 경우는 잎이 자라는 시기에

 

그늘에 둘 때 잎이 더 커진다고 하더라고요. 

 

하지만 적절한 빛도 필요하니, 얇은 천이 드리워진 은은한 빛이 들어오는 장소가 가장 최적의 장소일

 

것 같습니다. 물론 통풍도 중요하고요.

 

 

고무나무 물주기

 

습한 것을 좋아하는 식물이라고 하더라도 물을 자주 주면 과습으로 뿌리가 썩습니다.

 

그러므로 항상 식물 자체의 상태를 확인해서 물을 주세요.

 

보통은 여름에는 주 1~2회, 물이 잘 마르지 않는 겨울철에는 한 달에 1~2회 정도입니다.

 

하지만 각자 키우는 환경이 모두 다르니, 화분에 손가락을 2~3cm 넣어 흙이 말랐으면 주는 것이 제일 좋습니다.

 

물을 줄 때는 미지근한 물을 주고요, 화분 밑바닥으로 물이 흘러나올 때까지 충분히 줍니다.

 

성장기에는 흙을 촉촉하게 유지해주고, 충분히 물을 주는 반면, 가뭄기에는(겨울철) 흙을 마르게 유지합니다.

 

(하지만 너무 마르지않게) 

 

고무나무는 잎이 큰 식물이니 만큼, 잎이 숨을 잘 쉴 수 있도록 부드러운 천으로 자주 닦아 주세요

  

공기가 건조한 곳에서는 하루에 한 번 정도 분문해주는데, 이 또한 미지근한 물로 해줍니다.

 

 

봄이나 초여름에는 2주에 한번씩. 성장기에만 비료를 주어라. 

 

 

 

고무나무 분갈이

 

처음 2~3년 동안, 일년에 한 번 분갈이 해주며, 그 이후에는 3년에 한번이나 뿌리가 화분에 꽉 찰 때

 

하면 됩니다. 

 

화분은 고무나무 키가 120cm 정도 자랄 수 있을 만큼 충분한 크기로 선택하고요. 

 

(혹은 기존보다 2.5cm 정도 큰 것)

 

배수가 잘 되도록 바닥에 배수구멍이 있어야 합니다. 

 

바닥에 2.5cm 정도 마사토를 깔아주시고, 그 위에 흙을 뿌려주고, 화초를 중앙에

 

둔 다음 마사토와 배양토를 3: 7 또는 4:6 비율로 섞은 흙을 골고루 화분에 채워줍니다.

 

화분 위 2~3cm 정도는 흙을 채우지 않습니다. 그러지 않으면 물 줄 때 흙이 흘러 넘치거든요..

 

분갈이에 관한 자세한 사항은 아래 글도 참조해주세요~

 

마리안느, 테이블야자 분갈이하는 법

 

[참조 사이트]

 

https://blog.gardeningknowhow.com/top-10-qa/top-10-questions-about-rubber-tree-plants/

https://www.wikihow.com/Grow-a-Rubber-Tree

https://www.epicgardening.com/rubber-tree-plant/

https://plantcaretoday.com/rubber-tree-plant-care.html

 

 

지구별에
카테고리 없음 2019. 10. 30. 11:08

댓글을 달아 주세요

W3C 미디어 쿼리 level 4(Candidate Recommendation), 번역해 보다

 

 

W3C 미디어 쿼리, 번역해 보다

 

 

제가 블로그 공백이 너무 길다 보니 처음 글로 무엇을 쓸까 참 많이도 헤멨는데....

 

그러다가 반응형 웹 기술에 필요한 '미디어 쿼리'가 가장 적절하고 필요한 글이란 생각이 들었답니다

 

예전에 미디어 쿼리 관련 글([css] 미디어 쿼리, @media query 이해하기)을 쓴 적도 있지만, 보완해야 할 점이 많이 보이더라고요.  

 

그런데 이 자료 저 자료를 모으다 보니 시간이 생각 외로 너무 많이 걸려서요... --;

 

그래서 마음에 부담을 줄일 겸, W3C에서 작성한 미디어 쿼리 글을  번역해 보려고 합니다.

 

(원문을 통째로 번역한 것은 아니며, 제가 자의적으로 제외시킨 부분도 있음)

 

이 문서는 권고안이 되기 전 권고안 후보(Candidate Recommendation)이며, 이 문서를 인용하는 것은 부적절하다고

 

아래 글에 나옴을 밝혀둡니다.

 

일단 오늘 한 것만 번역해 올리고, 시간 날 때마다 추가로 보태어 보겠습니당

 

 

이 글은 아래 사이트를 토대로 번역했습니다~

 

https://www.w3.org/TR/2017/CR-mediaqueries-4-20170905/

 

 

미디어 쿼리 개요

 

미디어 쿼리는  웹저작자가 브라우저 또는 화면 장치의 값과 특질들을 검사하고 질문할 수 있도록 한다. 


미디어 쿼리는 문서에 조건적으로 스타일을 적용하기 위해서 css @media rule에서 사용되며


HTML과 javascript 같은 다양한 문맥과 언어에서 사용된다.

미디어 쿼리 level 4는 미디어 쿼리, 미디어 종류(media type), 미디어 특질들(media feature) 의 구문과

 

메커니즘을 기술한다. 


미디어 쿼리 level 3에서 규정된 특질들을 확장하고 대체한다.

 

 

이 문서의 상태

이 부분은 이 문서 발행 시기의 상태를 기술한다.


다른 문서가 이 문서를 대체할 수 있다.


현재 W3C 발행 목록과 이 기술적 보고서의 가장 최신 개정안은 https://www.w3.org/TR/ 에서 확인할 수 있다.

이 문서는 CSS Working Group에 의해 Candidate Recommendation(이하 CR로 통일, 권고안 후보)로 제작되었다.


이 문서는 W3C 권고안이 되기 위해 제작되었다. 


이 문서는 적어도 2018. 3. 5일까지 권고안 후보로 남아있을 것이다. 폭 넓은 검토를 위한 기회를 보장하기 위해.

CR 출판이 W3C 멤버쉽에 의한 보증을 암시하지 않는다. 

이것은 초안이고 어느 때라도 업데이트, 대체 또는 다른 문서에 의해 퇴화될 수 있다.


이 문서는 진행 중인 작업이기 때문에 이 문서를 인용하는 것은 부적절하다. 

마지막 초안 이후 수정사항은 수정 기록 부분을 보라. 


https://www.w3.org/TR/2017/CR-mediaqueries-4-20170905/#changes

 


다음 특질들은 위험상태(at risk)이며, CR 기간 동안 낙오될 수 있다. 

'hover', 'any-hover', 'pointer', 'any-pointer' media features


"at-risk"는 W3C 과정의 용어이며, 그 특질을 빠뜨리거나, 지체될 위험에 처해 있다는 것을 필연적으로 암시하지는 

 

않는다. 


그것은 WG가 그 특질이 시기 적절하게 상호 정보 운용 시행되는 어려움에 처할 수 있는데,


그래서 만일 필요하면, WG는 그 특질을 빠트릴 수 있음을 이렇게 표시한다.

제안된 표준안 단계로 이동할 때 새로운 CR을 발행할 필요 없이 그 특질을 먼저 제외하고

 

 

미디어 쿼리 소개

 

이 부분은 규범이 아니다(This section is not normative.)

 

HTML4는 각기 다른 미디어 종류를을 위해 마련된, 미디어 의존적인 스타일 시트를 지원하기 위한 메커니즘을 규정했다.


예를 들어 문서는 화면과 프린트 장지를 위한 각기 다른 스타일 시트를 사용할 수 있다.


HTML에서 이렇게 작성 할 수 있다.

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

<link rel="stylesheet" type="text/css" media="print" href="print.css">

 

CSS는 @media와 @import rule를 사용해 이 기능을 채택하고 확장했다. 

 

개별 특질들의 값을 질문하는 기능을 추가하면서 말이다.

 

css 스타일 시트 내부에, 이 부분을 어떤 미디어 종류에 적용하도록 선언할수 있다.  


@media screen { 
  * { font-family: sans-serif } 


비슷하게, 스타일시트는 미디어 쿼리에 기초하여 조건적으로 import될 수 있다 

@import "print-styles.css" print; 

 


미디어쿼리는 HTML, XHTML, XML에서 사용될 수 있고, CSS의  @import와 @media rules과 함께도 사용할 수 있다. 

 


미디어 쿼리


미디어 쿼리는 현재 문서가 표시되고 있는 브라우저(user agent) 또는 장치의 어떤 면을 검사하는 방법이다. 

미디어 쿼리는 (거의) 항상 문서의 내용, 스타일링, 또는 다른 내부적인 면으로부터  독립적이다. 


그들은 오직 외부적인 정보에 의존적이다.  다른 특질이   @viewport rule같은 미디어 쿼리의 해상도에 

 

영향을 끼친다고 명쾌하게 명시하지 않는 한.

미디어 쿼리 구문은 선택적인 미디어 쿼리 연산자, 선택적인 미디어 종류, 그리고 0 또는 그 이상의 미디어 특질들로 

 

구성된다. 



미디어 쿼리는 진실true이거나 거짓false인 논리적인 표현이다. 

미디어 종류가, 만일 명시되면, 브라우저가 작동하는 장치의 미디어 종류에 일치하면 그리고 미디어 조건이 사실이면, 

미디어 쿼리는 진실이다.
   

html로 작성된 가장 단순한 예

 

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

 

이 예는 "example.css"가 스크린이며 색상 장치일 때 적용함을 표현한다. 

 

 

 

css에서 @impot rule로 작성할 때는 다음과 같다. 

 

@import url(example.css) screen and (color);

 

 

 
미디어 쿼리를 결합하기

몇 가지 미디어 쿼리들이 쉼표로 분리된 미디어 쿼리 목록으로 결합될 수 있다.

 


미디어 쿼리 구성요소가 어느 것이든 진실이면 미디어 쿼리 목록은 진실이다. 


그리고 오직 그것의 구성요소 미디어 쿼리의 전체가 거짓일 때만 거짓이다.

예를 들어, 다음 미디어 쿼리 목록은 진실이다. 만일 미디어 종류가 screen 이고 색상 장치면, 

 

또는 미디어 종류가 projection이고 색상장치이면.

 

@media screen and (color), projection and (color) { … }

 

 

비어 있는 미디어 쿼리 목록은 진실로 평가한다. 예를 들어, 이들은 같다.

@media all { … }
@media { … }

 


미디어 쿼리 수식어

미디어 쿼리는 선택적으로 하나의 미디어 쿼리 수식어가 앞에 올 수 있다.

이것은 다음 미디어 쿼리의 의미를 바꾸는 하나의 키워드이다. 


1. 미디어 쿼리를 부정하기 : not 키워드

개별 미디어 쿼리는 not을 앞에 붙힘으로써 부정하는 결과를 가져올 수 있다.


미디어 쿼리가 정상적으로 ture로 평가한다면, not을 앞에 붙힘으로써, 거짓으로 평가하게 만든다. 거꾸로도 마찬가지.

예를 들어, 다음은 색상 장치가 가능한 화면을 제외한 모든 것에 적용될 것이다.

 

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

전체 미디어 쿼리가 부정된다는 것에 주목하라, 단순히 media type이 아니라.

2. 오래된 브라우저로부터 미디어 쿼리 숨기기 : only 키워드

미디어 쿼리의 개념은 html4에서 기원한다. 명세는 오직 media type만을 규정했지만 media feature 같은 미래 개념

 

의 추가에 상응하는 순방향 호환성 구문을 가지고 있다. 


그것은 첫번째 비 알파벳숫자 문자까지 미디어 쿼리 문자를 소모할 것이다. 

 

그리고 그것을 media type으로 번역할 것이다. 나머지를 무시하면서


예를 들어, 미디어 쿼리  screen and (color) 은 단지 screen로 잘릴 것이다.

불행히도, 이것은 이러한 에러 처리 행동을 사용하는 오래된 브라우저가 미디어 쿼리에 있는 어떠한 media feature

 

라도 무시할 것이라는 의미이다.


심지어 쿼리에서 media type이  훨씬 더 중요하더라도. 

 

이것은 우연치 않게 부적절한 상황에 적용되는 스타일이 나올 수 있다.

오래된 브라우저로부터 이러한 미디어 쿼리를 숨기기 위해, 미디어 쿼리는 키워드 only를 앞에 붙일 수 있다. 

 

only키워드는 미디어 쿼리 결과에 아무런 영향을 미치지 않지만, 알려지지 않는 only 키워드를 명시함으로써

 

미디어 쿼리가 오래된 브라우저에 의해 번역되도록 하고, 결국 나머지를 무시하게 만들 것이다.


이 예문에서, <link>요소에 의해 규정되는 스타일시트는 오래된 브라우저에 의해 사용되지 않을 것이다. 


심지어 정상적으로 'screen' 미디어 타입에 알맞지만 말이다.

 

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

 
주의 :


only 키워드는 오직 미디어 종류 앞에 사용될 수 있다. 

 

미디어 특질들로 구성되는 미디어 쿼리, 또는 다른 not 같이 미디어 쿼리 수식어를 지닌 것은

 
오래된 브라우저에 의해 자동으로 거짓으로 간주될 것이다.

주의: 이 명세를 발행하는 시기에, 이러한 오래된 브라우저는 극히 드물고, 그래서 only 수식어 사용도 드물다. 

 

만일 있다면 불가피하게.

 

 

미디어 종류(Media Types)

미디어 종류는 문서가 표시될 수 있는 사용자(user-agent) 장치의 넓은 범주이다. 


미디어 종류 모음은 원래 HTML4에서 <link> 요소에서 미디어 속성을 위해 규정되었다.

불행히도, 미디어 종류는 장치와 다른 스타일링 필요를 구분하기 위한 방법으로 불충분한 것으로 판명되었다.


원래 뚜렷한 구분이었던 일부 범주는('screen' 과 'handheld' 같은) 그것들의 발명 이래 수년간 상당히 혼합되었다.

'tty' 또는 'tv' 같은 다른 것들은 완전한 기능의 컴퓨터 모니터의 규범과 유용한 차이를 드러낸다.


그래서 다른 스타일링을 목표로 하기 위해 잠재적으로 유용하다. 

 

하지만, 상호 배타적인 미디어 종류의 규정은 합리적인 방법으로 그들을 사용하기 어렵게 만든다. 


대신 그들의 배타적인 면들은 'grid' 또는 'scan'같은 미디어 특질들로 더 낫게 표현된다.

이와 같이, 다음 미디어 종류는 미디어 쿼리에서 사용하도록 규정된다.

all - 모든 장치에 알맞음 


print - 프린터와, 출력된 화면을 복제하기 위해 의도된 장치에 알맞음.

         가령 '인쇄 미리보기' 에서 문서를 보여주는 웹브라우저 같은  


screen - 'print' 또는 'speech'에 일치하지 않는 모든 장치  


speech - 화면낭독기나 페이지를 읽어주는 비슷한 장치

 


게다가, 다음 퇴화된 미디어 종류들을 규정한다. 


웹저작자들은 이들 미디어 종류들을 사용해서는 안된다. 대신, 스타일 저항을 시도하는 장치의 양상을 더 낫게 

 

표현하는 적절한 미디어 특질들을 선택하는 것이 권장된다.

user agent는 다음 미디어 타입을 유효한 것으로 인식한다.  하지만 이것들이 아무것에도 일치하지 않게 만들어야 한다.

 

tty 


tv 


projection 


handheld 


braille 


embossed 

 

 

주의 : 모든 미디어 타입들이 때가 되면 역시 퇴화될 것으로 예상한다.


그들의 중요한 차이를 포착하는 적절한 미디어 특질들이 규정되기 때문에. 


미디어 특질(Media Features)

미디어 특질은 미디어 종류media type보다 더 세분화 된 검사이다. 

사용자(user agent) 또는 화면 장치의 단일하고도 구체적인 특질들을 검사하며..

구문론상으로, 미디어 특질들은 css 속성을 닮았다. 그들은 특질 이름, 콜론, 이것을 검사하는 값으로 구성된다. 


이들 역시 꼭 특질 이름처럼 불 형식으로 쓸 수 있다. 또는 비교 연산자와 함께 범위 형식(range form)으로

*boolean 불 방식의(참과 거짓을 나타내는 숫자 1과 0만을 이용하는 방식)

 



그러나 css 속성과 미디어 특질들 사이에 몇가지 중요한 차이가 있다.

1. 속성들은 문서를 어떻게 표시할지에 대한 정보를 제공하기 위해 사용된다.


미디어 특질들은 출력 장치의 요건을 기술하기 위해 사용된다.

 


2. 미디어 특질들은 세미콜론으로 구분되기보다 항상 괄호로 감싼다 그리고 'and' 또는 'or' 키워드로 결합된다. 


예 :  '(color) and (min-width: 600px)'  

 


3. 미디어 특질들은 불린 문맥에서 특질들을 평가하기 위해 오직 그것의 이름(콜론과 특질 값을 생략하며)만

 

주어질 수 있다.


이것은 0 또는 'none'을 대표하는 합리적인 값을 가지는 특질들을 위한 편리한 축약이다. 


예를 들어 '(color)'는 'color' 미디어 특질들이 0이 아니면 진실이다.

 


4. 범위'range' 유형을 지닌 미디어 특질들은 범위 문맥에서 쓰여질 수 있다. (추가 설명이 필요합니다...)

 

이것은 콜론보다 표준의 수학적 비교 연산자를 사용한다.  또는 'min-' 또는 'max-' 접두어를 지닌 특질 이름들을 지닌다.



5. 때때로 속성들은 복잡한 값들을 수용한다. 가령 몇가지 다른 값들을 포함하는 계산들


미디어 특질들은 오직 단일 값만을 수용한다(한가지 키워드, 하나의 숫자 등) .

만일 미디어 특질이 UA가 작동하는 장치에 존재하지 않는 개념을 표현한다면(가령, speech UA들은 'width'의 개념을

 

가지고 있지 않다), 그 미디어 특질은 항상 거짓false로 평가되어야만 한다.

 

<예제>

미디어 특질  'device-aspect-ratio'는 오직 시각적 장치에 적용된다. 'speech'장치에서 'device-aspect-ratio'를 포함하는


표현은 그러므로 항상 false일 것이다. 

<link media="speech and (device-aspect-ratio: 16/9)" rel="stylesheet" href="example.css">

 

 

 다음페이지에 계속 

지구별에
css 2019. 10. 5. 01:17

댓글을 달아 주세요

안녕하세요

 

 

안녕하세요 지구별에 입니다

 

제가 마지막으로 글을 쓴 지 4년이 지났네요

 

그동안 출산, 육아 등으로 바쁘게 살아서 글 쓸 마음에 여유가 나지 않았어요

 

'이제 슬슬 다시 시작해 볼까' 맘 먹은 지 꽤 되었는데도 시작을 못하고 있어요

 

처음부터 무언가 그럴 듯해 보였으면 좋겠는데 머리가 따라 주지 않네요...^^

 

그래서 가벼운 썰로 시작해 보려고 하니 많은 이해를 부탁드려요....

 

 

제 블로그는 무려 4년이 지났지만, 여전히 많은 분들이 방문해 주셔서 정말로 감사하게 생각하고 있습니다

 

한편으로는 부족한 글을 보러 와 주시니 부끄럽기도 하지만 잘못된 점이 있다면 바로 알려주시면 시정하도록 하겠습니다

 

저에게 질문을 남기시는 분도 계신데, 제가 답변 드리기가 어려워 못달고 있는 것이니 오해 없으시길 바랍니다

 

아마도 다시 감을 찾으려면 시간이 조금 걸릴 것 같습니다^^;;

 

 

참, 저는 사실 공부하는 입장에서 html, css에 관한 글을 써왔고, 게다가 독학이라!! 부족한 점이

 

아주 많습니다. 제가 어떤 자료로 공부하는지 궁금하신 분도 계실 거예요....

 

저는 주로 아래 사이트와 구글을 통해 검색한 원서 자료를 토대로 공부하고 글을 썼습니다

 

https://www.w3schools.com

http://www.w3.org/

https://developer.mozilla.org

 

앞으로 블로그 방향은 말이죠......

 

아마도 제 아이가 초등학교 입학하는 3년 후에, 정말로 본격적으로? 열심히 할 테고

 

현재로선 일주일에 1회 정도 글 발행을 목표로 하고 있어요.

 

 

제가 잘 해낼 수 있을까 걱정도 되지만..... 가볍게 즐기는 마음으로 블로그를 운영해 나가고 싶으네요

 

앞으로도 많이 방문해 주세요 ^_^

 

 

 

 

 

 

 

 

 

 

지구별에
지구별 이야기 2019. 9. 27. 12:02

댓글을 달아 주세요

  1. ㅠㅠ 2019.12.09 19:22  수정/삭제  댓글쓰기

    빨리 돌아와 주세요ㅠㅠ

  2. DAR 2020.09.13 01:48  수정/삭제  댓글쓰기


    안녕하세요^^ 지금 HTML 공부 복귀했는데 참 많이 도움이 되는 페이지를 발견해서 기분 좋습니다!

    코로나 조심하고 건강하세요.

[6월 전시회] 2015 서울국제도서전(6/17~21)

 

 

[6월 전시회] 2015 서울국제도서전(6/17~21)

 

올해도 어김없이 서울국제도서전이 열리네요.

 

너무 뒤늦게 알아서, 무료 사전등록 기간도 놓쳤습니다.

 

올해는 인원이 많을 것으로 예상해서인지 등록 기간도 무척 짧았는데, 25일까지 연장해서 등록을 받았다고 하네요.

 

아마 무료로 입장할 수 있는 다른 경로가 있을 테니 촉을 세워두고 관심을 가져 보세요. ^^

 

 

 

 

서울국제도서전의 대략적은 개요는 다음과 같습니다

 

 

일시 :2015년 6월 17일(수) ~ 21일(일)

 

장소 :삼성동 코엑스 A홀

 

주빈국 : 이탈리아

 

관람 시간 :행사종료 30분 전 입장 마감


17일(수) ~ 19일(금) :10:00 ~ 19:00

 

20일(토) :10:00 ~ 20:00

 

21일(일) :10:00 ~ 17:00

 

입장료 : 일반 5,000원 / 학생 3,000원

 

단, 사전등록자, 장애우, 65세 이상, 미취학 아동, 단체 관람(사전 예약자)은 무료 입장이 가능합니다.

 

 

 

 

서울국제도서전을 처음 가보시는 분들은 제가 작년에 써 놓은 리뷰가 있으니 이런 분위기구나 파악하고 가심 좋을 거예요~

 

 

책을 좋아하는 사람이라면 가볼만한 서울국제도서전 방문 후기

 

2014 파주 북소리 축제 후기

 

맨 마지막 날 간다면 조금 돛대기 시장 분위기라, 마지막 날은 피하시는 게 좋을 듯 싶습니다.

 

밑에 서울국제도서전 일일 프로그램을 올려 두었으니 관심 가는 날 한 번 방문해 보세요!



 

요새 티비에서 요리 코너가 인기인데, 그 인기를 반영하는 것인지 샘킴 세프까지 출연하시는군요.

 

저는 [북멘토에게 묻다] 코너의 김난주 번역가 편이 기대가 됩니다.

 

그런데 거의 제가 출산 막달이라 갈 수 있을지는 의문입니다 -_-;

 

 

[서울국제도서전 일자별 프로그램]

 

 

 

 

 

 

 

참, 지하철 책 읽기 캠페인을 하니(일시: 6/20 오후 1시 서울도서관 앞 시청광장)


책을 좋아하시는 분이나 독서동아리는 참여해보시는 것도 좋을 것 같습니다.

 

서울도서관 앞에서 모여서 2호선 지하철을 타고 각자 가져온 책을 읽으며 삼성역에 내려서 도서전 자유 관람하는 행사입니다.

 

모집 기간은  05/18~6/12 까지이며, 신청 방법은 아래 사이트를 참고 바랍니다.

 

[2015 서울국제도서전] 책읽는지하철타고 서울국제도서전 가자!

 

[서울국제도서전 가는 길]

 

2호선 삼성역 5,6번 출구로 연결된 통로로 진입, 밀레니엄 광장을 통해 코엑스물로 진입

 

7호선 청담역 2번 출구로 나와 도보로 20~30분. 아셈광장을 통해 진입.


 

 

 

지구별에
책 리뷰 2015. 5. 29. 11:42

댓글을 달아 주세요

근황

 

요즘 블로그에 들어 올 경황이 없었어요
한동안 내키지 않기도 했고 제 일을 인수인계하면서 들어 올 수도 없었고요

시간은 왜 이리 빨리 흐르는지 저는 벌써
30주랍니다

2개월 조금 지나면 아가가 탄생해 있을 거예요

지금까지와는 사뭇 다른 새로운 환경이 펼쳐지겠지요^^

앞을 너무 내다보며 살진 않으려 해요

현재에 충실하면서 아이를 위해 그리고 저를 위해서도 좋은 것을 더 많이 보고 생각하며 살려고해요^-^

그럼 또 시간 될 때 종종 기록을 남길게요


지구별에
tags : 근황
카테고리 없음 2015. 5. 1. 23:10

댓글을 달아 주세요

  1. Gureumi 2016.02.17 15:23  수정/삭제  댓글쓰기

    올려주신 HTML 정보들을 잘 읽고 있습니다.
    힘내세요.

  2. 유혼 2016.05.02 23:40  수정/삭제  댓글쓰기

    항상 잘보고 있습니다 ^^ 건강하세요

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. 4. 9. 10:23

댓글을 달아 주세요

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

 

 

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

 

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

 

반응형 웹사이트란,

 

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

 

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

 

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. 4. 6. 11:35

댓글을 달아 주세요

봄에 키우기 좋은 식물(키우기 쉬운 화초 추천)

 

 

봄에 키우기 좋은 식물(키우기 쉬운 화초 추천)

 

봄 되면 길가에 화초를 놓고 파는 곳이 많이 생겨요.

 

가격도  저렴하고요, 주로 포트로 된 화분이라 집에 데려와서 분갈이를 해줘야 하지만

 

사서 키우는 재미를 볼 수 있는 싱싱한 화초예요.

 

그래서 제가 지금까지 키운 화초 중에서, 키우기 수월한 순서대로 정리해 보았어요.

 

중간 중간에 화초 키우는 요령 링크도 걸어 두었으니 참고해 주세요

 

 

 

1. 테이블 야자

 

1위는 테이블 야자입니다~  그늘에서도 잘 자라고, 물주기도 그렇게 어렵지 않아요.

 

어떤 화초는 물을 자주 주면 죽는 경우가 많은데 어지간하면 죽지 않으니 신기할 따름이에요...

 

제가 몇 년 전 반지하에 살던 때부터 키우던 화초인데, 잎이 클수록 공기정확 능력도 좋겠죠?

 

테이블 야자 키우기 (잘 키우는 비법)

 

 

 

 

 

2. 마리안느

 

2위는 마리안느입니다. 이 아이도 키우기 쉬운 편이고, 엄청 잘 자라요.

 

줄기를 잘라서 수경 재배도 가능해요. 수경 재배하다가 뿌리가 생기기 시작하면

 

다시 화초로 옮겨셔 심어 주시면 돼요.

 

마리안느의 경우 빛을 봐야 본연의 화초 색깔이 나와요. 원래 가운데가 연녹색이 나는데

 

그늘에서만 자라면, 전체가 녹색 빛을 띕니다.

 

마리안느도 이파리가 넓어서 공기 정화 능력이 좋습니다.

 

마리안느 키우기(건강하게 잘 키우는 법)

 

마리안느, 테이블야자 분갈이 하는법(분갈이 3종 세트 사용 후기)

 

 

 

3. 아이비

 

아이비는 의견이 분분해요. 키우기 쉽다는 사람과, 키우기 어렵다는 사람....

 

한 가지 팁을 드리면, 잎이 시들시들해들 때쯤 주면 실패하지 않아요.

 

식물이 죽는 건 물을 너무 많이 준 데 원인이 있습니다.

 

아이비 키우기(실패하지 않는 아이비 잘 키우는법)

 

 

 

4. 오렌지자스민

 

다음은 오렌지자스민



 

이 아이는 기온과 햇볓 양이 맞으면 4계절 꽃을 피워요. 향도 은은해서 방향제로 써도 좋습니다.

 

오렌지자스민 키우기(꽃이 피는 적절한 환경과, 오렌지자스민 물주기)

 

오렌지자스민 열매, 채취했어요

 

 

겨울에는 이렇게 오렌지 빛깔 열매를 맺습니다.이 열매를 다시 화분에 심으면 자란다고 하네요...

 

저도 이번에 해 보려구요.

 

 

 

5. 바질(허브과)

 

저는 허브 3종 세트를 사다가 씨앗 발아해서 키웠어요. 다른 허브는 키우기 어렵다지만

 

바질은 발아율 95%에... 잘 자랍니다. 식용으로 쓰이기도 하지요

 

 

허브 씨앗 키우기(라벤다, 레몬밤, 바질 발아 과정)

 

허브(바질, 라벤다, 레몬밤 발아) 키우기, 주의사항

 

 

 

 

 

 

 

6. 타라

 

타라나, 트리얀 같은 덩굴 식물은 약간 키우기 어려운 것 같아요.

 

조금만 관리를 소홀이 하면 뿌리가 쉽게 썩거나, 너무 건조할 경우 잎이 마르거든요.

 

하지만, 아기자기 이파리가 예뻐서 늘 눈이 가는 식물입니다.

 

작년에 수경재배 하다가 실패 했는데, 이번엔 땅에다가 다시 키워 봐야겠어요.

 

타라 수경재배 방법

 

 

 

 

봄은 화초 키우기 가장 좋은 계절이라는 거 알고 계신가요?

 

겨울에는 아무리 정성을 들여도 기온이 맞지 않아 생장 속도가 너무 느리지만, 봄이 되면

 

무엇이든 잘 자라거든요. 화초 키우기, 어렵다 생각지 마시고, 키우는 법을 잘  참고하셔서 꼭 도전해 보세요~

 

 

 

지구별에
지구별 정원 2015. 3. 31. 17:15

댓글을 달아 주세요

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. 3. 27. 17:58

댓글을 달아 주세요

봄날 배 부른 투정

 

 

지난 금요일 이래 글을 전혀 쓰지 못했네요.

 

틈이 없어 못 쓴 게 아니라, 요즘 따라 왜 이렇게 글 하나 쓰기가 버거운지요...

 

예전에는 내가 이 일을 어떻게 했지? 라는 생각이 들고...

 

아니면 지금 제가 글을 쓰려고 하는 분야가, 생각보다 어려운 단계인가 봐요.

 

HTML5, CSS3, 반응형 웹 .... 어느 쪽으로 가든 제가 이해하고 정리하는 데

 

많은 시간이 필요한데, 그전처럼 뚝딱 만들어낼 수 있는 수준이 아닌가 봐요.

 

블로그는 업데이트 주기도 검색 순위에 영향을 미친다고 알고 있어서....

 

이러다가, 내 글도 검색에서 점차 밀리지 않을까 하는 조급함도 있고.... (그래 봐야 구글과, 다음 뿐이지만;;)

 

또 뭔가 준비가 되지 않은 상태에서 글 하나를 쓰려니, 제 성에 완전히 차지도 않은

 

애매한 상태입니다.

 

그러다 보니... 이 일이 즐거운 마음이 들지가 않아서, 내가 이렇게까지

 

블로그를 운영해야 하는 마음도 들어요. 현재 네이버에서는 제 블로그가

 

저품질 현상(검색 순위가 아주 끝으로 가버리는)이라 의욕도 좀 떨어져 있고요. 

 

어떻게 이 상황을 헤쳐나가야 할까요??

 

 

 

이런 제 고민과는 별개로, 요즘 날은 너무나 좋습니다.

 

산으로 들로 나들이 나가고 싶고, 좋은 책, 좋은 그림 구경도 다니고 싶어요.

 

1년 동안 책을 제대로 못 읽었어요.

 

왜냐구요?? 블로그 때문에요 ㅡ.ㅡ 라고 말하면 좀 억지겠지만....

 

그 전에 여가 시간에 제가 해 오던 것들을 많이 놓치고 사는 느낌이 들어요.

 

 

책도 읽고, 내가 하고 싶은 것 하면서 살면, 이 블로그에 들이는 시간이 줄어들겠지요...

 

어떤 것이 더 값어치가 있는 삶일까요?

 

그리고 어떻게 살아야 잘 사는 것일까요?

 

 

에고.... 오늘은 괜히 아침부터 투정 부려 봤어요.

 

조금 속이 후련해지는 것도 같아요

 

 

제 글 주제의 특수성 때문에 제 블로그가 아주 딱딱하고 건조한 느낌이 들지만

 

저는 아주 말랑 말랑한 사람이랍니다 -_-;

 

시를 짓기 좋아했던(?) 마음 약한 그 지구별에는 어디 갔는지.....

 

 

오늘 아침은, 그런 제 모습이 그리워졌어요, :-)

 

 

 

오렌지자스민 열매, 채취했어요

 

아이비 키우기(실패하지 않는 아이비 잘 키우는법)

 

오렌지자스민 키우기(꽃이 피는 적절한 환경과, 오렌지자스민 물주기)

 

허브 씨앗 키우기(라벤다, 레몬밤, 바질 발아 과정)

 

허브(바질, 라벤다, 레몬밤 발아) 키우기, 주의사항

 

지구별에
지구별 이야기 2015. 3. 26. 09:53

댓글을 달아 주세요

  1. tbm 2015.03.26 16:42  수정/삭제  댓글쓰기

    블로그가 삶의 안좋은 영향을 준다면 우선순위가 될 순 없겠죠 :)

  2. admin 2015.03.30 17:57  수정/삭제  댓글쓰기

    그만두신다면 좀 아쉽겠네요..

    • 지구별에 2015.03.31 09:20 신고  수정/삭제

      저도 오랫동안 운영해 왔던 거라... 당장 그만두거나 그러진 않을 거예요.^^ 나중에 출산하고 그러면 상황상 어려운 점이 있겠지만.... 가끔이라도 들어와 흔적을 남겨야죠.

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

 

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

 

지난 시간엔 부트스트랩을 이용하여 아이콘 넣는 법을 배워 보았어요.

 

부트스트랩 사용법 (glyphicons 아이콘 넣기)

 

오늘은 font awesome 을 이용할 텐데 font awesome은 아이콘으로 사용되는 웹폰트 중에서

 

가장 잘 알려져 있고, 특히 부트스트랩과도 함께 사용할 수 있습니다.

 

원래 부트스트랩 2.0 버전에서  아이콘(Glyphyicons)은 이미지 형식이었기에, 크기 조절이나, 

 

색상 혹은 배경색 바꾸기가 되지 않았습니다.

 

이때 font awesome은 font 형식으로 제공했기에, 크기 조절, 색상, 배경색 바꾸기가 자유로웠습니다.

 

하지만 부트스트랩 3.0 버전부터는 아이콘을 font 형식으로 제공합니다.

 

Font Awesome과 Glipyicons의 차이는 다음을 참조

 

 

 

본격적으로, font awesome 사용법을 알아보겠습니다.

 

 

Font Awesome 으로 아이콘 넣기

 

1. head 에 아래 링크를 삽입(font awesome의 가장 최신 버전임)

 

fontawesome link.txt

 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

 

위 주소는 프로토콜 상대 주소입니다. 위 링크 삽입 후에도 실행되지 않을 경우 href=" 뒤에 http: 혹은 https:를 삽입합니다.

 

 



2. 그러고 나서, 아래 사이트로 이동하여 원하는 아이콘을 찾습니다.

 

http://fontawesome.io/icons/

 

 

저는 위 이미지에서 bars라고 된 아이콘을 쓰고 싶습니다. 마우스를 대면 배경이 초록으로 표시되며

 

클릭해서 들어가 봅니다. 

 

3. 클릭하면 이 아이콘 사용법이 나옵니다.

 

<i class="fa fa-bars"></i>

 

 

font awesome에서는 i 태그를 사용했지만, span 태그를 사용해도 됩니다.

 

클래스명만 정확히 적어주시면 됩니다. 

 

<span class="fa fa-bars"></span>

 

크기를 2배로 하고 싶으면 뒤에 fa-2x, 3배로 하고 싶으면 fa-3x를 삽입합니다.

 

<i class="fa fa-bars fa-2x"></i>

 

자세한 사용 예는 이곳을  참조해주세요.

 

 

▶실행 화면

fontawesome example.html

 

 

 

※ 주의 사항

 

font awesome 또한 최근 주요 브라우저에서 모두 지원이 되지만, ie7은 지원이 안 됩니다.

 

ie7을 지원하려면 다음 링크를 삽입

 

*단 ie7은 Font Awesome 4.3.0버전을 지원하지 않습니다.

 

Font awesome 3.2.1 버전에서 ie7을 지원함

 

<!--[if IE 7]>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->

 

그러므로 아래 박스처럼 css링크도 3.2.1 버전을 사용해야 하며, http://fontawesome.io/3.2.1/get-started/

 

font icons 역시 3.2.1 버전을 사용합니다. http://fontawesome.io/3.2.1/icons/

 

사실 3.2.1 버전은 더 이상 공식적으로 지원이 되지 않는 버전입니다.

 

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!--[if IE 7]>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->

 

 

지금까지 font awesome 사용법을 알아 보았는데,

 

저는 CDN(Content Delivery Network) 방식을 이용했습니다. 즉 인터넷으로 링크를 내려 받아 사용한 것이지요.

 

하지만 직접 파일을 다운받아 사용하는 방법도 있습니다.

 

http://fontawesome.io/3.2.1/

 

http://fontawesome.io/

 

다음 시간에 더 자세히 알아 볼게용~

 

 

 

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

 

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

 

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

 

지구별에
티스토리 툭탁툭탁 2015. 3. 20. 13:11

댓글을 달아 주세요

  1. yeonji_qp 2020.05.21 12:26 신고  수정/삭제  댓글쓰기

    도움 많이 받아갑니다 ^_^

부트스트랩 사용법 (glyphicons 아이콘 넣기)

 

 

부트스트랩 사용법 (glyphicons 아이콘 넣기)

 

부트스트랩 참 많이도 들어보았는데, 정확히 무엇이고 어떻게 사용해야 할까요?

 

읽기만 하고는 도저히 이해가 가지 않아 직접 부트스트랩을 사용해 보기로 했어요.

 

그래서 오늘은 부트스트랩을 이용하여 메뉴 아이콘을 넣기를 해 볼 생각합니다.

 

이렇게 먼저 간단한 활용법을 배운 후에, 자세한 사용법을 이후 강좌에서 차차 살펴 볼까 해요.

 

일단 그래도 한 가지 알아두어야 할 것은...

 

 

부트스트랩(bootstrap)이란?

 

웹사이트를 만들 때 html, css, 자바스크립트 언어를 아는 사람은 직접 만들기도하고,

 

드림위버 같은 저작도구를 사용하기도 합니다.

 

부트스트랩도 일종의 웹사이트 저작 도구로(특히 반응형에 최적)  htm과, css에 기반한 템플릿을 제공합니다.

 

일종의 틀이나, 모형이라고 생각하면 쉽습니다. 

 

예를 들어, 아래와 같은 버튼을 만들려면, 색상이라든과 둥근 모서리 효과를 위해 여러가지 css 지식이 필요하지만

 

틀이 이미 만들어져 있다면 그 틀을 원하는 곳에 갖다 넣기만 하면 되겠지요. 

 

 

이 버튼을 사용하려면, 아래 빨간색으로 된 클래스명을 사용하기만 하면 됩니다, 정말 간편하죠?

 

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

 

 

하지만 그러기에 앞어 부트스트랩을 이용하려면 사전 세팅이 필요합니다.

 

 

부트스트랩을 이용하기 위한 사전 설정

 

1. head 사이에 style 위에 다음을 삽입

   부트스트랩 기본 css 입니다.

 

 

 

2. body가 끝나는 지점 바로 위에 다음을 삽입

 

  첫번째 줄은 jquery 파일이고, 두번째 줄은 자바스크립트 파일

 *단순히 아이콘만 사용할 셈이라면 이 파일 삽입은 필요하지 않음*

 

 

삽입 위치가 어려우신 분은 아래 기본 템플릿을 다운받아 복사해서 사용하세요.

 

bootstrap_basic_template.txt

 

이제 부트스트랩 사전 설정이 끝났으니, 오늘 강좌의 목적인 메뉴 아이콘 넣기를 해 보겠습니다.

 

 

부트스트랩으로 메뉴 아이콘 넣기

 

1. 아래 부트스트랩 사이트로 이동합니다.

 

http://getbootstrap.com/components/

 

그럼 Glyphicons이라고 있는데, 이곳에서 메뉴 아이콘을 찾아봅시다.  

 

요렇게 생긴 아이콘입니다. 아이콘 밑에는 glyphicon glyphicon-align-justify 라고 써 있습니다.

 

이게 바로 이 아이콘의 클래스명입니다.

 

[HTML, CSS 기초] class, id 선택자




2. 사용법은 클래스명을 아래처럼 원하는 위치에 삽입합니다.

 

<태그명 class="glyphicon glyphicon-align-justify"></태그명>

 

티스토리에서는 화면 상단 오른쪽에  HTML 에 체크 표시한 후에 이 클래스명을 넣어줍니다.

 

 

저는, 어제 배운 강좌를  활용해 보았습니다.

 

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

 

html

<div id="header">
<label for="toggle" onclick><span class="glyphicon glyphicon-align-justify"></span></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>

 

 

어제는 이 자리에 'MENU' 라는 글자와 메뉴 아이콘 이미지를 사용했는데

 

오늘은 그 부분을 빼고, 부트스트랩 아이콘을 사용합니다.

 

그리고 아이콘을 우측에 놓기 위해 다음 css 설정을 해 주었어요.

 

css

label{display:block; text-align:right; padding: 4px 3%;}

 

▶실행화면

 

bootstrap example.html

 

 

 

하지만, 부트스트랩 사용 시 유의할 사항이 있습니다.

 

 

부트스트랩 사용 시 유의 사항(필독)

 

▶브트스트랩 지원 브라우저

 

ie8+, chrome, firefox, opera, safari, iOS, Android

 

(border-radius, box-shadow, transform, transition, placeholder는 ie9+부터)

 

 

최근 브라우저는 대부분 지원하지만 인터넷 익스플로러는 8 이상부터 지원합니다.

 

그러므로, 그 이하 버전에서 브트스트랩을 이용한 아이콘을 보면 전혀 표시되지 않겠지요.

 

또 티스토리를 모바일로 볼 때, 반응형 스킨을 사용하지 않을 경우에도 제대로 보이지 않습니다.

 

제 티스토리 또한 그렇습니다.

 

 

또한 IE 문서 모드 중 오래된 모드에서는 지원되지 않습니다. 항상 최신 문서 모드를 사용하세요

 

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

 

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

 

 

 

지구별에
티스토리 툭탁툭탁 2015. 3. 18. 15:23

댓글을 달아 주세요

오렌지자스민 열매, 채취했어요

 

 

오렌지자스민 열매, 채취했어요

 

지난 초여름에 오렌지자스민을 처음 사서 키워 보았어요.

 

오렌지 자스민 생각보다 키우기 어렵지 않습니다.

 

오렌지자스민 키우기(꽃이 피는 적절한 환경과, 오렌지자스민 물주기)

 

 

다만 제가 처음 키우는 식물이다 보니, 1년 동안의 습성이 어떨지 궁금했는데...

 

지금 이 글을 쓰기에 적절한 시기인 것 같습니다.^^

 

오렌지자스민은 4계절 꽃을 피우는 식물이라는 것 알고 계시죠

 

 

하지만 햇볓과 기온이 맞아아 꽃을 피운답니다.

 

추운 겨울은 햇볓에 오래도록 두어도 꽃을 피우지 않더라구요. 더구나 저희는 낮 동안 거실 난방을 하지 않았거든요^^

 

그래서, 겨울 동안은 오렌지자스민 키우는 재미가 조금 덜 하다고 할까요....

 

그러던 찰나....  오렌지자스민 열매가 맺기 시작하더군요.

 

처음엔 초록빛이었다가... 점점 주황빛으로 나중에는 붉은 색으로 변해요.

 

왜 이 식물의 이름이 오렌지 자스민인지 이해하게 되었어요.

 

열매가 오렌지 열매와 같아서 그리 부르는 것 같아요.

 

하지만 열매 크기는  작습니다.^^

 

 

 

열매가 참 탐스럽죠?

 

오렌지자스민 열매는 식용이 아닙니다.

 

 

오렌지자스민 열매 키우기

 

열매를 자르면 이렇게 씨앗이 하나, 혹은 2쪽이 있어요. 이것을 다시 심어서 키울 수 있다네요.

 

발아시키는 방법은 하루 정도 물에 불렸다가, 흙에 심어주면 된답니다. 흙을 너무 두텁게 덮지는 마시고...

 

씨앗이 발아될 때까지 습도를 유지시켜 주시고요.

 

 

밑에 글, 허브 발아 과정을 보시면 좀 더 이해하기 쉬울 거예요.^^

 

이제 누가 뭐래도 봄입니다. 설레는 봄, 예쁜 오렌지자스민 키우기에 도전해 보세요

 

 

 

허브 씨앗 키우기(라벤다, 레몬밤, 바질 발아 과정)

 

허브(바질, 라벤다, 레몬밤 발아) 키우기, 주의사항

 

실패 확률 제로, 콩나물 싹 키우기

지구별에
지구별 정원 2015. 3. 17. 16:56

댓글을 달아 주세요

  1. 2015.03.23 23:08  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 김정임 2015.05.13 06:49  수정/삭제  댓글쓰기

    지구별님
    혹시해서 문의드립니다
    어머님께서 귀촌하시면서 오렌지 자스민 씨앗을 구해달라시는데 구하기 힘들고 판매하는곳도 없네요. 남는 씨앗있다면 나눔 가능할까요?
    요녀석이 머리가 아프게하네요
    쉰을 바라보는 나이에 찾는게 어찌나 어려운지
    컴맹을 입문시키네요

    • 지구별에 2015.05.13 17:32 신고  수정/삭제

      다행히 남은 씨앗이 있네요 비공개로 연락처와 함께 받으실 주소 보내주세요
      일반우편으로 가는거라 7일정도 소요될거같아요

  3. 2015.05.22 15:33  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. 테드 2016.09.22 15:31  수정/삭제  댓글쓰기

    꽃이 피고 난후에 그 봉우리에서 열매가 맺히나요? 아님 꽃 안피고 바로 열매가 맺히나요?
    제것은 꽃은 여러번 피는데 열매가 안 맺히네요 ㅠㅠ

  5. 저도저도 2017.03.07 18:13  수정/삭제  댓글쓰기

    저도 궁금한게 있어요ㅜ 겨울이라 그런건지 집으로 가져온지 한달정도 되었는데. 손으로 툭 쳤는데 잎이 우두두두 떨어지는거에요ㅠ
    그와중에 달려있던 열매는 잘 익고 있는데. 잎 떨어지신적 없으신가요? 창가에 둬서 추워서 얼은건지 집이 건조한건지. 물을 늦게 줬는지...일주일에 한번이면 충분하다고 하셨었는데ㅠㅠ답변 꼭 기다릴게요!! 맘아파요ㅋㅋ예뻐서 큰거 사왔거든요

  6. 하람동동맘 2020.01.31 14:05  수정/삭제  댓글쓰기

    안녕하세요. 저희집에도 자스민이 열매를 맺어서 해보고싶어 검색하던중 궁금하여 여쭤봅니다. 열매가 순차적으로 생기면서 붉은게 오래되어 살짝 마른아이도 있고 아직 덜 붉은 아이들도 있는데 아무때나 따서해도 상관없는건가요? 해보고싶은 욕심은 많은데 뭐든 공부가 많이 필요하네요^^ 알려주시면 감사하겠습니다~~

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. 3. 16. 11:42

댓글을 달아 주세요

  1. 알려주세요 2016.07.26 18:08  수정/삭제  댓글쓰기

    잘 설명해주신 덕분에 잘 따라배우고 있습니다 !

    그런데 이 드롭다운메뉴 하다가 안되는 부분이 있어서 여쭤봅니다.
    스프링 mvc로 드롭다운메뉴를 따라서 반응형웹으로 만드는 와중에
    화면을 줄였을 때에 메뉴 창으로 까지 바뀌는 것까지는 되나, 클릭을 해도
    밑으로 메뉴가 나오질 않습니다..
    압축되어있는 파일도 다운받아서 실행시켜도 잘 되는데..
    그걸 제것에 적용시켜서 하니 밑에 창이 안열리더라구요ㅠㅠ

    혹시 스프링에서는 html에 label 부분에 onclick 부분이 에러가 뜨더라구요..
    onclick="***" 이렇게 뭐 입력하고 function해서 하거나 하라는 것같은데..
    이 부분이 아닐수도 있구요 ㅠㅠ 밑에 창이 안열리는분 부분은 어딜 다시 봐야할까요?

  2. 아이윤맨 2020.12.11 09:31 신고  수정/삭제  댓글쓰기

    링크해갑니다~

[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. 3. 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. 3. 6. 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. 3. 5. 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. 3. 3. 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. 3. 2. 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. 2. 27. 16:47

댓글을 달아 주세요

Powerd by Tistory, designed by criuce