CSS box-shadow 이해하기

box-shadow는 해당 박스요소에 그림자를 나타낼 수 있게 해준다.

box-shadow를 설정하는 기본적인 방법은 그림자의 수평 위치와 수직 위치를 설정해주는 것이다. (참고로, 수평값과 수직값은 마이너스값으로도 설정이 가능하며, 수평값과 수직값은 box-shadow가 작동하기 위해 반드시 입력되어야 한다. 아래에 소개될 나머지 값들. 색상, 블러 등은 선택 옵션이다.)

  box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)]  

예 : box-shadow: 10px 10px;

여기에 색상값을 추가하여 그림자의 색상을 설정할 수 있다.

 box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [color(색상)];  

예 :  box-shadow: 10px 10px #2580a2;

수평값과 수직값 외에 숫자값이 하나 더 추가될 경우 세번째 숫자값은 블러(blur), 즉 그림자의 흐릿한 정도를 나타낸다.

 box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [blur(그림자의 흐릿함 정도)] [color(색상)]  

예 : box-shadow: 10px 10px 10px #2580a2;

숫자값이 하나 더 추가될 경우 네번째 숫자값은 스프레드(Spread) 값이다. 스프레드 값을 설정하면, 그림자가 스프레드 값 만큼 모든 방향으로 커진다.

 box-shadow: [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [blur(그림자의 흐릿함 정도)] [color(색상)] [Spread]   

예 : box-shadow: 10px 10px 10px 10px #2580a2;

스프레드는 다소 혼동하기 쉬운 개념인데, 수평값과 수직값만으로 그림자의 크기를 늘린 것과 스프레드값을 이용하여 그림자의 크기를 늘린 것을 비교하면 이해하기 쉽다.

예 : box-shadow: 20px 20px 0px 0px #2580a2;

예 : box-shadow: 10px 10px 0px 10px #2580a2;

콤마를 이용하면, 그림자를 여러개로 만들거나 나누는 효과를 내는 것이 가능하다.

예 :  box-shadow: -5px -5px black, 15px -5px yellow, 15px 15px blue, -5px 15px red;

마지막으로, [inset] 은 그림자를 바깥이 아닌 내부에 형성해주는 값이다. 맨앞에 그냥 inset 이라고 입력해주면 된다.

 box-shadow: [inset] [x offset(그림자의 수평 위치)] [y offset(그림자의 수직 위치)] [blur(그림자의 흐릿함 정도)] [color(색상)] [Spread]   

예 : box-shadow: inset 10px 10px 10px 0px #2580a2;

콤마와 [inset]을 같이 이용한다면, 그림자를 내부와 외부 동시에 만드는 것도 가능하다.

예 : box-shadow: inset 10px 10px 10px 0px #2580a2, 10px 10px 10px 0px #2580a2;

! 아래 자료를 참고하여 작성하였음.
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/

CSS word-wrap 이해하기

어떤 영역을 설정해주었을 때, 텍스트는 띄어쓰기 공백을 기준으로 줄 바꿈을 하게 된다. 이는 바꿔 말하면 띄어쓰기가 되어 있지 않은 텍스트는 영역을 벗어날 수 있다는 말이 된다.

띄어쓰기가 없는 텍스트의 대표적인 경우가 바로 링크를 입력할 때이다.

그림1

그림2

word-wrap 이라는 코드를 이용하면, <그림1>이나 <그림2> 에서처럼 공백없는 텍스트가 영역을 벗어나는 문제를 해결할 수 있다.

 word-wrap: normal;  

노멀은 기본(default)값이다. 노멀로 설정하면 텍스트는 공백을 기준으로 줄 바꿈을 하게 된다.

 word-wrap: break-word;  

break-word를 값으로 주게되면, 텍스트는 띄어쓰기와 관계없이 줄바꿈을 하게 된다.

동적뷰 사이드바뷰에서 글 목록과 본문 사이의 간격 설정

어제 올린 글에 한 분이 동적뷰 사이드바 뷰에서 글 목록과 본문 사이의 거리를 벌리는 방법에 대해 물어봐주셨습니다.

"https://lh6.googleusercontent.com/-Igs9iOvcb9M/Uh1TMstvCqI/AAAAAAAACpw/5ZqBzH9E2CE/w520-h292-no/0b.png

출처 블로그 구경하는 중에 링크 이미지 처럼 사이드바와 본문과의 거리를 벌린것을 봤는데요. 요것도 어떻게 하는지 알려주시면 정말 정말!! 고맙겠습니다."

저 역시 방법이 궁금하여 찾아보았는데요. 아래의 코드를 이용하여 사이드바와 본문 사이의 거리를 벌릴 수 있었습니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin-left:200px;   
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. 코드 삽입 시 200px을 자신이 원하는 수치로 대체해주면 됩니다.

위에서는 왼쪽 마진을 200px 주는 것을 예로 제시했습니다만, 왼쪽이 가능하다면 오른쪽 역시 가능할 것입니다

그림1

그림2

그림3

그림4

<그림2>에서처럼 오른쪽의 간격을 벌리고 싶다면, left 대신 right를 입력해주면 되겠죠. 코드는 이런 모습일 것입니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin-right:200px;   
 }  

그리고, <그림3> 에서처럼 왼쪽과 오른쪽 간격을 모두 설정하고 싶다면, 왼쪽 마진과 오른쪽 마진을 동시에 입력해 줍니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin-left:200px;   
 margin-right:200px;   
 }  

<그림4>와 같이 왼쪽, 오른쪽, 위, 아래 모두 간격을 주고 싶다면, left나 right라는 단어를 빼 버리고 그냥 'margin'이라고 입력해주면 될 것입니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin:200px;   
 }  

덧붙여, 아래의 글은 패딩(padding)이나 마진(margin) 개념을 이해하는데 도움이 될 만한 도면을 모아둔 글입니다. 시간날 때 참고하시면, 블로그의 간격을 조절할 때 도움이 되리라고 생각합니다.

관련 글 - 패딩(padding), 마진(margin) 개념을 이해하는데 도움이 될 만한 도면 모음

! 내용수정

이런 저런 테스트를 해보던 중 공백이 "전혀" 없는 긴 텍스트를 입력할 경우, 본문이 본문 영역을 뚫고 나가는 현상이 생기는 것을 확인했습니다. 공백없는 텍스트를 길게 입력하는 경우는 거의 없으므로 크게 문제가 되지 않으리라 생각합니다만, 그래도 혹시라도 모를 경우를 위해 각각의 코드에 다음의 코드를 추가하였습니다.

 word-wrap:break-word;  

동적뷰 사이드바뷰에서 글 목록 너비 설정하기

그림1

그림2

그림3

동적뷰의 사이드바 뷰에서 왼쪽 글 목록의 너비(width)를 <그림2>나 <그림3> 처럼, 좁게 또는 넓게 설정해주는 코드입니다.

 .sidebar #sidebar{  
 width: 250px !important;  
 }  
 .sidebar #content{  
 margin-left: 250px;  
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 이고, 코드의 출처는 해외 블로거 +Yogaratnam N. 님의 블로그 Southernspeakers.net 입니다.

코드를 삽입할 때 250px 이라고 적혀있는 부분을 자신이 원하는 너비의 값으로 수정해주면 됩니다. 참고로, 두 수치는 반드시 일치해야 합니다. 예를 들어서, 왼쪽 글목록의 너비를 150px로 하고 싶다면 다음과 같이 입력해주면 됩니다.

 .sidebar #sidebar{  
 width: 150px !important;  
 }  
 .sidebar #content{  
 margin-left: 150px;  
 }  

블로거 일반 템플릿에서 동적뷰 전환하기

"사랑과 죽음은 별개가 아니라 같은 것의 앞뒷면이다."

일본의 오츠이치라는 소설가의 명언을 본 따서 이렇게 말씀드리겠습니다.

"일반 템플릿과 동적뷰는 별개가 아니라 같은 것의 앞뒷면이다."

--- 이상 헛소리 ! ---



일반 템플릿 블로거의 주소 뒤에 '/view' 를 추가하면 해당 블로그 컨텐츠를 동적뷰로도 볼 수 있습니다.

http://블로그주소/view

예를 들어, 저의 블로그는 일반 템플릿 블로그이죠. 그러나, 제 블로그 주소에 아래처럼 '/view' 라고만 입력 해주면,

http://ielselog.blogspot.kr/view/

블로그가 동적뷰로 전환되는 모습을 볼 수 있습니다.

이같은 방식으로 동적뷰로 전환될 때 기본(default) 뷰는 sidebar 뷰입니다. 즉, 위의 주소로 들어가면 주소가

http://ielselog.blogspot.kr/view/sidebar

로 변경되는 것을 보실 수 있습니다. 원하는 뷰를 설정하고 싶다면, '/view' 대신 '/view/magazine', '/view/classic' 이런 식으로 특정 뷰 값을 입력해주면 되겠죠.

일반 템플릿을 사용하는 분들은 페이지 탭 메뉴나 사이드바 메뉴에 동적뷰 전환 버튼이나 링크 등을 추가함으로써, 블로그를 좀 더 다채롭고 동적으로 꾸밀 수 있지 않을까 싶습니다.


PS. 아무래도 제가 글 제목을 잘못 지은 것 같습니다. 글 제목 때문에 동적뷰 관련 질문을 주시는 분들이 많네요. 이 글은 그러니까 음.. 일반 템플릿 사용시 일반 템플릿을 그대로 사용하면서, 블로그의 글들을 동적뷰로도 볼 수 있게 하는 방법에 대해 적어본 것입니다. 블로그/템플릿 전체를 동적뷰로 전환시키는 것이 아니므로, 혼동하지 않으셨으면 좋겠습니다.

동적뷰 Flipcard View에서 '최근 항목' 글자 이탈 현상 수정하기

그림1

동적뷰의 7가지 뷰 중에서 Flipcard 뷰를 선택하면, <그림1>에서 보시는 바와 같이 최근 항목의 '목' 자가 박스를 이탈하는 현상이 발생합니다.

동적뷰를 꾸미거나 문제를 해결할 때 저는 주로 해외 블로거들의 글을 참고하는데요. 저 현상은 '한글' 블로그에서만 나타나는 문제이기 때문에 관련 글을 따로 찾을 수가 없었습니다.

그림2

크롬 브라우저로 요소 검사를 해본 결과, 이 현상은 CSS의 스타일 설정에서 너비(width)가 고정되어 있어서 발생하는 문제였습니다. 해당 요소의 CSS 스타일 설정을 따로해주었더니, 문제가 해결되는 모습을 볼 수 있었습니다.

두 가지 방식이 가능할텐데요.

하나는 <그림3>처럼 동일 간격을 유지하되 간격을 좀 더 넓게 설정해주는 방법이겠구요.

그림3

또 하나는 <그림4>와 같이 박스의 너비를 글자에 맞게 자동으로 조절하는 방식이 될 것입니다.

그림4

<그림3>처럼 동일 간격을 유지하고 싶다면 아래의 코드 중 첫번째 코드를, <그림4>와 같이 글자 수에 맞게 박스 너비를 조절하고 싶다면 두번째 코드를 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 의 위치에 삽입해줍니다.

 #controls ul#groups li {  
 width: 100px !important;   
 }  

 #controls ul#groups li {  
 width: auto !important;   
 }  

참고로, 첫번째 코드에서 너비가 반드시 100px일 필요는 없습니다. 글자가 이탈하지 않는 수준에서 적절할 너비를 입력해주면 됩니다.

데모 보기

구글플러스 댓글에서 일반 댓글로 되돌리기

구글 블로그의 댓글을 구글플러스 댓글로 전환하면 구글플러스와의 연동성은 강화되지만, 블로그 운영자의 댓글 제어 권한은 약해집니다. 예를 들어, 구글플러스 댓글에서는 일반 댓글과는 달리 댓글 승인 기능이 없으며, 공격적인 댓글을 삭제할 수도 없습니다. 스팸 댓글이라든가 악플 등은 여과없이 그냥 보여지게 되는데요.

이러한 이유들 또는 다른 이유 때문에 댓글을 구글플러스 댓글에서 일반 댓글로 전환하려면, 일반 댓글에서 구글플러스 댓글로 전환할 때와 반대의 방법으로, 단순히 대시보드 Google+ 항목에서 '이 블로그에서 Google+ 댓글 사용'을 해제하면 됩니다. 

CSS transition을 이용한 아코디언 메뉴

순수 CSS만을 이용한 아코디언 메뉴입니다.

CSS 텍스트 링크 Hover 효과 #2 - 글씨 크기 확대

링크에 마우스를 갖다대면 링크의 폰트를 확장시켜주는, CSS의 transform을 이용한 효과입니다.

CSS 텍스트 링크 Hover 효과 #1 - 자체 발광

링크 위에 마우스 커서를 갖다대면 빛을 발하는 것과 같은 효과를 내주는,
CSS의 transition을 이용한 hover 효과입니다.
CSS의 동적인 효과는 글이나 그림으로는 설명하기 힘든 부분이 많은 것 같네요.

동적뷰 타이틀에 이미지 삽입하기 #2

그림1

지난번에 동적뷰 타이틀에 이미지를 삽입하는 방법에 대해서 제가 두가지 방법을 알고 있다고 말씀을 드리면서, 첫번째 방법을 알려드렸습니다.

동적뷰 타이틀에 이미지 삽입하기 #1

오늘은 두번째 방법입니다. 첫번째 방법은 코드 수정을 거의 필요로 하지 않는 대신 원하는 크기의 이미지를 올릴 수는 없었습니다. 오늘 소개하는 방법을 이용하면, 원하는 크기의 이미지를 올릴 수 있습니다.

블로그/웹사이트 색상 조합 시 참고할 만한 사이트 - Adobe Kuler

블로거를 처음 개설하거나 꾸밀 때 가장 먼저 설정해주는 것 중 하나가 바로 색상이죠.

Adobe Kuler

는 블로그나 웹사이트에서 색상 조합이나 배치를 설정할 때 상당히 유용하게 쓰일 수 있는 사이트입니다.

영문 사이트이지만, 사용법은 매우 쉽습니다.

그림1

위의 링크로 들어간 다음 Color Rule 메뉴에서 자신이 원하는 배색/색상조합 방식을 설정합니다. 각각의 조합이 무엇을 의미하는지 잘 와닿지 않는다면, 배색, 색상조합 기본 개념 이해하기 라는 글을 참고하시기 바랍니다.

그림2

원하는 조합 방식을 선택했다면, 아래에서 색상 하나를 클릭한 후 <그림2>에서 보시는 것처럼 색상코드를 입력, 베이스 컬러로 설정해 줍니다. <그림2>에서는 제 블로그의 베이스 컬러인 '2580a2'를 입력해주었습니다.

그림3

그리고, 베이스 컬러를 제외한, 나머지 색상들 아래에 있는 원을 조금씩 움직여서 원하는 색상을 설정합니다. <그림1>의 단계에서 Complementary(보색)을 설정했다면, 보색 조합의 범위 안에서 색상을 얻을 것입니다. 기준 색상을 정하지 않았다면, 팔레트 위의 시계 바늘처럼 생긴 돋보기를 클릭하여 원하는 조합을 찾아보는 것도 좋은 방법입니다.

그림4

Adobe Kuler를 이용하여, 이미지로 부터 색상을 추출할 수도 있습니다. 예를 들어, <그림4>와 같은 분위기의 색상을 얻고자 한다면,

그림5

사이트 우측 상단의 'Create from Image'를 클릭하여 이미지 파일을 업로드 합니다.

그림6

그 다음, 왼쪽의 Color Mood에서 색상 추출 방식을 선택하여, 색상을 추출합니다.

그림7

추출된 색상이 마음에 들지 않는다면, 이미지의 원들을 클릭 드래그하여 추출하고자 하는 색상을 직접 설정해줄 수도 있습니다.

배색, 색상조합 기본 개념 이해하기 - Monochromatic, Complementray, Analogous, Split-complementary, Triad, Tints, Shades, Tones

• Monochromatic - 단색 배색, 또는 단색 조화
• 같은 색조에 의한 배색 방법.
• 기본 색상을 하나만 골라 명도를 조절해 밝거나 어두운 색을 몇 가지 만들어 쓰는 방식
• 무난하고 안정적이며 부드러운 느낌을 준다.

• Complementray - 보색
• 색상환에서 서로 상반된 위치에 있는 색들로 구성하는 방법.
• 보색 조합은 그외 여러 색상 설계와는 매우 달라서, 보색관계에 있는 색들을 함게 모으면 동시 대비 효과(simultaneous contrast) 가 나기도한다.
• 각 색은 다른 색을 좀 더 선명하게 하고, 서로를 더 두드러져 보이게 한다. 이 효과를 잘 이용하면 사이트 방문객들의 시선을 성공적으로 유도할수 있다.
• 그러나 잘못 사용하면 두색이 서로 충돌하는 부조화 현상이 일어날 수 있다.

• Analogous - 유사색 배색
• 색상환에서 한 색과, 이웃한 다른 색으로 구성하는 방식
• 색을 차분하게 조화시키고 싶을 때 인접색끼리 배치한다
• 색의 차이가 크지 않아 안정적이고 친근한 느낌을 준다.
• 유사색을 구성할 때는 색의 수가 색상환에서 3분의 1이하로 선택해야 한다.

• Split-complementary - 분할보색 배색
• 기본 색을 선택하고 그 색과 보색위치에 있는 색에 있접한 두 색을 사용하는 방식

• Triad - 3색 배색
• 기본 색상을 중심으로 3가지 대비되는 색상으로 선택.
• 색상환에서 각각 같은 간격으로 위치하는 색상을 세 개 선택한다.
• 다채롭고 뚜렷하지만, 연관되지 않은 다른 종류의 색이 흩어져있는 듯한 느낌을 피하려면 주의가 필요하다.

Tints, Shades, Tones

• Tints - 기본 색조에서 흰색을 첨가해나가는 방식

• Shades - 기본  색조에서 검정색을 첨가해나가는 방식

• Tones - 기본 색조에서 회색을 첨가해나가는 방식

sources :
여러색상 설계법 (해피나무의 걷기 좋은 길)
컬러 배색법 (북극을 사랑한 여우)
tigercolor
worqx
cristinacolli

동적뷰의 텝 페이지를 드롭다운 메뉴로 변경시키기

그림1

그림2

동적뷰에서 탭 페이지는 <그림1>에서 처럼 헤더 아래 검은 바에 가로로 표시됩니다.
아래의 코드는 탭 페이지를 <그림2>와 같이 드롭다운 메뉴로 바꿔줍니다.

 #header.header .header-drawer #pages.tabs ul li{  
 margin: 100000px;  
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 이며, 코드의 출처는 해외 블로거 southernspeakers 입니다.

참고로, 드롭다운 메뉴 최상단에는 <그림2>에서 보시는 바와 같이 'Pages'라고 표시됩니다. 이 문구를 원하는 문구로 바꿀 수 있지 않을까 싶어서 테스트용 블로그에서 여러 방식으로 시도해보았습나다만, 방법을 찾을 수 없었습니다.


! 내용수정

'Pages' 바꾸는 방법에 대해 +Hui-Su Jeong 님께서 댓글로 링크를 남겨 주셨네요. 아래에 해당 코드를 추가하였습니다.

 #pages span:first-child{  
 font-size: 0px !important;  
 }  
 #pages .menu-heading:before, .ss{  
 content: "목록";  
 font-size: 15px !important;  
 }  

코드 삽입 위치는 마찬가지로 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. 삽입하실 때 '목록' 대신 원하는 글자를 입력하시면 됩니다.

em과 px은 어떻게 다른가 - CSS의 단위들

• ex

1ex는 폰트의 x-height를 말한다. 일반적으로 x-height는 폰트 사이즈의 절반. 아래 그림을 참고.

• pt

point. 1pt는 1/72 인치를 말한다. 프린터와 연계하여 사용할 수 있는 단위.

• pc

pica. 1pc는 12 points(12pt)와 같다.

• px

pixels. 픽셀. 컴퓨터 화면과 같은 스크린 매체에서 사용되는 고정된 크기의 단위. 1 px은 컴퓨터 화면의 점 한개와 같다.

• em

1em은 현재 지정된 폰트 사이즈와 같다. 2em은 현재 폰트 사이즈의 2배, 즉 200%를 의미한다. 예를 들어, 블로거 본문 폰트 사이즈가 12 픽셀이라면, '1em'은 12 픽셀, '.5em'은 6픽셀이다. 고정 단위인 px나 pt 등과 달리, em은 가변 단위이다. 가변성과 모바일 장치 친화적인 특성 때문에 점점 많이 쓰이고 있는 단위이다.

source : kyleschaeffer, w3schools, wikipedia 

블로거 모바일 템플릿에 위젯 추가하기

그림1

HTML 편집에서 위젯의 코드는 아래와 같은 형식으로 이루어져 있는데요.

 <b:widget id='가젯ID' locked='false' title='가젯타이틀' type='가젯 유형'>  

특정 위젯을 모바일 템플릿에서 표시되도록 설정하려면, 코드 중간에

mobile='yes'

라는 구문을 추가하면 됩니다.

위의 코드에 삽입한다면,

  <b:widget id='가젯ID' locked='false' mobile='yes' title='가젯타이틀' type='가젯 유형'>   

이런 모습이 되겠죠.

이 mobile='조건' 이란 속성은 'yes'란 값 외에

mobile='no'     -    모바일에서 표시되지 않도록 설정

또는,

mobile='only'   -    모바일에서만 표시되도록 설정

라는 값으로도 설정할 수 있습니다.


시험 삼아서 제 테스트용 블로그의 위젯에 mobile='yes'라는 구문을 추가해봤습니다.

그림2

이렇게 구문을 추가하고,

그림3

모바일 템플릿을 사용자 지정으로 설정해주었더니,

그림4

위젯이 원하는 대로 출력되었습니다.

블로거 포스트 이미지에 투명 효과 주기

CSS transition의 opacity 속성을 이용하여 블로거 포스트 이미지에 마우스를 갖다대면 약간의 투명효과를 주는, 간단한 코드를 소개합니다.

CSS의 동적인 효과를 말로 설명하는데에는 한계가 있으므로, 데모를 먼저 보시기 바랍니다.

데모

두 가지 방식이 가능합니다.

하나는 데모 사이트에서처럼 이미지에 마우스 커서를 올리면 이미지가 일정 % 투명하게 변화는 방식이고, (아래 그림에서 그림2 에서 그림1로 변화)

다른 하나는 역으로, 처음부터 일정 % 투명처리된 이미지를 먼저 보여준 후 독자가 마우스를 갖다대면 정상이미지로 전환하는 방식입니다. (그림1에서 그림2로 변화)

그림1

그림2

첫번째 방식, 즉 [그림2 → 그림1]로 변화를 주는 코드는 아래와 같습니다.

 .post-body img {  
 opacity:1.0;  
 -webkit-transition: all 0.3s;  
 -moz-transition: all 0.3s;  
 -ms-transition: all 0.3s;  
 -o-transition: all 0.3s;  
 transition: all 0.3s;  
 }  
    
 .post-body img:hover {  
 opacity:0.7;  
 }  

<코드 출처 stramaxon >

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS 추가] 입니다. 투명 정도를 설정하고 싶다면 'opacity:0.7;' 이라고 적힌 부분을 조정하시기 바랍니다.

두번째 방식, 즉 [그림1 → 그림2] 로 변화를 주려면 같은 위치에 아래의 코드를 대신 입력합니다.

 .post-body img {  
 opacity:0.7;  
 -webkit-transition: all 0.3s;  
 -moz-transition: all 0.3s;  
 -ms-transition: all 0.3s;  
 -o-transition: all 0.3s;  
 transition: all 0.3s;  
 }  
    
 .post-body img:hover {  
 opacity:1.0;  
 }  

<코드 출처 stramaxon >

CSS의 overflow 사용 예제

overflow는 영역을 벗어난 컨텐츠를 어떻게 보여줄 것인가를 설정하는 속성이다.

overflow 사용 예제

 div  
 {  
 overflow:visible;  
 }  

overflow의 값 :

1. visible

visible 사용의 예

영역에서 벗어난 부분을 자르거나 숨기지 말고 그대로 보여준다.

2. hidden

hidden 사용의 예

잘린 부분을 보여주지 않는다.

3. scroll

scroll 사용의 예

잘리든 잘리지 않든 스크롤로 처리한다. 위 그림에서 잘린 세로 영역 뿐만 아니라, 잘리지 않은 가로 영역에도 스크롤이 생긴 것에 주목.

4. auto

auto 사용의 예

벗어난 부분이 있으면 자동으로 스크롤을 생성한다.

5. inherit

상위의 단계에서 설정된 값을 물려받는다.

CSS의 transition을 이용한 링크 색상의 부드러운 전환

그림1

지금 제 블로그에서 탭 메뉴에 마우스 커서를 올려보시면, 검은색에서 청색으로의 색상 전환이나 흰색 화살표의 움직임이 마우스를 올리자마자 즉각적으로 이루어지는 것이 아니라 (비록 짧은 시간이긴 하지만) 점진적으로 이루어지는 것을 보실 수 있습니다.

이는 CSS의 transition이라는 속성을 이용했기 때문인데요. CSS의 transition을 이용하면 모양이나 색상의 변화를 시간을 두고, 마치 애니메이션처럼 부드럽게 할 수 있습니다.

이 블로그는 제가 여러가지 코드들을 배우고, 또 테스트 해보는 공간이기도 하므로, 저 탭 메뉴가 1년 뒤에도 그대로 있으리라는 보장이 없습니다. 훗날 템플릿이 바뀐 상태에서 이 글을 보는 분들을 위해 예가 될 수 있는 다른 페이지를 링크해두겠습니다.

transition 적용의 예 :
http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
http://everhooddesign.com/node/39
http://css3.bradshawenterprises.com/transitions/

그림2

블로그나 웹사이트에서 색상 전환을 가장 쉽게 접하는 경로 중 하나가 바로 링크 위에 마우스 커서를 올리는 경우인데요. 아래의 코드는 transition 속성을 이용하여 블로거에서 텍스트 링크에 마우스커서를 올렸을 때, 색상 전환을 부드럽게 만들어 줍니다.

 a { color:#2580a2;   
  -moz-transition:color .2s ease;   
  -o-transition:color .2s ease;   
  -ms-transition:color .2s ease;   
  -webkit-transition:color .2s ease;   
  transition:color .2s ease;   
  } a:hover { color:#666666; }  

코드 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.

첫번째 줄의 색상(2580a2)은 링크에 마우스를 올리기 전의 색상이고, 마지막 줄의 색상(666666)은 링크에 마우스를 올렸을 때의 색상입니다. 자신이 원하는 색상으로 대체해 줍니다.

CSS의 transition 속성은 잘 공부해두면, 블로거를 동적으로 만드는데 상당히 유용할 것 같습니다. 저는 CSS 마스터까지는 필요 없고, 내가 삽입하는 코드들이 어떤 의미를 가지고 있고 어떻게 변형이나 편집이 가능한가 정도를 이해할 수 있을 정도면 만족합니다. 그런 의미에서 위의 코드들을 조금 뜯어보자면,

앞의 -moz-니 -o-니 하는 단어들은 특정 브라우저에서 transition 속성이 작동하도록 지원해주는 접두사입니다. 여기에 대해서는 CSS 브라우저 지원 접두사들 이라는 글에서 정리를 해두었습니다.

transition:color는 색상의 전환을 지정하는 속성이고, 우리가 재량적으로 설정할 수 있는 부분은 앞에서 언급한 색상, 그리고 '.2s', 'ease'라고 적혀있는 부분입니다.

'.2s'는 변화가 몇초에 걸쳐 일어날지를 설정하는 부분입니다. 10s(10s는 10초), 5.5s, 1.5s, .5s, .25s 등등 자신이 원하는 속도로 설정할 수 있습니다.

'ease'는 변화가 어떤 형식으로 이루어질지를 설정하는 값입니다. ease 외에 linear, ease-in, ease-out, ease-in-out 등으로 대체할 수 있으며, 값에 따라서 처음부터 끝까지 같은 속도로 변할 지 아니면 처음엔 느리게 변하다가 뒤에는 빠르게 변할지 등등으로 설정할 수 있습니다. 이에 대한 설명과 예는 아래의 링크에서 자세히 살펴보시기 바랍니다.

http://htmlcss.kr/?s=transition
http://htmlcss.kr/css3/transition/transition-timing-function/

블로그 보관함 위젯의 드롭다운 메뉴 너비 설정

그림1

블로거에서 '블로그 보관함' 위젯을 사용할 때 어떤 형식으로 표시할지 3가지 스타일을 설정할 수 있습니다. 이 때 드롭다운 메뉴를 선택하면 <그림2>처럼 드롭다운 형식으로 표시되는데요.

그림2

그림3

<그림3>에서처럼 사이드바의 너비와 드롭다운 메뉴의 너비가 맞지 않는 경우가 있습니다.

그림4

<그림4>처럼 드롭다운 메뉴의 너비를 조정하려면 아래의 코드를 [대시보드→템플릿→맞춤설정→고급→CSS추가] 에 삽입해주면 됩니다.

 #BlogArchive1_ArchiveMenu {  
   width: 160px;  
 }  

삽입할 때 두번째 줄의 수치 '160'을 자신이 원하는 수치로 대체해 줍니다.