article search result of '티스토리 툭탁툭탁' : 43

  1. 2015.04.09 fontawesome 다운받아 이용하는 법
  2. 2015.03.20 font awesome 사용법(웹 아이콘 이용하기)
  3. 2015.03.18 부트스트랩 사용법 (glyphicons 아이콘 넣기)
  4. 2014.12.26 웹사이트 운영자라면 알아야할 html, css 상식
  5. 2014.12.15 블로그 개설 1주년을 맞이하여 (3)
  6. 2014.12.05 [css3] 디자인이 예쁜 드롭다운 메뉴(6가지 배포)
  7. 2014.12.05 드롭다운 메뉴 만들기 (3단 수평 메뉴편) (3)
  8. 2014.12.03 드롭다운 메뉴 만들기(2단 수평 메뉴편) (2)
  9. 2014.12.02 드롭다운 메뉴 만들기 (2단 수직 메뉴편) (1)
  10. 2014.11.28 [css]드롭다운 메뉴 만들기(기초)
  11. 2014.09.29 지구별 안내서, 오픈캐스트 구독자수 천명 돌파!
  12. 2014.08.29 [html] blockquote 태그(인용문 꾸미기 5가지)
  13. 2014.08.28 [html/css] 수직선 그리는법 2가지(인용문 앞에 활용)
  14. 2014.08.11 티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유
  15. 2014.08.09 나눔고딕 웹폰트 적용, 제대로 배우기
  16. 2014.07.23 동영상(MP4) mp3로 변환하기
  17. 2014.07.22 [배포완료]지구별 안내서, 티스토리 초대장 배포 합니다 (36)
  18. 2014.07.06 지구별 안내서 네이버 오픈캐스트 활용법
  19. 2014.06.03 RSS 무단 수집 주의하세요(RSS 부분 공개하는 방법)
  20. 2014.05.12 티스토리 4개월 하며 느낀 점(순수 VS 수익형 블로그) (18)

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

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.03.20 13:11

부트스트랩 사용법 (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.03.18 15:23

웹사이트 운영자라면 알아야할 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

블로그 개설 1주년을 맞이하여

 

 

블로그 개설 1주년을 맞이하여

 

(부제: 네이버 오픈캐스트 메인과 저품질 현상)

 

 

다음 주 25일이면 블로그 개설 1주년이 되는 날이네요.

 

작년 12월 25일에 왜 갑자기 블로그를 만들었는지 지금 생각하면 갸우뚱 한데...^^

 

만들어 놓고 본격적으로 글을 쓴 것은 2개월 정도 지나서인 것 같아요.

 

그래도 개설일에 의미가 있으므로 이 날을 기념한 기록을 남겨두고 싶습니다.

 

 

티스토리 제목 변경사

 

제 블로그는 처음에 책이나 도서관 등 책 관련 리뷰와 정보를 전달할 목적으로 만들었습니다.

 

그래서 처음 제 티스토리 이름은 '고요한 책 한 권' 이었습니다.

 

아직도 오른쪽 사이드바에는 책 관련 메뉴가 맨 앞에 차지하고 있습니다.

 

지금은 이 메뉴에 들어가는 글의 수가 손에 꼽을 정도라 무슨 잔해 같은 느낌이 들기도 하지만

 

간혹 책 관련 행사나, 도서전, 의미 있는 사건들은 남기려고 노력하고 있어요.

 

책을 매니아들처럼  좋아하거나 많이 읽은 사람은 아니었는데 이런 주제를 다루다 보면

 

좀 더 책을 다양하게 읽을 수 있겠지 하는 욕심도 있었어요.

 

하지만 1개월 정도 운영하다 보니, 책으로 검색해서 들어오는 방문자가 너무 적어...

 

책 뿐만 아니라 영화, 음악 등 문화나 각종 생활 리뷰를 담으려고 '지구별 안내서'란 제목으로

 

바꾸었습니다. 블로그에 뭘 담아내도 다 될 것 같은 제목으로요 ㅎㅎ

 

 

html, css 관련 블로그로

 

그러면서 10여년 전에 잠시 배웠던 html도 생각이 나 html, css  카테고리를 추가했습니다.

 

그때까지 부수적이었던 html, css 였는데 글을 쓰다 보니 새롭게 바뀐 것이 너무 많고

 

(제가 배울 당시에 css란 단어는 들어보지도 못한 듯...)

 

새로운 것들이 오히려 더 많아서, 새롭게 공부하면서 글을 쓰기 시작했어요.

 

저는 애드센스를 통해 자그마한 수익을 창출하고 싶은 블로거 였기에...

 

글을 쓰고 싶을 적만 쓰지 못했고, 써야만 한다는 반강제적인 마음으로

 

일주일에 4회 정도를 발행하려고 노력했습니다.

 

중간 중간에 생활 리뷰도 중간에 끼워서요.... 

 

 

지구별 안내서 새로운 전환기, 네이버 오픈캐스트

 

블로그를 좀 더 널리 알리고, 방문자 수를 늘려보고자, 네이버 오픈캐스트도 발행하기 시작했습니다.

 

처음에 별 기대 없이 시작했지만, 오픈캐스트 2회 발행 후 1회가 네이버 메인에 노출이 되었습니다.

 

깜짝 놀랐고, 정말로 기뻤고요^^ 내 글이 정말 메인에 나가도 될 만한 좋은 글인가? 란 생각도 들었어요

 

처음에도 대충 대충 글을 쓴 건 아니었지만, 부끄럽지 않으려고 좀 더 양질의 컨텐츠를 작성하려고

 

노력 했어요.

 

그 이후 점점 제 블로그에 다른 리뷰 관련 글이 줄고 html, css 관련글이 점점 많아지게 됩니다.

 

html, css 관련 방문자가 아주 많으냐 하면... 생활 리뷰보다 훨씬 적은 것이 사실이지만...

 

관련 글을 쓰면서 배우는 기쁨과, 배운 것을 나눌 수 있는 보람이 있고요.

 

나중에 저의 지식이 성숙된다면 책도 내볼 수 있지 않을까 하는 희망이 있어요.

 

또  오픈캐스트 메인이 되면 1,000명에서 1,500명 정도 방문자가 더 들어오니 애드센스 수익에도 조금

 

도움이 됩니다.

 

 

[지구별 안내서 오픈캐스트 바로가기]

 

 

3주째 저품질 현상

 

그런데 3주 전부터 갑자기 네이버 검색 유입이 줄더니 그 이튿날 아예 네이버 검색 유입이 사라졌습니다

 

직접 네이버에서 제 글을 조회해 보면 모든 글이, 주소로 조회해야 제 글이 나오고

 

몇 페이지에 있는지조차 찾을 수 없는 저품질 현상이 보이고 있습니다.

 

네이버에 별다른 소통 창구가 없기 때문에 모바일 '의견보내기'에 두 번에 걸쳐 사정을 설명한

 

글을 보내보았지만 그 이후로도 아무 변화가 없네요

 

하지만 그 와중에도 오픈캐스트 메인은 되고 있으니 정말 감사하지만

 

저품질 현상과 오픈캐스트 메인이 어떻게 동시에 가능한지....

 

제 블로그의 저품질 현상은 순전히 기계적인 시스템에 의한 오류라고 저는 생각하고 있습니다.

 

혹 관계자가 보신다면 확인이라도 해주시길 바라는 마음에 한 줄 남겨 보았습니다.

 

 

앞으로 지구별 안내서의 향방

 

앞으로도 저의 블로그는 html, css 관련글이 주가 될 것 같아 보입니다.

 

현재는 html 태그와, css 속성은 많은 부분 다루었습니다.

 

html5와 css3 속성은 아직 더 써야할 부분이 많고요.

 

오픈캐스트 구독자를 보면, 실용적으로 써먹을 수 있는 글들을 좋아하시는 것 같아

 

기초적인 부분뿐 아니라 실용적인 면도 보완해야겠어요.

 

그동안 저의 블로그를 방문해주시고, 구독해주신 분들에게 정말 감사드리고,

 

앞으로도 지구별 안내서 자주 방문해 주세요 ^___________^

 

 

방문 방법: 

 

네이버 회원일 경우, 오픈캐스트  http://opencast.naver.com/IT741

 

즐겨찾기 : http://aboooks.tistory.com/

 

 

티스토리 4개월 하며 느낀 점(순수 VS 수익형 블로그)

 

지구별 안내서 네이버 오픈캐스트 활용법

 

지구별 안내서, 네이버 오픈캐스트 메인에 선정되다

 

 

지구별에
티스토리 툭탁툭탁 2014.12.15 15:44

[css3] 디자인이 예쁜 드롭다운 메뉴(6가지 배포)

 

 

[css3] 디자인이 예쁜 드롭다운 메뉴(6가지 배포)

 

지금까지 드롭다운 메뉴 만들기를 3단까지 모두 배웠습니다.

 

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

 

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

 

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

 

 

오늘은 CSS3의 속성들을 이용해서 디자인까지 고려하여

 

드롭다운 메뉴를 만들어 보겠습니다.

 

우선 드롭다운 메뉴를 만드는 html/css 작성법이 여러가지가 있겠지만

 

이 사람은 이렇게 만드는구나 정도로 생각해주시면 고맙겠습니다.^^

 

이 소스들을 다운 받아서 자유롭게 편집해서 사용하실 수 있습니다.

 

(단, 이 소스를 그대로 다운받아  배포하는 것은 금지)

 

모든 브라우저를 확인해 보진 못했고, ie7, chrome 39.0, Firefox 33.1 에서 정상 작동하는 것을 확인했습니다.

 

물론 css3를 지원하지 않는 브라우저에서는 박스 그림자나, 둥근 모서리 등의 효과가 나오지 않지만요...^^

 

그리고, 메뉴에 마우스 오버가 아니라 클릭했을 때 부메뉴가 나오는 방식은

 

제가 좀 더 공부해서 관련 글을 작성해 보도록 할게요.^^ 
 

 

Ⅰ. 2단 드롭다운 메뉴(border-radius 활용) 

 

border-radius를 사용하여 외곽선을 부드럽게 처리한 것이 특징입니다.

 

또한 1단 메뉴와 2단 메뉴가 배경 색을 달리 사용하였고, 끝처리도 조금 틀립니다.

 

소스는 각 이미지 밑에 파일 다운 받아 활용하세요

 

 

dropdown 2단(radius).htm

 

 

Ⅱ.  2단 드롭다운 메뉴(border-radius 활용 2) 

 

마찬가지로 border-radius를 사용했고, 이렇게 원형이 되려면 너비, 높이가 같은 값이어야 합니다.

 

신호등처럼 각 메뉴를 노색, 빨간, 초록으로 달리 표시해도 좋을 것 같아요.

 

  

dropdown 2단(원형).htm

 


 

Ⅲ. 2단 드롭다운 메뉴(box-shadow 활용)

 

박스에 그림자 효과를 사용해서 입체적으로 보이게 했습니다.

 

아래 링크 참조하시면 그림자를 만드는 다양한 방법이 나옵니다.

 

box-shadow 속성(그림자 효과)

 

  dropdown 2단(3d).htm

 

Ⅳ. 2단 드롭다운 메뉴(box-shadow 활용 2)

 

 

 

dropdown 2단(shadow).htm

 

Ⅴ. 3단 드롭다운 메뉴(simple)

 

디자인이 심플합니다.

 

 

dropdown3단(simple).htm

 

 

Ⅵ. 3단 드롭다운 메뉴(simple2)

 

이것 역시, box-shadow 속성을 활용했습니다.

 

 

 

dropdown3단(simple)후광.htm

 

 

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

 

box-sizing 속성

 

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

 

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

 

 

지구별에
티스토리 툭탁툭탁 2014.12.05 12:45

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

 

 

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

 

드롭다운 메뉴 만들기 기초편부터 2단 메뉴 만들기까지 배워보았는데요

 

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

 

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

 

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

 

 

오늘은 응용편 정도가 되겠네요.

 

3단 수직 메뉴는 비교적 쉬운 것 같아 여기서는 3단 수평 메뉴 만들기를 배워보겠습니다.

 

 

 

 

우선, 3단 메뉴 만들기

 

html

<ul class="one">
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a>
    <ul class="two">
       <li><a href="#">sub1</a></li>
       <li><a href="#">sub2</a></li>
       <li><a href="#">sub3</a>
        <ul class="three">
         <li><a href="#">sub3-1</a></li>
         <li><a href="#">sub3-2</a></li>
         <li><a href="#">sub3-3</a></li>
       </ul>
       </li>
    </ul>
  </li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu4</a></li>
  <li><a href="#">menu5</a></li>
</ul>

 

 

파란색이 1단, 초록색이 2단, 빨간색이 3단 입니다.

 

div에 메뉴를 넣어 완성시키면 대략 이런 형태가 나옵니다

 

html

<div id="header">

위의 메뉴

</div>

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

 

 

목록 관련 css

 ul{list-style:none; margin:0px; padding:0px;border:1px solid #D5D5D5;} /*목록 머리기호 없애고 여백값 초기화*/
.one{float:left;}/* 전체 메뉴를 float 시킴 */
.one > li{float:left;}   /*1단 메뉴를 일렬로 늘어놓기 */
.one ul{display:none;}  /*2단, 3단 메뉴를 숨기기 */
.one li:hover > ul {display:block;}  /*주 메뉴에 마우스 오버했을 때 부 메뉴 드러내가 */
.two{position:absolute;left:90px; top: 29px; } 
.three{position:absolute;left:90px; top: 60px; } 

 

 



※설명※

  

전체 메뉴를 float 시키기

 

.one{float:left;}

 

1단 메뉴를 일렬로 늘어놓기 (2단, 3단에 영향을 미치지 않음)

 

.one > li{float: left;}

 

☞ 자식 선택자 '>'을 사용

 

2단, 3단 메뉴 숨기기

 

.one ul{display:none;}

 

자손 선택자 공백(space)를 사용했으므로, 2단, 3단에 영향을 미침

 

1단 메뉴에 마우스 오버했을 때 2단이 드러나고, 2단 메뉴에 마우스 오버했을 때 3단 드러내기

 

.one li:hover > ul {display:block;} 

 

.one li 에는 자손선택자를 사용했으므로 .two li에도 영향을 미침.

 

하지만 li:hover > ul 에서는 자식선택자이므로, 1단씩만 드러나게 됨.

 

2단 메뉴의 절대 위치 설정

 

.two{position:absolute;left:90px; top: 29px; } 

left와 top 값은 알맞게 조절합니다.

 

3단 메뉴의 절대 위치 설정

 

.three{position:absolute;left:90px; top: 60px; } 

 

스타일 관련 css와 float 해제 관련 소스는 전 시간 2단 메뉴 만들기에서 배운 것과 같아

 

별도로 설명하지 않겠습니다.

 

▶실행 화면

 

sub3에 마우스 오버했을 때 화면 입니다.

( ie7, chrome 39.0, Firefox 33.1 에서 테스트 했습니다)

 

소스 다운 받아 실행해 보세요~ dropdown3단메뉴(수평).htm

 

   

자손 선택자, 자식 선택자 차이

 

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

 

:before , :after 가상 요소

 

[css] content 속성 사용법

지구별에
티스토리 툭탁툭탁 2014.12.05 10:28

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

 

 

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

 

지난 시간엔 비교적 쉬운 2단 수직 메뉴 만들기를 배웠습니다.

 

수평 메뉴는 좀 더 복잡하므로, 앞 강좌를 미리 공부하시고 오면 좋을 것 같아요

 

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

 

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

 

 

수평 메뉴 만드는 방법은 수직 메뉴편에서 본 것과 동일합니다.

 

1. 2단 메뉴 만들기

 

html

<ul class="one"> 
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a>
    <ul>
       <li><a href="#">sub menu1</a></li>
       <li><a href="#">sub menu2</a></li>
       <li><a href="#">sub menu3</a></li>
    </ul>
  </li>
  <li><a href="#">menu3</a></li>
</ul>

 

 

지난 시간과 달라진 점이 있다면 1단 메뉴에 클래스명이 붙었다는 것인데요,

 

3단, 4단 메뉴 등 계층구조가 좀 더 복잡해질수록 id나 class명을 붙여 이용하는 것이 좋습니다.

 

css

ul{list-style:none; margin:0px; padding:0px;}

 

목록 머리기호를 없애고, 여백값을 초기화 합니다.

 

 

2. 목록을 가로로 늘어놓기

 

지난 시간에 배운 대로 display:inline 또는 inline-block, inline-table, 그리고 float 등 다양한데

 

저는 목록을 일렬로 늘어놓기 위해 float를 사용 했습니다.

 

.one{float:left;}   /*일단 블록 요소인 목록을 옆으로 늘어놓고*/
.one > li{float:left;}    /*각각의 메뉴도 옆으로 늘어놓습니다*/

 

자식 선택자 '>'를 사용한 이유는?

 

만일 .one li{float:left:} 라고 자손 선택자 '공백 기호'를 사용하면

 

2단 메뉴 또한 가로로 늘어서기 때문.

 

[자식 선택자와 자손 선택자의 차이]

 

 .one > li{float:left;} 실행화면

 

 .one  li{float:left;} 실행화면

 

 

3. 2단 메뉴 숨기기

 

.one ul{display:none;}

 

 

4. 1단 메뉴에 마우스 오버했을 때 2단 메뉴 드러내기

 

.one li:hover > ul {display:block;}

 

그런데 위에 이미지를 보면, menu2에 마우스 오버했을 때, menu3이 이동합니다.

 

수직 메뉴편에서도 배운 것처럼 이때 2단 메뉴에 절대 위치를 설정합니다

상단, 하단 위치는 알맞게 조절합니다.

 

position:absolute;

left:90px;

top: 25px;

 

전체 css

 ul{list-style:none; margin:0px; padding:0px;}
.one{float:left;}
.one > li{float:left;}
.one ul{display:none;position:absolute;left:90px; top:25px; }
.one li:hover > ul {display:block;}

 

▶실행화면입니다 

-menu2에 마우스 오버했을 때 화면-

 

생각보다 쉽죠? ㅎㅎ

 

 

▶ TIP

 

각 메뉴의 너비와 배경색 설정

 

li {width:90px;background-color:#B5B2FF;} 

 

메뉴에 마우스 오버했을 때 색상 바꾸기

 

li:hover{background-color:#FFE08C;}

 

링크를 블록 요소로 만들어 너비, 높이 설정하기

 

a{display:block; width:90px;height: 30px}

 



링크 밑줄 없애기

 

a{text-decoration:none;}

 

a 영역의 세로 중앙 정렬 (a의 높이값과 동일하게 설정)

 

a{line-height: 30px;} 

 

a 영역의 가로 중앙 정렬{text-align 속성을 사용, 하지만 text-align은 블록 요소에만 적용)

 

a{display:block: text-align:center;}

 

지난 시간엔 a의 상위 요소인 ul에 text-align 속성을 적용했는데, 위처럼 해도 먹히네요.
 

 

스타일과 관련된 전체 css

ul li a{text-decoration:none; display:block; width:90px;height: 30px;line-height: 30px;text-align:center;}
ul li {width:90px;background-color:#B5B2FF;} 
ul li:hover{background-color:#FFE08C;}

 

▶실행화면

 

 

 

 

5. float 해제하기

 

그런데 .one 이라는 클래스명을 지닌 목록이 현재 float 상태이므로 다음 요소에도 영향을 미칩니다.

 

다음 요소가 옆으로 따라 붙지 않도록 float를 취소하는 과정이 남아 있습니다.

 

메뉴가 들어간 #header, 본문 #contents, 저작권 정보등이 들어간 #footer div를 만들어

 

float 해제 방법을 알아보겠습니다.

 

html

<div id="header">
<ul class="one">
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a>
    <ul>
       <li><a href="#">sub menu1</a></li>
       <li><a href="#">sub menu2</a></li>
       <li><a href="#">sub menu3</a></li>
    </ul>
  </li>
  <li><a href="#">menu3</a></li>
</ul>
</div>
<div id="contents">
본문
</div>

 <div id="footer">
designed by 지구별에
</div>

 


css

#header {position:relative;margin-left:5px;zoom:1;}
#header:before, #header:after{content: " "; display: block;}
#header:after{clear: both;}

#contents{border:1px solid green; width:50%; height: 300px;float:left;margin:5px;}
#footer{border:1px solid green; width:50%; height: 30px; clear:both;margin-left:5px;}

 

현재 위 div에서 #header 안에 .one 목록과 #contents 가 float 상태입니다.

 

#contents 의 float는 바로 이후 요소(#footer)에 clear:both를 통해 취소하면 됩니다.

 

#header의 float는 :before :after 가상 요소를 통해 취소하였습니다.

 

#header:before, #header:after{content: " "; display: block;}
#header:after{clear: both;}

 

zoom:1 은 ie6.7 버전 지원을 위해.

 

자세한 설명은 아래 링크를 참조하시면 도움이 됩니다.

 

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

 

[2단 수평 메뉴 만들기 완성 화면]

 

 

 소스 다운 받아 실행해 보세요~ 드롭다운 메뉴만들기 수평편.htm

 

 

 

 

float 속성에 대하여

 

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

 

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

 

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

 

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

 

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

 

 

지구별에
티스토리 툭탁툭탁 2014.12.03 11:47

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

 

 

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

 

지난 시간엔 단순한 메뉴 만들기를 배웠습니다.

 

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

 

 

[링크를 가진 단순 메뉴]

 

<ul>

  <li><a href="#">menu1</a></li>

  <li><a href="#">menu2</a></li>

  <li><a href="#">menu3</a></li>

</ul>

 

이것을 1단 메뉴라고 한다면, 주 메뉴를 클릭했을 때 부 메뉴가 나오는 2단 메뉴를 만들면 다음과 같습니다.

 

 

[2단 메뉴 만들기]

 

1. 2단 목록 만들기

 

html

<ul> 
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a>
    <ul>
       <li><a href="#">sub menu1</a></li>
       <li><a href="#">sub menu2</a></li>
       <li><a href="#">sub menu3</a></li>
    </ul>
  </li>
  <li><a href="#">menu3</a></li>
</ul>

 

파란색이 1단 메뉴라면 빨간색 부분이 2단 메뉴에 해당

 

▶실행화면

 

우선 2단 메뉴를 숨겨 놓고, 1단 메뉴에 마우스 오버했을 때 부 메뉴를 드러내야 되겠지요.

 

 

2.  부 메뉴를 숨겨 놓기

 

ul ul {display:none;}

 

 

3. 주 메뉴에 마우스 오버했을 때 부 메뉴 표시하기

 

ul li:hover > ul {display:block;}

 

 

전체 css

ul ul{display:none;}
ul li:hover > ul {display:block;}

 

 ▶실행화면

        - 주 메뉴 - 

       -주 메뉴에 마우스 오버했을 때-

 

 

위 이미지를 보면, menu2를 클릭했을 때 menu3이 아래로 내려갑니다.

 

이번엔 menu2를 클릭했을 때 menu3은 변동이 없고 부 메뉴를 바로 옆에 출력되도록 해 보겠습니다.

 

 

일단 지난 시간에 배운대로, 목록 머리 기호를 없애고, margin, padding 값을 초기화 했습니다.

 

ul{list-style:none;margin:0px; padding:0px;}

 

또한 주 메뉴를 상대 위치에 자리잡게 하고

 

position:relative

 

부 메뉴는 절대 위치에 자리잡게 합니다. 왼쪽과 상단 위치는 알맞게 조절합니다.

 

position:absolute;

left: 60px;

top: 20px;

 



전체 css

ul{list-style:none;margin:0px; padding:0px;position:relative;}
ul ul{display:none;position:absolute; left: 60px; top: 20px;}
ul li:hover > ul {display:block;}

 

▶실행 화면

 - 주 메뉴 -

-주 메뉴에 마우스 오버했을 때-

 

 

 TIP.

 

링크 영역의 너비와 높이 지정하려면 우선 블록 요소로 만들어야 합니다.

 

a {display:block; width: 80px; height: 30px;}

 

 

a 영역을 세로로 중앙 정렬 하려면 line-height 값을 height 값과 같게 합니다.

 

a{line-height: 30px;}

 

 

a 영역을 가로로 중앙 정렬 하려면 text-align 속성을 사용하는데, text-align 은 블록 요소에 씁니다

 

ul{text-align: center;}

 

보통 수직 메뉴를 쓰는 것은, 사이드 바에 메뉴가 있을 때 입니다.

 

왼쪽에 div를 만들어 사이드메뉴를 넣고, 그 옆에 나란히 본문 div를 위치 시키려면

 

float: left를 씁니다.

 

#sidebar{float:left;} #contents{float:left;}

 

 

전체 html

<div id="sidebar">
<ul>
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a>
    <ul>
       <li><a href="3">sub menu1</a></li>
       <li><a href="3">sub menu2</a></li>
       <li><a href="3">sub menu3</a></li>
    </ul>
  </li>
  <li><a href="#">menu3</a></li>
</ul>
</div>
<div id="contents">
본문
</div>

 

css

#sidebar{float:left;}
#contents{float:left;width:500px; height: 300px;border:1px solid green;} 
ul{list-style:none;margin:0px; padding:0px;position:relative;text-align:center;}
ul li a{text-decoration:none;display:block; width:80px;height: 35px; line-height:35px;}
li{width:80px;background-color:#9FC93C;}
ul li:hover{background-color:#D4F4FA;}
ul ul{display:none;position:absolute; left: 80px; top: 35px;}
ul li:hover > ul {display:block;}

 

▶실행화면

 

-초기화면-

-주 메뉴에 마우스 오버했을 때-

 

소스는 다운 받아 실행해 보세요  drop-down(수직편).htm

 

이번 시간엔 비교적 난이도가 쉬운 2단 수직 메뉴 만들기를 배웠습니다.

 

다음 시간엔 2단 수평 메뉴 만들기를 배워보겠습니다~ 기대해주세요~~

 

 

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

 

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

 

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

 

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

 

지구별에
티스토리 툭탁툭탁 2014.12.02 11:19

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

 

 

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

 

드롭다운 메뉴 dropdown menu란, 상단이나 좌측 또는 우측의 메뉴를 클릭했을 때

 

하위 메뉴로 늘어지는 계층화된 형태의 메뉴를 말합니다.

 

오늘은 가장 기초적인 메뉴 만들기를 배워 보고

 

다음 시간엔 주 메뉴를 클릭했을 때 부 메뉴가 나오는 방식을 배워 보겠습니다.

 

  

 

수직 메뉴 만들기

 

각각의 메뉴를 만들 때는 목록 태그를 이용 합니다.

 

1. 목록 만들기

 

html

<ul>

  <li>홈페이지</li>

  <li>방명록</li>

  <li>전체 글 목록</li>

</ul>

 

 

실행 화면

  • 홈페이지
  • 방명록
  • 전체 글 목록

 

목록을 만드는  ul, ol, li 태그

 

 

2. 머리 기호 없애기 

 

메뉴 앞에 머리 기호를 없애려면 list-style:none을 사용합니다.

 

css

ul{list-style:none;}

 

 

실행화면

  • 홈페이지
  • 방명록
  • 전체 글 목록

 

list-style 속성 배우기

 

 

3. ul의 기본 여백 초기화

 

브라우저마다 다른 ul의 여백 기본값을 초기화 하기 위해 margin:0px padding:0px를 추가합니다.

 

css

ul{

list-style:none;

margin: 0px;

padding: 0px; 

}

 

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

 

메뉴로서 기능을 하려면, 각 메뉴를 크릭했을 때 해당 글로 이동해야 합니다.

 

 

4. 링크 만들기

 

html

<ul>

  <li><a href="#">홈페이지</a></li>

  <li><a href="#">방명록</a></li>

  <li><a href="#">전체 글 목록</a></li>

</ul>

 

실행화면

 

문서를 연결하는 a 태그 (href, title, target 속성)

 

위 실행화면을 보면, 링크를 클릭했을 때 텍스트만 클릭이 됩니다.

 

 

5. a 요소를 block 요소로 만들기

 

텍스트를 벗어나 메뉴를 클릭해도 이동할 수 있도록 a 요소를 block 요소로 만들어 줍니다.

 

또한 블록 요소일 때 너비 설정도 가능합니다.

 

css

ul{list-style:none;}

a{display:block; width: 100px;} 

 



실행화면

 

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

 

 

지금까지 수직 형태의 메뉴를 만들어 보았는데 수평 메뉴를 만들어 보겠습니다.

 

 

수평 메뉴 만들기

 

1. 목록 만들기

 

html

<ul>

  <li>홈페이지</li>

  <li>방명록</li>

  <li>전체 글 목록</li>

</ul>

 

 

2. 목록을 수평으로 늘어놓기

 

목록 태그 ul은 블록 요소로 수직으로 늘어서 있는데요 수평으로 만들려면

 

display: inline 혹은 inline-block으로 만들거나 float 시킵니다.

 

  2-1. display: inline

 

css

li{display:inline;}

 

실행화면

 

  2-2. display: inline-block

 

inline과 다르게 inline-block 의 경우 너비값 설정도 가능합니다

 

css

li{display:inline-block; width: 100px;}

 

 

  2-3. float

 

li 요소를 float 시킨 후에

 

a 요소를 블록 요소로 만들어 너비값을 줄 수 있습니다.

 

css

li{float:left;}

a{display:block;width:100px;}

 

실행화면

 

float 요소는 이후 요소에도 영향을 미치기 때문에 float를 취소하려면 아래 링크 참조해 주세요.

 

float 속성에 대하여

 

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

 

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

 

 

TIP.

 

a 링크 밑줄 없애기

 

a{text-decoration:none;} 이라고 하면 밑줄이 없어집니다.

 

a 링크 색상 바꾸기

 

a{color:white;}

 

a링크에 마우스 오버 했을 때 색상 바꾸기

 

a:hover{color: black;}

 

목록 배경색 바꾸기

 

li{background-color:blue;}

 

마우스 오버했을 때 목록 배경색 바꾸기

 

li:hover{background-color:green;}

 

소스는 다운 받아 활용하세요 drop-down.htm

 

 

 

지구별에
티스토리 툭탁툭탁 2014.11.28 10:46

지구별 안내서, 오픈캐스트 구독자수 천명 돌파!

 

 

지구별 안내서, 오픈캐스트 구독자수 천명 돌파!

 

방문자수를 조금이나마 늘려 보고자 시작하게 된 '네이버 오픈케스트'

 

운영한지 5개월 정도 되어 가는데, 구독자 수 1,000명 돌파를 했습니다. ^_^

 

 

그동안 오픈캐스트를 일주일에 한 번 정도 발행 하려고 노력했고,

 

(한 두 번 발행할 글이 모자라서 빠지긴 했지만)

 

감사하게도 발행글에 비해 메인도 비교적 자주 되지 않았나 싶습니다.

 

지난주에는 일요일에 되었고요. 오픈캐스트가 메인이 되었을 때

 

방문자 수는 약 1천 명에서 2천 명 정도가 늘었습니다.

 

오픈캐스트는 주말보다는 평일에 메인이 되었을 때 구독자나 방문자가 더 많았습니다.

 

또 평일이나 주말 상관 없이 컨텐츠 구성이 좋으면, 구독자가 더 많이 생기고요.

 

IT 관련 글이다 보니 구독자가 다른 분야에 비해 아주 많지는 않지만

 

그래도 어떤 내용들을 좋아하시는지 분석해 보면 ,

 

-아주 전문적이거나 어려운 내용보다는 보편적이거나 기초적인 내용을

 

-이론적인 내용보다 활용해서 써 먹울 수 있는 실용적인 내용을 좋아하시는 것 같습니다.

 

-그리고, 전문적이지만 꼭 필요한 내용, 다른 곳에서 흔히 찾기 어려운 내용일 때

 

구독자가 더 느는 경향이 있었습니다.

 

 

구독자가 생기면 좋은 점은?

 

꾸준히 방문해주시는 분들이 계시고

 

제 블로그로 유입할 수 있는 경로를 하나 더 만들 수 있다는 점입니다.

 

 

http://opencast.naver.com/IT741

 

 

지금까지 발행한 글에서 추천하고 싶은 글은?

 

[No.1 홈페이지 기초 HTML 배우기]
[No.2 HTML, CSS, 자바스크립트 주석 처리 방법]
[No.3 스타일 적용 우선 순위와 important!]
[No.8 [html/css]크로스브라우징, 웹 표준과 핵]
[No.15 [html/css] 수평, 수직 중앙 정렬 방법]
[No.20 css 선택자 종류와 사용법]
[No.24 HTML/CSS 알아두어야 할 상식]

 

 HTML/CSS를 배우는 분이라면 배경지식으로 꼭 필요한 내용이라고 생각해 골라 보았어요.

 

앞으로도, 지구별 안내서 오픈캐스트 자주 방문해주시고 응원해 주세요. ^_^

 

 

 

 

지구별 안내서 네이버 오픈캐스트 활용법

 

지구별 안내서, 네이버 오픈캐스트 메인에 선정되다

 

블로그 방문자수 늘리기 도전, 생각보다 쉬운 네이버 오픈캐스트 개설

 

티스토리 4개월 하며 느낀 점(순수 VS 수익형 블로그)

지구별에
티스토리 툭탁툭탁 2014.09.29 13:03

[html] blockquote 태그(인용문 꾸미기 5가지)

 

 

[html] blockquote 태그(인용문 꾸미기 5가지)

 

오늘은 인용문을 쓸 때 필요한 blockquote 태그, cite 속성, cite 태그에 대해 알아보겠습니다

 

 

blockquote는,  인용문을 표시할 때 사용하는 태그입니다.

 

보통 blockquote 요소를 사용한 곳은 들여쓰기가 됩니다.

 

(한 줄짜리 짧은 인용문은 q태그를 사용)

 

글을 읽으시다가 모르시는 부분은, 제 블로그에 대부분 관련 글이 있으니

 

참조해주세요~

 

 

html40.01 에서 blockquote 태그는 긴 인용문을 지정할 때 사용했다면,


html5에서 blockquote는 다른 자원에서 인용한 일부를 지정할 때 사용

 

 

▶사용 예:

 

<blockquote>

<p>인용문

..

..

</p>

</blockquote>

 

 

 

cite 속성

 

blockquote는 cite 속성과 함께 사용할 수 있습니다.

 

cite 속성은 인용문의 출처를 표시합니다.

 

화면에서 특별히 표시되는 부분은 없지만,

 

검색 엔진이 이 주소 정보를 사용할 수 있습니다.

 

 

▶ 사용 예:

 

<blockquote cite="URL">

인용문

</blockquote>

 

 

cite 태그

 

cite 태그는 cite 속성과 달리, 책, 영화, 그림 같은 작품의 제목을 지정할 때 사용합니다.

 

이탤릭체로 표시 함.

 

html 4.01에서 cite 태그는 인용구를 지정하는 역할을 했다면


html5에서 cite는 작품의 제목을 지정합니다.

 

 

▶ 사용 예:

 

<blockquote cite="URL">

<p>인용문

<cite>해리포터와 불의 잔 [Harry Potter And The Goblet Of Fire] </cite> 조앤 K. 롤링 </p>

</blockquote> 

 

 


 

▶ html 작성 예:

 

 html

<h3>남대문</h3>

<blockquote cite url="http://terms.naver.com/entry.nhn?docId=695218&cid=41708&categoryId=41711">

<p>국보 제1호. 문화재 관리국은 1996년 11월 28일 광복 50주년 역사 바로 세우기 일환으로 일본식 표현, 부적절한 명칭, 역사왜곡, 우리역사와 무관한 유적, 가치평가의 왜곡 등을 주요 항목으로 설정하고 심의 작업을 벌여왔다. ‘숭례문(국보 제1호)’이 이제서야 원래의 명칭에 담긴 뜻을 되살리게 되었다.</p>
 
<cite>-[네이버 지식백과] (국어국문학자료사전, 1998, 한국사전연구사)-</cite>
</blockquote>

 

 

▶실행화면

 

 

 

 

인용문 앞에 큰 인용부호 넣기

 

이번에는 인용문 앞에 큰 인용부호를 넣어 보겠습니다.

 

지난 시간에 배운 :before 가상 요소와, content 속성을 활용 했습니다(구 ie는, 지원하지 않음)

 

[css] - :before , :after 가상 요소

 

[css] content 속성 사용법

 

 

 css

blockquote:before

{

color:#33a8e5;
content:'“';
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}
 

 

더보기

 

▶실행화면

blockquote1.htm

 

 

인용문 앞에  큰 수직선 표시하기

 

어제 배운 것처럼 border 속성을 사용합니다.

 

수직선 그리는법 2가지(인용문 앞에 활용)

 

 

 

 css

blockquote{
border-left: 10px solid #ccc;
margin: 10px;
padding: 10px;}

 

▶실행화면

 

 

 

인용문 위 아래로 수평선 그리기

 

 

border-top: 2px solid #ccc 요소 맨 위에 선을 그리기(선 너비, 선 모양, 선 색상 순)

border-bottom 요소 맨 아래에 선 그리기

text-align:center 내용 가운데 정렬

 

 

 css

blockquote{
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
text-align:center;
margin: 10px;
padding: 10px;}

 

▶실행화면

 

 

인용문 안을 다른 색상으로 표시하기

  

 

 css

 

blockquote {
 background-color: #B2CCFF;
 margin: 10px;
 padding: 10px;
  border: 0px solid #000;
 -moz-border-radius:10px;
 border-radius:10px; 
}

 

더보기

 

 

▶실행화면

blockquote2.htm

 

 

 

line-height 속성 배우기

 

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

 

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

vertical-align 속성 자세히 알기(수직 정렬)

 

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

지구별에
티스토리 툭탁툭탁 2014.08.29 15:00

[html/css] 수직선 그리는법 2가지(인용문 앞에 활용)

 

 

[html/css] 수직선 그리는법 2가지(인용문 앞에 활용)

 

웹페이지에서 인용문이나, 중요 내용 앞에  큰 수직선이 그려져 있는 걸 본 적 있으시죠...

 

오늘은 아래 이미지처럼 큰 수직선 그리는 2가지 방법과 티스토리 본문에 수직선 넣기도 알아보겠습니다.

 

 

 

 

1. border 속성을 사용하는 방법

 

2. 이미지를 사용하는 방법

 

 

저는 1번이 파일 용량도  적을뿐 아니라, 가장 손쉬운 방법인 것 같습니다.

 

 

 

1. border 속성을 사용하는 방법

 

vertical bar.htm

 

(1) 왼쪽에 수직선을 그릴려면 border-left: 를,

오른쪽에 수직선을 그릴려면 border-right를 사용

 

(2) 선의 너비, 모양, 색상을 같이 지정합니다.

 

(3) padding으로 수직선과 인용문 사이에 여백을 지정해 줍니다.

 

 

예)

p.quote {border-left: 0.5em solid #E0CB52;padding: 0.5em;}

 

*border-left-width: 0.5em; border-left-style: solid; border-left-color: #E0CB52 와 같은 말 

 

*em사이즈는 아래 font-size 참조해주세요

 

 

 

border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)

 

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

 


 

2. 이미지를 사용하는 방법

verlical line(img).htm

 

(1) 저용량의 '점' 이미지를 준비합니다. (하기 파란색 점이 이미지입니다)

 

 

(2) 수직선이 들어가길 원하는 곳 앞에 이미지를 걸어줍니다.

 

<img src="dot.gif" class="quote"><p>내용

...

...

</p>

 

(3)css에서 이미지의 너비, 높이, 여백을 지정해주며, 이미지 옆으로 글자가 따라 붙게 하기 위해

float:left 속성을 씁니다.

 

예)

img.quote{width: 0.5em; height:10em;padding-right: 0.5em; float:left;}

 

단점: 인용문에  따라 높이 지정이 매번 달라지기 때문에 전체 적용이 어려움. 1번의 방법보다 용량이 더 나감.

 

 

이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법)

 

class, id 선택자

 

[css 기초] float 속성에 대하여

 

 

3. 티스토리 본문에 수직선 넣기

  vertical line(tistory).htm

 

(1) 문서 작성 시 화면 상단 □html에 체크버튼 누른 후 아래 코드를 문장 시작 시점에 넣고

 

<p style="border-left: 0.5em solid #E0CB52;padding: 0.5em;">

 

선의 모양과 색상 두께는 위에 링크 중 border 속성 참고해 주세요~

 

 

(2) 수직선이 끝나야 할 지점에 닫는 태그 </p>를 넣어줍니다.

 

예)

<p style="border-left: 0.5em solid #E0CB52;padding: 0.5em;">
Cascading Style Sheets (CSS) is a style sheet language used
for describing the look and formatting of a document
written in a markup language.
</p>

 

 

 

blockquote 태그(인용문 꾸미기 5가지)

 

지구별에
티스토리 툭탁툭탁 2014.08.28 08:30

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

 

 

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

 

 

이전 시간에 나눔고딕 웹폰트 적용, 제대로 배우기 라는 글에서

 

body{font-family: 'Nanum Gothic, sans-serif;}

 

라고 하면 웹 문서 전체에 나눔고딕 글꼴이 적용된다고 했습니다.

 

하지만 이렇게 해도 일부가 바뀌지 않는 경우가 있습니다. 왜 그럴까요?

 

 

css에서는 스타일 적용 우선 순위가 있습니다.

 

스타일이 중복됐을 경우 어느 것을 적용할지 우선 순위를 정해 놓은 것입니다.

 

즉, body에 '나눔' 글꼴을 적용했는데, div에 '돋움체'로 스타일을 주었다면 어느 것을  적용해야 할까요?

 

 

스타일 적용 우선 순위는 다음과 같습니다.

 

 

인라인 스타일 >내부 스타일>외부 스타일>브라우저 기본값 순이며,

 

가장 마지막에 스타일을 쓴 것을 가장 먼저 적용하며,

 

구체적인 값을 계산하여 적용하기도 합니다

 

 

 

스타일 적용 우선 순위와 속성 강제 적용 !important 참조해 주세요~

 

 

그럼 인라인/내부/외부 스타일이란 무슨 뜻일까요?

 

인라인 스타일은: 스타일을 줄 때 줄 속에 끼워 넣으며

 

내부 스타일은: <head>와 </head> 사이에 넣으며

 

외부 스타일은 : 스타일을 css 파일로 별도로 만든후 <head>와 </head> 사이에

 

외부 파일 삽입 link를 겁니다.

 

 

 

1. 인라인 스타일 예:

 

<html>

<head>

<style>

</style>

</head>

<body>

<p style="font-family: '돋움', sans-serif;">

동해물과 백두산이 마르고 닳도록 </p>

</body>

</html>

 

 



2. 내부 스타일 예:

 

<html>

<head>

<style>

body{font-family: '굴림', sans-serif;}

</style>

</head>

<body>

<p>동해물과 백두산이 마르고 닳도록</p>

</body>

</html>

 

3. 외부 스타일 예: 

 

아래를 css 파일로 저장(예:font.css)하여

 

body{font-family: '나눔고딕', sans-serif;}

 

 

link 태그로 외부 문서를 연결 

 

<html>

<head>

<style>

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

</style>

</head>

<body>

<p>동해물과 백두산이 마르고 닳도록</p>

</body>

</html>

 

 

CSS란? (HTML과 CSS의 차이, CSS 작성법) 도 참조해 주세요~

 

 

위 세 가지 스타일이 html문서에 동시에 들어갔다면, css 스타일 우선 순위에 따라,

 

1번 인라인 스타일이 적용됩니다.(즉, 돋움체)

 

 

티스토리 스킨의 경우 대부분 배포한 것을 사용하는데,

 

그래서 글꼴이나 글꼴 크기가 스킨 제작자의 의도에 맞추어 다양하게 설정이 됩니다.

 

즉 본문은 글꼴 크기가 14px인데 사이드바는 13px,

 

body 글꼴을 '고딕'으로 해 놓았는데, 방명록, 최신글, 사이드 바 등은 다른 글꼴로 설정해 놓은  경우가 있어요

 

이럴 땐 body{font-family: ...}를 적용해도 전체 웹페이지에 일관적인 글꼴 적용이 되지 않습니다.

 

 

 

글꼴을 일관적으로 적용하려면?

 

 

Tistory 관리 화면 >꾸미기-html/css 편집> css 에서

 

ctrl+F 하여 font: 혹은 font-family: 라고 써 있는 것을 모두 찾아서

 

원하는 글꼴을 첫번째에 써 주기

 

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

 

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

 

(important 선언을 생각 안 해 본 것도 아닌데, 이 선언은 개별 스타일에만 적용되며

 

전체 스타일엔 적용되지 않는군요.)

 

더보기

 

 

 

 

 

※주의※

 

스킨에 일관적으로 '나눔고딕'으로 적용했다 하더라도

 

이전에 작성한 글들 중에서, 글 작성 시  다른 글꼴로 설정해 입혔다면, 이 또한 나눔고딕으로 바뀌지 않습니다.

 

스킨이 '내부 스타일'이라면 글 작성한 화면에서 설정한 글꼴을 '인라인 스타일'이기 때문에

 

인라인이 먼저 적용되기 때문입니다.

 

 

 

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

 

지구별에
티스토리 툭탁툭탁 2014.08.11 13:07

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



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



티스토리나 웹사이트에서 나눔고딕 글꼴을 적용하는 생각보다 쉬운 방법이 있습니다.


구글 웹폰트를 사용하면, ie6~11 뿐 아니라, 구글 크롬, 파이어폭스에서도 나눔고딕 글꼴로 표시할 수 있어요


원리는, 구글에서 제공하는 웹폰트를 링크로 연결해 사용하는 방법입니다.




그동안 제 블로그의 경우, eot 파일을 티스토리에 업로드한 후에 font-face 속성을 사용해 적용했는데요

eot파일은 인터넷익스플로러6~11에서만 지원을 합니다.



구글 웹폰트 링크를 내려받으면 eot, woff, ttf 세 파일이 있음을 알 수 있습니다.


http://fonts.googleapis.com/earlyaccess/nanumgothic.css


eot 지원 브라우저: ie 6~11

woff 지원 브라우저: ie 9~11, firefox3.5+, chrome5+, safari5.1+, opera11.1+, Android browser 4.4+

ttf 지원 브라우저: firefox 3.5+, chrome 4+, safari3.1+, opera10.0+, Android Browser 2.2~4.4.3



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




그럼 나눔고딕을 내 블로그나 웹사이트에 적용하는 방법을 본격적으로 알아 볼게요~




티스토리나 블로그에, 나눔고딕 웹폰트 적용하기




STEP 1: 아래 사이트에 접속하여 ctrl+F 를 눌러 'nanum gothic'을 찾습니다.


https://www.google.com/fonts/earlyaccess





STEP 2: Link 밑에 나온 @import 구문을 나의 웹사이트

          <head>와 </head> 사이, <style> </style> 사이에 삽입합니다.


이 구문을 사용함으로써 url()에 나온 파일을 내려받게 됩니다.


사용 예:


<head>

<style>

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

</style>

</head>

 


*티스토리의 경우 관리 화면 html/css에서 css 화면에 삽입합니다.


@import 규칙은 css 파일 맨 처음 위치하는데 앞에 주석이 있으면  @import 파일을 인식하지 못함.

하지만 @charset 가 있으면 @charset rule이 먼저 옵니다

 

 

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




STEP 3: 이제  font-family 속성을 사용하여, import된 'nanum gothic'을 사용하겠다고 지정 합니다.


사용 예: body{font-family: 'Nanum Gothic', serif;}


body에 적용하면  전체 웹페이지가 모두 나눔고딕으로 지정됩니다.


font-family 속성은 보통 여러가지 글꼴을 나열해 놓는데요, import로 내려받은 파일로도 지원되지 않는 브라우저가


있을 경우에 대비하여, 대체 글꼴을 같이 적어 줍니다.


예: body{font-family: 나눔고딕, 'Nanum Gothic', arial, verdana, sans-serif;}



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



지금까지  배운 것을 한꺼번에 정리하면 이런 모양이 됩니다~


<html>

<head>

<style>

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body{font-family: 나눔고딕, NanumGothic,'Nanum Gothic',Nanumbarungothic,arial,verdana,sans-serif; line-height: 1.6; font-size: 14px;}

</style>

</head>

 


line-height 속성으로 줄 간격을 지정하고,


font-size 속성으로 글꼴 크기를 지정합니다.



*주의*  table에서 글꼴 크기가 다르게 표시될 경우 doctype을 선언해주면 간단히 해결됩니다.


아래 링크 참조해 주세요~



 

 

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

 

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

 

지구별에
티스토리 툭탁툭탁 2014.08.09 11:41

동영상(MP4) mp3로 변환하기

 

 

동영상(MP4)을 mp3로 변환하기

 

 

가끔 음악 파일을 변환하거나, 동영상(mp4)을 mp3로 변환할 일이 생깁니다.

 

저 같은 경우는 영어 학습 용으로, TED란 사이트에서 동영상을 다운 받았는데,

 

이 파일을 핸드폰이나 MP3 플레이어에서 들으려면 WMA,나 MP3로 변환해야 하더군요. 

 

다음에는 '다음팟인코더'라는 파일 변환기 프로그램이 있습니다.

 

'다음팟인코더'로 아래 파일 형식 모두 변환할 수 있습니다.

 

AVI, WMV, MP4, FLV, MKV, SWF, OGG, MP3, OGV, TS

 

 

유튜브 등 동영상-> MP3로 변환하는 법

 

 

STEP 1. 아래 링크에서 '다음팟인코드' 다운 받아 설치합니다.

 

 http://tvpot.daum.net/application/PotEncoder.do

 

아래 이미지에서 [팟인코더 다운로드] 부분을 클릭하면 됨

 

 

STEP 2. 변환할 파일을 열기

 

+불러오기를 클릭하거나, 해당 파일을 드래그하여 옮겨다 놓음

 

 

 

STEP 3. 화면 하단에 [세부설정]클릭

 



웹 업로드용, PC 저장용, 휴대 기기용 중 선택 후에, 하단에 세부설정을 클릭해 주세요.

 

저는 휴대 기기용으로 선택 후 [세부설정]을 클릭했습니다.

 

 

 

 

STEP 4. 위에 세부설정을 클릭하면 환경설정 창이 나옵니다.

 

형식란에는, 어떤 파일로 변환을 원하는지 선택합니다. 저는 MP3로 변환을 선택했습니다.

 

나머지 부분은 그대로 두셔도 됩니다

 

 

 

 

STEP 5. 위에 환경설정 후 [확인]버튼을 누른 후에 [인코딩 시작]버튼을 누름

 

그럼, 인코딩 파일 진행 현황이 나옵니다.

 

 

 

 

STEP 6. 파일 변환이 완료되면 [폴더열기]를 누르면 파일변환이 완료된 파일이 보입니다.

 

다른 형식의 파일도 이런 식으로 변환하시면 됩니다~

 

 

 

 

 


지구별에
티스토리 툭탁툭탁 2014.07.23 16:11

[배포완료]지구별 안내서, 티스토리 초대장 배포 합니다

 

 

 

 

지구별 안내서, 티스토리 초대장(10장) 배포 합니다

                          

 

개설한 지 거의 6개월 다 되어가는데 이번이 처음 배포네요. ㅎㅎ

 

 

 

 티스토리 초대장은 이런 분에게 드립니다.

 

자기만의 개성으로 블로그를 꾸려나가실 분

 

블로그 글을 진실하고 성실하게 쓰실 분

 

좋은 블로그를 만들 의욕이 있는 분

 

 

 

 이런 분에게 드리지 않습니다

 

남의 글로 자신의 블로그를 채우시려는 분

 

 

 

 신청 방법은?

 

아래 양식으로 비밀 댓글 달아 주세요

 

1. 초대장 받으실 이메일 주소

2. 신청 사유

3. 기존의 블로그가 있다면 블로그 주소

4. 기타(하고 싶은 말)

 

 

 

  

 배포완료하면 제목에 (배포완료)라고 표시하겠습니다.

 

 

「읽어 보면 도움되는 글」

 

일 방문자 수 500명 돌파 기념

 

블로그 방문자수 늘리기 도전, 생각보다 쉬운 네이버 오픈캐스트 개설

 

티스토리 4개월 하며 느낀 점(순수 VS 수익형 블로그)

 

지구별 안내서 네이버 오픈캐스트 활용법

 

 

 

 

지구별에
티스토리 툭탁툭탁 2014.07.22 10:00

지구별 안내서 네이버 오픈캐스트 활용법



지구별 안내서 네이버 오픈캐스트 활용법

 

 

어제 날짜로, 네이버 오픈캐스트 열 번째 메인이 되었습니다!!!!^^

 

처음엔 별 기대 없이 시작했지만, 어느 날 오픈캐스트 메인이 되면서, '아 나도 될 수 있구나' 하는


희망이 생겼고, 메인에 선정될 때마다 감사한 마음과 함께 좀 더 좋은 글을 발행해야겠다는


생각도  들었습니다~ 

 

티스토리를 시작한 지 5개월 정도 되었는데, html/css 관련 주제를 계속해서 쓰게 된 이유도

 

오픈캐스트 힘이 컸다고 생각 돼요.

 

방문해주신 분들이나, 구독자 분들, 그리고 오픈케스트 메인 선정을 해주신 분들께 감사하다는 말씀을 드립니다~^_^

 

 

 


지구별 안내서, 오픈캐스트 메인 열 번째





지구별 안내서, 오픈캐스트 활용법



html/css를 처음 공부하시는 분들이라면  오픈캐스트를 활용해 보시는 것도 좋습니다.


제 블로그 있는 html, css 강좌가 처음부터 체계적인 계획 아래 쓴 것이 아니다 보니, 여러  분류로 흩어져 있는


경우가 있는데, 오픈캐스트는 html기초에서부터 초반에 공부가 필요한 부분을 차례 대로 정리해 놓아서,


좀 더 체계적으로 공부하실 수 있어요. 그리고 관련글을 한 가지 주제로 엮었기에 보기에도 편리하고요.



아래 클릭해서, [구독하기] 누르면 끝~!





 


 

블로그 방문자수 늘리기 도전, 생각보다 쉬운 네이버 오픈캐스트 개설


지구별 안내서, 네이버 오픈캐스트 메인에 선정되다


티스토리 4개월 하며 느낀 점(순수 VS 수익형 블로그)

 

지구별에
티스토리 툭탁툭탁 2014.07.06 11:52

RSS 무단 수집 주의하세요(RSS 부분 공개하는 방법)

 

 

RSS 무단 수집 주의하세요 (RSS 부분 공개하는 방법)

 

얼마 전에 우연히 네이버 검색창에 제 블로그 이름 <지구별 안내서>를 조회해 보았습니다.

 

그랬더니 제가 쓴 글과 동일한 제목이 웹사이트에 나와서 들어가 보았습니다.

 

 

 

제 글의 일부분과 목차를 그대로 올려 놓았고, 광고까지 달아 놓았더군요.

 

문제는 작성자 이름이 전혀 나와 있지 않아, 마치 이 사이트에 제가 직접 쓴 글로 오해할 수도 있겠다 싶더라고요...

 

잠깐 사이트를 둘러 보니 RSS 수집 사이트로 보였고,  원치 않을 경우 게시중단 요청을 하도록 돼 있습니다.

 

그런데 등록도 하지 않은 사이트에  무단으로 남의 글을 수집해 놓고, 게시중단을 해야 제 글을 내릴 수 있다니요?

 

더 자세히 찾아 보니 제 글 약 2페이지의 목록을 그대로 긁어갔더군요.... 헐~

 

(지금은  게시중단 요청을 해서 제 글은 삭제가 된 상태입니다.)

 

네이버나 다음 구글 처럼 일정 기간이 지나 RSS 를 자동으로 가져가는 사이트는

 

검색했을 때 해당 블로그로 직접 연결하는 링크 형태로 제공합니다.

 

또 누가 보아도 작성자를 알 수 있도록 돼 있고요.

 

그런데 일부 메타 블로그, RSS 수집 사이트는 직접 링크를 제공하지 않고,

 

등록한 바로 그 사이트에서만 글이 노출되고, 거기에서 광고 수익을 내고

 

글을 직접 작성한 블로거에게 아무런 이득이 되지 않는 경우도 있습니다.

 

제 친구가 그런 경험을 하고, 저도 되도록 이름이 알려진 곳에만 RSS 등록 신청을 합니다.

 

또 티스토리의 경우 rss 부분공개와, 전체공개를 직접 설정할 수 있는데

 

전체공개를 선택하면, rss 로 들어갔을 때 글이 모두 노출될 수 있습니다.

 

 

 

RSS 부분공개 설정하기!

 

TISTORY관리 화면-글 설정-공개정책 에서

 

꼭 '부분공개' 선택하고 저장하시는 게 좋습니다.

 

 

 

 

 

 

재발을 방지하기 위해

 

 

 

1. 통합검색창에 가끔 블로그 제목이나, 글 제목을 넣어 검색해 보기

 

또 이런 일들을 예방하기 위해, 가끔 자신의 블로그 이름이나, 닉네임, 글 제목을 넣어 검색해 보아야 할 것 같습니다.

 

 

2. 공지글에 저작권 관련 정보를 적기

 

 

3. 네이버 신고센터에 신고하기

 

위 링크에 접속 후,  저작권 침해 게시물 신고를 합니다.

 

 

 

 

지구별에
티스토리 툭탁툭탁 2014.06.03 18:27

티스토리 4개월 하며 느낀 점(순수 VS 수익형 블로그)

 

 

티스토리 4개월 하며 느낀 점

 

 

1일 1포스팅에 대하여

 

며칠 티스토리를 안 하다 보니 몸과 맘이 편하네요.. ^ ^

 

최근 한 달 동안 1일 1포스팅을 되도록 지키려고 노력했습니다

 

하루에 글 하나 쓰는 게 뭐 어려운 일인가 싶지만, 제 일과 병행하려니 생각만큼 쉽지 않더라고요

 

1일 1포스팅을 하려고 했던 이유는, 블로그 업데이트 주기가 검색 순위에 영향을 미친다는 글을 읽은 후인데요

 

여유가 된다면 못할 것도 없지만, 촉박하게 품질 낮은 글을 생산하는 것보다 이틀에 한 번이라도,

 

양질의 글을 쓰는 게  더 좋다는 생각이 듭니다.

 

장기적으로 보았을 때 방문하는 사람이나 제 블로그가 오래 갈 수 있는 방법이 무엇인가 생각해 보면 그런 결론이

 

나옵니다.

 

 

 

글의 주제

 

티스토리를 처음 시작할 때, 블로그 이름은 <고요한 책 한 권>이라고 붙였을 정도로

 

책의 비중을 높게 잡았습니다

 

하지만,  안타깝게도 책과 관련된 포스팅은 조회 수와 검색 수가 너무 적었습니다

 

우리나라 사람들은 책에 이다지도 관심이 없을까? 란 생각이 들기도 하고

 

책을 좋아하는 사람은 컴퓨터나 인터넷 매체와 친하지 않을 거란 생각도 드네요 ㅋㅋ

 

또 책을 하나 읽으려면 3~4일, 어떤 책은 10일이 넘어야 하는데, 이렇게 오랜 시일이 걸려야 글 하나가

 

탄생할 수 있다니 수익형 블로그라기엔 효율이 넘 떨어진다 싶었습니다

 

 

그래서 다른 주제로 html, css를 쓰기 시작했는데요

 

10년 전에 웹디자인을 배운 적이 있기 때문에, 새로운 것은 배워가며 쓸 수 있으리라 생각했고요

 

모르는 것을 하나 하나 알아가는 재미가 꽤 있습니다^^

 

하지만 배우는 것과 글을 쓰는 건 또 다른 차원의 일인지, 이것도 효율 면에서는 썩 좋지는 않은 것 같아요.

 

시간과 에너지 투입양과 단기적인 결과를 비교해서는 늘 마이너스 입니다.

 

 

결국 이 주제를 계속 고수해야 한다면  지금 쓴 글을 모아 책으로 낸다든지,

 

아니면 10년 후에도 읽을 만한 가치 있는 글을 쓴다든지 해서 먼(~) 미래의 가능성을 염두해고

 

글을 써야겠단 생각이 드네요.

 

 

 

한 가지 주제로만 글을 쓰는 것이 좋을까?

 

한 가지 주제로 글을 쓰면 전문성 면에서 인정받고, 꾸준히 찾아 주는 단골도 생기는 것 같습니다.

 

하지만  단골이 꼭 수익으로 연결되는 것은 아닌 것 같습니다

 

아마도 자주 찾아주는 방문자의 경우, 블로그의 구조를 너무 잘 알고 있기에 광고 클릭 가능성은

 

낮아진다고 할 수 있겠네요.  

 

제 경험에 비추어 보면 오히려 무작위로 들어온 방문자가 클릭률이 높은 것 같습니다.

 

하지만 이건 단기간의 경우이고, 이것 역시 장기적으로 보았을 때

 

만일 책을 낸다든지 한다면 단골 방문자가 잠재적인 구매자로 연결될 가능성도 있을 것 같습니다. 

 

 

 

 

블로그를 하며 삶의 질이 향상됐는가?

 

아직은 그렇지 않은 것 같아요

 

오히려 정신과 육체가 넘 피로해서 뭔가 개선하지 않으면 안 될 시점이라, 지금 이 글을 씁니다

 

 

 

앞으로의 방향

 

제가 왜 블로그를 시작했고 어떤 생각으로 블로그를 운영하고 있느냐를 되돌아 보았습니다

 

목적이 나 자신에게 있지 않고 밖에 있더군요

 

그래서 원하는 결과가 나타나지 않았을 때 조급하고, 책임을 외부 탓으로 돌린 적도 있고요

 

추구하는 것이 밖에 있었기 때문에, 남 탓 할 수밖에 없었겠죠^^

 

앞으로 그런 어리석음을 되풀이하고 싶진 않습니다

 

소득이 작더라도, 행복을 나 자신에게 찾는 사람이 되고 싶습니다. ^ ^

 

 

 

 

 

 

 

순수한 블로그 VS 수익형 블로그

 

사람을 일하게 만드는 가장 강력한 동기 중 하나가 전 수익이라고 생각합니다.

 

인터넷 세상에서 오랫동안 생명을 유지하고 있는 블로그만 보아도 수익형이  더 많은 것 같습니다.

 

정성 들여 쓴 글에 보상이 따르는 것은 방문자와 블로거 양쪽에 유익하다고 생각하고요.

 

하지만 방문자의 불편을 초래하면서까지 내 수익을 추구하고픈 생각은 들지 않네요

 

방문자의 이익와 나의 이익, 두 가지 균형을 맞추는 게 꽤 중요한 부분 같습니다.

 

 

 



 

 

 

 관련글 】

 

일 방문자 수 500명 돌파 기념

 

블로그 방문자수 늘리기 도전, 생각보다 쉬운 네이버 오픈캐스트 개설

 

지구별 안내서, 네이버 오픈캐스트 메인에 선정되다

  

지구별에
티스토리 툭탁툭탁 2014.05.12 15:21
Powerd by Tistory, designed by criuce