사용법어찌?

[태그 모양] <div style=" background-image: URL(이미지 주소) ; background-color: 색상이름 또는 코드; "> </div> 1. 영역에 바탕 색깔 넣은 모습 <div style=" background-color: gold; height: 100px; width: 100%;"> 이곳은 DIV영역이며, 바탕색을 금색(gold)으로 지정한 실제 모습이다.  </div> 2. 영역에 바탕 그림 넣기 코드 모습 <div style=" background-image: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4OKTkRfSS-YnWjSSA6sitWiJtP2SUzxSdAN9tnPe3DsQep5ojH2H3FobDJdNwGYhI285nZQ1NWvIjo8aE_PG5L9hxM30NXaSsKHg95K-R0a6idta8do0T7CYZm7sgpzTZPtWS2pgr-YCd/s1600/howways-logo2-94x94.png);  height:150px; width:100%; "> </div> [영역에 그림을 넣은 실제 모습] 여기는 DIV영역이며, 바탕그림의 크기가 DIV영역보다 작기때문에 그림이 자동으로 반복되면서 DIV영역을 채우게 된다. 2-1. 바탕그림의 반복(repeat) 바탕그림(background-image) 태그는 기본적으로 그림을 반복한다. 즉, 그림의 크기가 영역의 크기보다 작으면, 그림을 가로로 반복하고 또 세로로도 반복하여 영역을 꽉채우게 된다. 바탕그림의 반복을 제어하는 태그는 아래와 같다. [background-repeat: ] repeat: 바탕그림을 x축 및 y축으로 반복하여 영역에 채운다. 즉, 가로.세로 모두 반복한다 repeat-x : ...

DIV영역의 가로너비는 퍼센트(%) 비율로 줄 수도 있고, 픽셀(px)단위로 고정시킬 수도 있다. 블로그나 홈페이지의 방문자들은 다양한 크기의 모니터를 사용하고 있고, 브라우저의 폭도 다양하게 설정하여 사용하므로, 픽셀 보다는 브라우저폭에 따라 조절되는 퍼센트를 사용하는 것이 유연성을 높일 수 있을 것이다. 브라우저의 너비를 넓혔다 줄였다 하면서, 살펴보면 각각의 설정에 따라 결과가 어떻게 다른지 쉽게 이해할 수 있을 것이다. 주) 이 블로그의 템플릿이 고정너비로 되어 있어 작동이 되지 않아, 이 페이지의 HTML 파일을 구글 드라이브에 올려 놓았습니다. 아래 그림과 같이, 링크 페이지에서 파일을 다운 받아 열고, 브라우저의 폭을 조절해 보면 어떻게 작동되는지 볼 수 있습니다.  DIV 가로 너비 예제 [DIV 영역 너비 설정의 종류] width: 111px;   <= 너비가 111픽셀로 고정 width: 100%;    <= 너비가 브라우저 너비에 따라 조절됨 max-width: 500px; <= 너비가 최대 500픽셀 이내에서 브라우저 너비에 따라 조절됨 min-width: 100px;  <= 너비가 최소 100픽셀 이상에서 브라우저 너비에 따라 조절됨 [영역의 가로 너비를 650픽셀로 고정시킴] <div style="border: 1px solid #48BAE4; height: auto; width: 650px; "> 픽셀(px)로 너비를 고정하여, 브라우저 폭이 좁아지거나 넓어져도 그에 맞추어 영역이 조절되지 않고 고정되어 있다.  </div> [가로너비를 브라우저의 가로폭에 따라 조절되도록 하되 최대너비를 650px로 고정시킴] <div style="border: 1px solid #48BAE4; height: auto; max-width: 650px; "> 브라우저...

DIV영역의 테두리선 종류를 잘 이용하면, DIV영역이 페이지에 잘 어울리도록 하거나 또는 눈에 잘 띄도록 할 수 있다. [선의 종류] solid, dotted, dashed, double, groove, inset, outset, ridge  border: 선굵기 선종류   선색상; [Solid 1px 을 적용한 모습] <div style="border: 1px solid #48BAE4; height: auto; padding:10px;"> Solid 1px을 적용한 모습 </div> [Dotted 1px 을 적용한 모습] <div style="border: 1px dotted #48BAE4; height: auto; padding:10px;"> Dotted 1px을 적용한 모습 </div> [Dashed 1px 을 적용한 모습] <div style="border: 1px dashed #48BAE4; height: auto; padding:10px;"> Dashed 1px을 적용한 모습 </div> [Double 5px 을 적용한 모습] <div style="border: 5px double #48BAE4; height: auto; padding: 10px;"> Double 5px을 적용한 모습 </div> [Groove 5px 을 적용한 모습] <div style="border: 5px groove #48BAE4; height: auto; padding: 10px;"> Groove 5px을 적용한 모습 </div> [Inset 5px 을 적용한 모습] <div style="border: 5px inset #48BAE4; height: auto; pa...

페이지 안에 영역을 설정하는 태그가 DIV이다. DIV 영역은 설정하되 테두리선이 표시되지 않도록 할 수도 있고, 테두리선을 모두 또는 일부만 표시할 수도 있다. 테두리(border: 보더) 속성 주기 [사방의 테두리선을 일괄적으로 표시하는 방법] border: 1px solid gold 의미 => 선굵기: 1px,  선종류: 직선(solid),  선색상: 금색(gold) [특정한 쪽만 테두리선을 표시하는 방법] 영역 윗쪽 테두리선만 표시     border-top : 1px solid gold 영역 오른쪽 테두리선만 표시  border-right : 1px solid gold 영역 왼쪽 테두리선만 표시     border-left : 1px solid gold 영역 아래쪽 테두리선만 표시  border-bottom : 1px solid gold 1.[태그 모양: DIV 영역은 설정하되 테두리 선을 표시하지 않음] <div style="height: auto; width: 100%;"> 여기는 DIV영역이지만, 테두리 선을 표시하지 않음 </div> 1-1.[실제 적용한 모습] 여기는 DIV영역이지만, 테두리 선을 표시하지 않음 2.[태그 모양: 영역의 사방 테두리를 일괄적으로 표시함] <div style="height: auto; width: 100%; border:1px solid gold; "> 여기는 DIV영역이며, 테두리 선을 일괄적으로 표시함 </div> 2-1.[실제 적용한 모습] 여기는 DIV영역이며, 테두리 선을 일괄적으로 표시함 3.[태그 모양: 영역의 윗쪽 테두리만 표시함] <div style="height: auto; width: 100%; border-top:1px solid gold; "> 여기는 ...

DIV는 페이지 안에서 영역을 설정하는 것이다. DIV영역의 테두리와 바깥쪽과의 사이에 여백을 줄 때는 마진(Margin)을, 그리고 DIV영역 테두리와 안쪽과의 사이에 여백을 줄 때는 패딩(Padding)을 사용한다. margin과 padding에 여백을 주는 방법은 같다. margin: 1px 2px 3px 4px padding: 1px 2px 3px 4px 순서는 위쪽에서 부터 시계방향이다. 즉, 위쪽 여백 1px, 오른쪽 여백 2px, 아래 여백 3px, 왼쪽 여백 4px을 뜻한다. 특정한 쪽에만 여백을 줄 때는 다음과 같이 하는 것이 편하다. 위쪽 바깥 여백    => margin-top: 1px 오른쪽 바깥 여백 => margin-right: 1px 아래쪽 바깥 여백 => margin-bottom: 1px 왼쪽 바깥 여백    => margin-left: 1px 위쪽 안 여백    =>  padding-top: 1px 오른쪽 안 여백 => padding-right: 1px 아래쪽 안 여백 => padding-bottom 1px 왼쪽 안 여백    => padding-left: 1px [DIV 영역에 여백을 주지 않은 모양새] <div style="border: 3px solid gold; float: left; height: auto; width: 200px;"> 안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다. 여백을 주지 않은 모양새이다. 바깥 여백도 안 여백도 주지 않았다. 따라서, 이 DIV영역의 바깥쪽과 테두리 사이에 여백이 없이 딱 붙어 ...

DIV영역의 가로폭이 그리 넓지 않을 때에는, 아래 글이나 그림을 DIV영역과 나란히 되도록 올려 붙이는 것이 전체적으로 모양새가 나은 때가 있다. 방법은 DIV에 플로우트(float: 무엇이 무엇 위에 떠다) 속성을 지정하면 된다. float: left   <= DIV영역을 왼쪽에 놓음 float: right <= DIV영역을 오른쪽에 놓음 1.[태그 모양 : float 속성을 주지 않음] <div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px; "> 여기는 DIV 영역이다 </div> 여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다. 1-1.[실제로 보이는 모양] 여기는 DIV 영역이다 여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다. 2.[태그 모양 : DIV영역의 오른쪽 빈 공간으로 아래의 글을 나란히 올려 붙임] <div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px; float: left; "> 여기는 DIV 영역이다 </div> 여기부터는 DIV영역 아래에 있는 ...

DIV로 감싼 영역의 가로 또는 세로의 길이는 고정시킬 수도 있고, 브라우저 창의 가로폭에 따라 자동으로 조절되게 지정할 수도 있다. 아래의 두 예는 브라우저를 높이를 px로 고정시켰을 때와 자동(auto)로 설정했을 때의 차이를 볼 수 있도록 하였다. 브라우저를 좁히거나 늘려보기 바란다. [높이를 자동(auto)으로 지정한 예] <div style="border: 1px solid gold; padding: 10px; height: auto; min-height: 100px; overflow: auto;"> 브라우저의 폭을 좁히면, 그에 따라 영역의 높이가 조절되므로, 내용이 DIV 테두리를 벗어나 보이지 않고, 영역안에 있게 된다. DIV로 감싼 영역의 높이가 브라우저의 가로폭에 따라 자동으로 조절되도록 높이(height)속성을 자동(auto)로 주었다. 대형 모니터의 경우에는 브라우저의 폭이 상대적으로 넓게 펼쳐지기 때문에 그럴 경우를 생각해서 최소높이(min-height)를 지정해주었다. </div> [높이를 px로 고정한 예] <div style="border: 1px solid gold; padding: 10px; height: 150px; "> 브라우저의 폭을 좁히거나 늘려도, 그에 따라 영역의 높이가 조절되지 않고 고정되어 있으므로, 브러우저 폭을 좁히면, 내용이 DIV 테두리를 벗어나 보이게 된다. 데스크탑의 경우에는 대형모니터가 많이 쓰이고, 반면에 휴대형 기기 사용이 늘어나기 때문에 작은 창에서도 잘 보이도록 하려면, 가급적 px로 고정시키지 않는 것이 좋을 것 같다. </div> >> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

DIV로 둘러싼 영역안에 있는 내용을 좌우로 정렬하는 속성은 Align[얼라인: 맞추다]이며, 왼쪽(left), 가운데(center), 오른쪽(right)을 지정해 주면 된다. [왼쪽 정렬] DIV 영역 안에서 가로로 왼쪽 정렬하기 샘플 <div align="left" style="border: 1px solid #48BAE4; height: 100px;"> 이 영역안에 있는 글이나 그림등은 왼쪽으로 정렬 된다. 속성인 Align은 Style 뒤에 놓아도 잘 작동은 하지만, 일반적으로 앞에 놓는 것 같다. [가운데 정렬] DIV 영역 안에서 가로로 가운데 정렬하기 샘플 <div align="center" style="border: 1px solid #48BAE4; height: 100px;"> 이 영역안에 있는 글이나 그림등은 가운데로 정렬 된다. 속성인 Align은 Style 뒤에 놓아도 잘 작동은 하지만, 일반적으로 앞에 놓는 것 같다. [오른쪽 정렬] DIV 영역 안에서 가로로 오른쪽 정렬하기 샘플 <div align="right" style="border: 1px solid #48BAE4; height: 100px;"> 이 영역안에 있는 글이나 그림등은 왼쪽으로 정렬된다. 속성인 Align은 Style 뒤에 놓아도 잘 작동은 하지만, 일반적으로 앞에 놓는 것 같다.  [세로정렬] DIV 영역 안에서 세로로 정렬하기 <div vertical-align="middle" style="border: 1px solid #48BAE4; height: 100px;"> DIV 영역안의 내용을 세로로 정렬(위로, 가운데, 아래로)정렬하는 속성은 vertical-align이라고 나와 있지만, 실제로 적용해보면 작동하지 않는다. ...

블로그나 웹페이지를 보면, 그림이나 광고 등을 좌우로 나란하게 배치해 놓은 것을 볼 수 있다. 표(table)를 이용하여도 되고, 아래와 같이 DIV태그를 사용하여도 된다. 방법은 DIV 영역을 2개 만든 다음, 두 영역을 나란히 붙히는 것이다. 1. 영역 2개 만들기 [태그 모양] <div style="width:150px; height:150px; border:1px solid red;"> 첫번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음 </div> <div style="width:150px; height:150px; border:1px solid green;"> 두번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음 </div> [적용후 모습] 첫번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음 두번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음 2. 두번째 영역을 첫번째 영역 옆에 올려 나란히 붙이기 위의 태그에 "float:left 또는 right;"를 추가한다. [태그 모양] <div style="width:200px; height:150px; border:1px solid red; float:left; "> 첫번째 영역: 왼쪽에 위치시킴 =>  float:left 여기에 그림이나 글자 또는 광고 등을 넣음 </div> <div style="width:200px; height:150px; border:1px solid green; float:left; "> 두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음 </div> [적용후의 모습] 첫번째 영역: 왼쪽에 위치시킴 => float:l...

블로그나 웹페이지를 피드버너와 연동시키면, 현재는 트위트만 가능하지만, 피드버너를 통해 소셜미디어(SMS)에 글을 자동으로 발행할 수 있다. 설정방법은 아래와 같이 간단하다. => 연동하고자 하는 피드버너로 이동 > 발행하기(Publicize) > 소셜화(Socialize) > 계정연동관리(Manage connections)를 눌러 계정연동관리 페이지로 간다 => 계정연결(Connect an account)를 눌러 소셜웹 목록창을 연다. => 피드버너에 연동시키고자 하는 소셜웹을 선택한다. => 해당 소셜웹의 계정항목들을 입력하고 저장한다. => 해당 소셜웹의 연동승인페이지로 이동하면, 연동승인을 한다. 그러면, 새로운 글을 올리면, 피드버너를 통해 연동된 소셜웹에도 자동으로 발행된다. >>  피드버너 사용법 글 목록 도움이 되었기를 바랍니다.

<br />태그의 br은 break(Line break)의 약자로서, 줄을 바꾼다는 뜻이고, <p> </p>태그의 p는 paragraph의 두문자어로 '문단'이란 뜻이다. <div> </div>의 div는 division의 약자이며, '영역을 나눈다'는 뜻이고, <span> </span>의 span은 '무엇이 적용되는 범위'라는 뜻이다. 쓰임의 목적으로 보면, br태그는 하나의 문단안에서 줄을 끊어서 줄바꿈을 하는 것이 목적이고, p태그는 문단과 문단을 나누는 것이 목적이다. div태그는 하나의 페이지 안에서 영역을 나누는 것이 목적이고, span태그는 줄을 바꾸거나 영역을 나누지 않고 일정한 범위를 지정하여 속성을 주는 것이 목적이므로, 줄바꿈을 하지않은 채 글꼴, 색상, 여백 등을 조절할 때 주로 사용된다. 태그를 넣는 위치로 보면, br태그는 줄을 끊어 바꾸고자 하는 위치에 넣게되며, p태그는 하나의 문단을 p태그로 싸게 되므로 <p>하나의 문단</p> 모양이 되고, div태그는 하나의 영역을 div태그로 싸게 되므로 <div>하나의 영역</div> 모양이 되고, span태그는 일정한 범위를 sapn태그로 싸게 되므로 <span>일정한 범위</span> 모양이 된다. 줄바뀜 측면에서 보면, br태그는 줄바뀜이 한 번 일어나고 p태그는 줄바뀜이 한 번 일어나되, 문단사이에 빈줄이 들어가므로, br태그가 두 번 들어간 것과 같은 모양이 된다. 즉, 줄바뀜이 두 번 일어나는 셈이다. div태그는 줄바뀜이 한 번 일어나므로, div영역과 바깥과의 사이에 여백이 없다. span태그는 줄바뀜이 일어나지 않는다. 태그에 주는 속성으로 보면, br태그는 쓰임상 속성이 아주 단순하지만, p태그, div태그, span태그는 태그로 싸인 부분...

블로그나 웹페이지에 그림을 넣을 때, 테두리를 둥글게 다듬고자 한다면 이미지의 스타일에서 radius 값을 지정해 주면 된다. [이미지의 스타일 속성 주기] <img style=" border: 3px solid gold; border-radius: 7px; -moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; " src="이미지 주소(URL)" /> 윗쪽의 그림은 "radius 값을 일괄적으로 7"로 주었을 때의 모양이고, 아래쪽 그림은 일괄적으로 "70"을 주었을 때의 모습이다. >> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

구글 블로그의 블로그 이름(이미지) 옆에 애드센스 광고를 넣거나, 트위트나 페이스북 같은 소셜버튼을 달아 놓은 경우를 볼 수 있다. 사용법 어찌 여기에 그림, 가젯, 위젯, 애드센스..... 등 원하는 것을 넣음 블로그 헤드 공간을 블로그 이름 공간과 가젯 공간으로 나누어, 블로그 이름 옆에 가젯을 추가하려면 아래와 같이 하면 된다. 1. 헤더에 공간 나누기 => 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)을 눌러 위의 그림과 같은 HTML 편집창을 연다. => 위젯 바로가기(Jump to widget) > 헤더1(Header1)을 선택하여, 아래와 같은 '헤드(Header1) 코드부분으로 이동한다. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='자신의 블로그 이름 또는 이미지' type='Header'/>...</b:widget> </b:section> => 위의 코드 바로 아래에, 아래의 코드를 붙여 넣는다. <b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/> => 그러면, 아래와 같이 된다. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1...

구글 블로그에서 글을 찾는 경로는 일반검색과 라벨검색 2가지가 있다. 라벨검색에서 복수의 라벨을 '그리고(AND)' 로직으로 찾는 방법과, '또는(OR)'로직으로 찾는 방법은 아래와 같다. 1. 그리고(AND) 검색 브라우저 주소창에서, "블로그 주소 /search/label/ 라벨A + 라벨B"로 검색한다. 예컨데, 이 블로그에서 라벨에 "구글"과 "블로그" 두 낱말이 모두 들어 있는 글을 찾는다면, http://howways.blogspot.com/search/label/구글 + 블로그 로 검색하면 된다. 2. 또는(OR) 검색 브라우저 주소(URL)창에서, "블로그 주소 /search/?q=label: 라벨A | label: 라벨B"로 검색한다. 예컨데, 이 블로그에서 라벨에 "크롬"이 있거나 또는 "파이어폭스"가 있는 글을 찾는다면, http://howways.blogspot.com/search/?q=label:크롬|label:파이어폭스 로 검색하면 된다. 라벨A 다음에 있는 | 와 label 다음에 있는 : (콜론)에 주의하면 된다.

사이트를 방문하지 않고도 브라우저로 사이트의 새로운 글 목록을 볼 수 있는데, 모질라 파이어폭스는 이 기능을 자체적으로 가지고 있고, '라이브 북마크'라고 부른다. 구글 크롬은 자체적으로 라이브 북마크 기능은 없지만, 확장프로그램을 설치하면 라이브 북마크 기능을 편리하게 쓸 수 있다. 아래 그림을 따라 하면, 누구나 쉽게 설치. 사용 또는 삭제할 수 있다. 1. 크롬 확장프로그램(Extensions) 관리자 창 열기 2. 라이브 북마크 확장프로그램 'RSS Feed Reader' 설치하기 3. 라이브 북마크하기 4. 구글크롬 라이브 북마크 읽기 5. 구글크롬 라이브 북마크 삭제하기 6. 구글크롬 확장프로그램 삭제하기 도움이 되었기를 바랍니다.

브라우저에서 써드-파티 쿠키를 차단하도록 설정하면, 구글 블로그의 글쓰기 창에서 "이미지 넣기(Insert Image)"를 할 때, 옆의 그림과 같은 메시지창이 뜬다. (구글 크롬, 모질라 파이어폭스 모두 같음) 메시지 내용은 '온라인 저장소에서 그림을 선택하려면 사인-인을 하십시오.' In order to select an item from your online storage, please sign in. 실제로 해보면, 사인-인을 해도 그림넣기가 안되는 것 같다. 브라우저에서 차단한 써드-파티 쿠키를 허용해 주면, 아래 그림과 같이 '그림 넣기'기능이 정상적으로 작동한다. => 구글 크롬에서 써드-파티 쿠키 허용 설정하기 => 모질라 파이어폭스에서 써드-파티 쿠키 허용 설정하기 ㅇ 써드-파티 쿠키를 차단하면 그 외에도 - Google+ Followers 가젯을 추가해도 정상적으로 작동하지 않는다 - 댓글쓰기가 제대로 안된다는 글을 보았는데, 확인은 해보지 않았다.

구글 크롬에서 써드-파티 쿠키 (Third-party Cookies and site Data)를 허용하거나 차단하려면, 아래와 같이 두 가지 경로를 통해서 할 수 있다. 방법 1: 주소창을 통해 바로 가는 방법 => 아래 그림과 같이, 크롬 브라우저의 주소(URL) 창에 아래의 주소를 복사하여 붙여 넣고 [엔터]키를 치면, 바로 써드-파티 쿠키 설정창으로 이동된다 바로가기 주소:  chrome://settings/content => 아래 그림과 같이 체크 표시가 있으면, 써드-파티 쿠키가 차단되도록 설정 된 것이다. 방법 2: 브라우저 제어 아이콘과 메뉴를 통해 가는 방법 => 브라우저 오른쪽 맨위의 설정 아이콘 > 설정(Settings) > 열린 설정 페이지에서 맨 아래에 있는 고급설정 보기 (Show advanced settings...) > 콘텐트 세팅(Content settings) > 쿠키 (Cookies) => 네모 상자를 클릭 하여 체크표시가 되도록 하면, 써드-파티 쿠키와 데이타를 차단하도록 설정 된 것이다. 주) 아래는 이전 버전의 경로입니다. 구글 크롬에서 써드-파티 쿠키 허용과 차단 => 브라우저 오른쪽 맨위의 설정 아이콘 > 설정(Settings) > 콘텐트 세팅(Content settings)  도움이 되었기를 바랍니다.

인터넷 사이트를 방문하면, 쿠키와 브라우징 내역 등의 데이타가 사용자 컴퓨터에 저장됩니다. 이러한 데이타의 저장을 허용 또는 차단하거나 삭제하는 방법을 설명합니다. 특히, 써드파티(Third party) 쿠키는 주의를 할 필요가 있다고 생각됩니다. 파이어폭스에서 쿠키와 데이타의 허용/차단 설정을 하는 방법은 두 가지로 할 수 있습니다. 방법 1: 설정창 바로가기 파이어폭스에서 주소(URL) 입력창에 아래의 바로가기 주소를 복사하여 붙여 넣고 [엔터] 키를 치면, 바로 설정창이 열립니다. => 설정창 바로가기 주소:  about:preferences#privacy 방법 2: 메뉴를 통하여 가기 => 브라우저 오른쪽 맨위의 설정 아이콘 > 옵션(Options) > 열린 설정창에서 안경모양의 프라이버시(Privacy) 아이콘을 눌러 설정창으로 갑니다. 쿠키와 브라우징 데이타 허용/차단 설정하는 방법 위의 그림에서와 같이 설정하면, 방문한 사이트의 쿠키는 허용을 하되, 써드파티의 쿠키는 차단하고, 파이어폭스를 닫으면 모든 쿠키와 브라우징 내역이 자동으로 삭제됩니다. ㅇ Accept cookies from sites : 방문한 사이트의 쿠키를 허용합니다. ㅇ Accept third-party cookies: 써드파티 쿠키를 차단/허용 설정합니다. ㅇ Keep until: 허용하여 저장된 쿠키를 파이어폭스를 닫을 때 자동으로 삭제 합니다. ㅇ Clear history when Firefox closes: 파이어폭스를 닫을 때, 모든 브라우징 내역 데이타를 자동으로 삭제합니다. 방문한 사이트의 쿠키나 써드파티의 쿠키를 차단하면, 사이트에 따라서는 정상적으로 작동하지 않을 수 있습니다. 쿠키를 차단하면 정상적으로 작동하지 않는 사이트는 꼭 필요한 경우가 아니라면, 가급적 접속하지 않는 것이 좋습니다. 참고) 써드파티 (Third-party)가 무엇인지 이해 하는데 도움이 되는 글 보기 ...

구글 블로그에서는 하나하나의 글에 대하여 댓글 허용여부를 설정할 수 있다. 1.기본적으로는 모든 글에 댓글을 허용하되, 특정한 글에는 댓글을 차단하기 1) 블로그 설정창 > 설정(Setting) > 글과 댓글 설정(Posts and Comments) > 댓글(Comments)에서 댓글을 허용하도록 설정한다. 2) 왼쪽 그림에서 보는 것처럼, 글쓰기 창의 오른쪽에 있는 글설정(Post settings) > 옵션(Options) > 방문자 댓글(Reader comments)에서, 차단 방식을 지정한다. ㅇ 댓글 차단, 기존에 달린 댓글 보임(Don't allow, show existing) : 앞으로는 댓글을 차단하되, 기존에 달려 있는 댓글은 보여줌 ㅇ 댓글 차단, 기존에 달린 댓글 감춤(Don't allow, hide existing) : 앞으로는 댓글을 차단하되, 기존에 달린 댓글도 보이지 않도록 감춤 2. 기본적으로는 모든 글에 댓글을 차단하되, 특정한 글에만 댓글을 허용하기 1) 블로그 설정창 > 설정(Setting) > 글과 댓글 설정(Posts and Comments) > 댓글(Comments)에서 댓글을 허용하도록 설정한다. 2) 그림과 같이, 글쓰기 창의 오른쪽에 있는 글설정(Post settings) > 옵션(Options) > 방문자 댓글(Reader comments)에서 댓글을 허용할 글에서만 "허용(Allow)"으로 지정하고, 다른 글은 모두 차단하도록 설정한다. 즉, 블로그 기본설정에서 댓글 허용으로 설정해 두고, 댓글을 허용할 글외의 모든 글에 대하여 하나하나 댓글을 차단하도록 설정하는 것이다. 좀 번거롭기는 하지만, 다른 블로그에서는 찾아보기 힘든 좋은 기능인 것 같다. 주) 위의 그림과 같은 개별 글에 대한 댓글 허용/차단 옵션은 블로그 설정에서 댓글을 허용으로 설정했을 때만 표시된다.

이른바 블로그를 하면서 우리말로는 뭐라고 하면 좋을까...그런 생각이 들곤 한다. 하지만, 와 닿는 우리말이 떠오르지 않는다. 그 만큼 우리말이 멀어져 가고 있기 때문이니 부끄러워 진다. 이 곳 글에서 블로그에 쓰이는 영어 낱말을 우리말로 바꾸어 본 것들이 몇 있는데, 별 것은 아니지만 모아 본다. 우리말을 잘 아는 사람들이 하나 하나 바꾸어 누리꾼들에게 돌려 보이기를 바라는 마음으로. 블로그(Blog) => 글타래, 글모음, 글엮음, 적바림(적어 두는 것)... 오버뷰(Over view) => 틀보기, 모두보기, 모아보기... 포스트(Post) => 글 스태츠(Stats) => 헤아림 레이아웃(Layout) => 짜임새, 틀 가젯(Gadget) => 끼움틀, 작은 끼움틀 템플릿, 스킨, 테마 (Template, Skin, Theme) => 보임새, 겉모양 템플릿 디자이너 (Template Designer) => 보임새 꾸밈틀, 겉모양 꾸밈틀 세팅 (Setting) => 맞춤, 맞추기 베이직(Basic) => 바탕 태그, 라벨(Tag, Label) => 꼬리말, 글꼬리말 트위트 (Twitter) => 속다기(속닥속닥 이야기 하는 것), 돌리미(글을 돌리는 것) 아름다운 우리말이 널리 쓰이기를 바라면서. 도움이 되기를 바랍니다.

구글 크롬 브라우저에 추가하여 쓸 수 있는 확장프로그램(Extensions)은 아주 많고, 사람에 따라서 다르기는 하지만 유용한 프로그램들도 많이 있다. 1.크롬 확장프로그램 관리페이지로 가기 브라우저의 오른쪽 맨 위에 있는 설정아이콘 > 도구(More Tools) > 확장프로그램(Extensions)으로 이동한다. 추가한 확장프로그램이 아무것도 없으면,  아래 그림의 왼쪽 윗 부분에서 보는 것처럼 "아이구... 확장프로그램이 하나도 없네요.... Boo... you have no extensions... -( 확장프로그램을 둘러 보겠습니까 Want to browse the gallery instead? " 라는 말이 보인다. 파랑색 링크가 걸린 " browse the gallery "를 누르면, 아래 두 번째 그림과 같은 크롬 확장프로그램을 찾아보고 추가할 수 있는 크롬 웹스토어(Chrome web store)로 연결된다. 이미 다른 확장프로그램이 추가되어 있다면,  추가된 확장프로그램 목록이 보이고, 그 아래에 "더 많은 확장프로그램을 추가하기( Get more extensions )" 링크가 표시되어 있다. 이 링크를 통해서 크롬 웹 스토어로 가면 된다. 2.크롬 웹스토어에서 확장프로그램 찾기와 추가하기 왼쪽 맨 위에 있는 찾기 상자에서 추가하고자 하는 프로그램을 검색하면, 아래 그림과 같이 해당되는 확장프로그램들이 나열된다. 대체로 같은 기능을 하는 프로그램들이 여러가지 나와 있다. 다운로드 받은 숫자와 평가 별표를 참고하고, 나아가 설명을 읽어 보고 추가할 프로그램을 결정한다. 추가할 프로그램에 달려 있는 [+ Free] 버튼을 누른다. 그러면, 그림의 오른쪽 위에 있는 것과 같은 알림판이 뜬다. [추가 Add] 버튼을 누르면, 프로그램이 크롬 브라우저에 자동으로 추가된다. 알림판 내용은, 선택한 프로그램에 따라 다르다. 아래 그...

구글 블로그에는 외부로부터의 접속을 제어할 수 있는 기능이 4가지가 있다. 이 기능들을 활용하면, 외부로부터의 접속을 차단하여 개인화된 블로그를 만들 수 있다. 1. 읽기 권한(Blog Reader) 설정 블로그 설정창 > 설정(Setting) > 기본설정(Basic) > 허용(Permissions) > 블로그 읽기(Blog Reader) 권한 > 편집(Edit)를 눌러 읽기권한 설정창을 연다. ㅇ Private - Only blog author(개인화 - 블로그 주인만 읽을 수 있음) ㅇ Private - Only these readers(개인화 - 블로그 주인과 아래에 등록된 사람만 읽을 수 있음) 주) 이 경우는 최대 100명까지 등록할 수 있으며, 이 부부분은 다른 글에서 설명함) 2. 개인화(Privacy) 설정 블로그 설정창 > 설정(Settings) > 기본설정(Basic) > 개인화(Privacy)로 이동하여 편집(Edit)을 눌러 설정창을 연다. ㅇ 블로그 목록에 노출(Listed on Blogger) 차단 당신의 블로그를 구글 블로그 목록에 등록하겠습니까(Are your blog to our listings?) => 아니오(No) 선택 ※ 예(Yes)로 설정하면, 블로그가 구글 블로그 목록에 등록되며, '랜덤 블로그' 링크를 통해 다른 블로그에서 접근이 될 수 있다.   ㅇ 검색엔진 노출(Visible to search engines) 차단 당신의 블로그를 검색엔진에 노출시키겠습니까(Let search engine find your blog)? => 아니오(No) 선택  3. 로보트.텍스트(robots.txt) 설정 블로그 설정창 > 설정(Settings) > 검색엔진(Search preferences) > 로보트.텍스트 설정(Custom robots.txt) > 편집(Edit)을 눌러 설정창을 연...

글에 다는 글꼬리말을 태그(Tag)라고도 하고, 구글 블로그에서는 라벨(Label)이라고 한다. 글꼬리말은 글을 묶어 주는 일을 할 수 있으므로, 목록(카테고리)을 만들거나 블로그의 메뉴를 만드는데 쓰인다. 즉, 글꼬리말을 통해서 블로그 운영자는 글을 묶어 관리할 수 있고, 또한 방문자는 같은 내용의 글을 쉽게 읽을 수 있게 된다. 1. 글꼬리말(라벨) 넣기/달기 => 경로 글쓰기 창의 오른쪽에 있는 글설정(Post settings) > 글꼬리말(Labels) 누름 그러면, 그림과 같이 글꼬리말을 넣는 입력란이 열린다. 입력란에 직접 입력해도 되고, 입력란 바로 아래에 펼쳐진 기존의 글꼬리말 목록에서 마우스 클릭으로 선택해도 된다. => 글꼬리말 사이 구분 글꼬리말과 글꼬리말 사이는 쉼표(콤마: ',')로 구분한다. 즉, 낱말 사이에 여백이 있어도 하나의 글꼬리말로 인식되므로, 여러 낱말로 된 글꼬리말을 만들 수 있다. 예컨데, "구글 블로그 글꼬리말(Label) 넣기/달기 방법"도 하나의 글꼬리말로 달 수 있다. => 글꼬리말에 쓸 수 없는 특수문자 & < > @ ! + , 는 쓸 수 없다. 바꾸어 말하면, 그 외의 특수문자는 모두 글꼬리말에 쓸 수 있다. => 글꼬리말 제한 글꼬리말은 하나의 블로그당 2,000 개 까지 허용되며, 하나의 글에는 20개까지 허용된다. 2. 글꼬리말을 일률적으로 넣는 방법 글꼬리말을 글묶음(목록, 카테고리, 메뉴)로 사용하기 위해서는, 일정한 글 꼬리말을 일률적으로 달아 주어야 한다. 조금이라도 다르면 다른 글꼬리말로 인식되기 때문이다. 즉, "구글 블로그"와 "구글블로그"는 다르게 인식되므로 라벨 검색에서 "구글 블로그"를 검색하면 "구글블로그"는 검색되지 않는다. 또한, 영문자인 경우에 대문자와 소문자를 구별하...

인터넷에서 띄움창(팝업창)이 애물단지다. 대체로 광고성 있는 것들이지만, 어떤 사이트는 공지사항 등을 팝업창에 띄우기도 하고, 팝업창을 차단해 놓으면 이런저런 반 협박성 메시지를 보이기도 한다. 모질라 파이어폭스에서 팝업창을 차단 / 허용하거나, 또는 기본적으로 모두 차단하되 특정 사이트는 허용하도록 설정해 보자. 1. 모두 차단하기 위의 그림에서 주황색으로 표시된 경로대로 하면 모든 팝업창이 차단된다. => 도구 > 옵션 > 콘텐츠 > 팝업창 차단(Block pop-up windows)에 체크함 단, 예외(Exceptions)에 등록된 사이트는 허용되므로, 예외로 설정한 사이트 주소를 모두 지워야 한다. 2. 기본적으로는 모두 차단하되 특정 사이트는 허용하기 일단 위에서와 같이 모두 차단해 놓고, 위 그림에서 녹색으로 표시한 것과 같이 허용할 사이트를 입력해 준다. => 예외설정(Exceptions)을 누르면, 그림과 같이 팝업창을 허용할 사이트 주소를 입력하는 창이 뜬다. => 입력란에 허용할 사이트의 주소를 복사하여 붙여 넣은 다음, [허용: Allow] 버튼을 누르면, 아래쪽의 허용된 사이트 목록에 표시되고, 이들 사이트에 한해서 팝업창이 허용된다. 3. 모두 허용하기 위 그림에서 팝업창 차단(Block pop-up windows)의 체크를 풀고, 그리고 예외(Exceptions)에 등록된 사이트 주소를 모두 지운다. 도움이 되었기를 바랍니다.

블로그에 써 놓은 글의 라벨(Label)을 변경, 추가 또는 삭제하고 싶을 때가 있다. 하나의 글이라면 해당 글의 수정창에서 하면 되고, 여러 글의 라벨을 한 꺼번에 하려면 아래 그림과 같이 하면 된다. 1. 여러 글에 새 라벨을 추가할 때 => 블로그 설정창 > 글(posts) > 새 라벨을 추가할 글을 모두 선택(체크박스에 체크) > 연필모양의 라벨관리 아이콘 > 열린 라벨항목창의 맨 위에 있는 새 라벨(New label) 그러면, 그림의 가운데에 있는 것과 같은 새 라벨입력창(Enter the new label)이 뜬다. 추가할 새 라벨을 입력하고, 실행(OK)을 누르면, 선택한 모든 글에 새 라벨이 추가된다. 위의 그림에서는 새 라벨로 "LabelTest"를 추가하였고, 그림의 맨 아래 부분과 같이 선택한 글에 "LabelTest"라는 라벨이 추가 되었다. 2. 여러 글에서 특정한 라벨을 삭제할 때 => 특정 라벨을 삭제할 글을 모두 선택(체크박스 체크) > 연필모양의 라벨관리 아이콘 > 열린 라벨항목창에서 삭제할 라벨 선택 그러면, 선택한 모든 글에서 선택한 특정 라벨이 삭제된다. 3. 여러 글의 특정 라벨을 변경할 때 방식은, 해당 글에 변경하려는 새 라벨을 추가한 다음, 이전의 라벨을 삭제한다. 직접적으로 특정라벨을 변경하는 기능은 없다. => 라벨을 변경하려는 모든 글을 선택 > 변경할 새 라벨을 추가 => 새 라벨이 추가 되었는지 확인하고, 일단 블로그 설정창에서 완전히 빠져 나간 다음, 다시 블로그 설정창으로 돌아온다. => 옆의 그림과 같이 창의 맨위에 있는 라벨별 글 목록 보기(All labels) > 변경하려던 이전의 라벨을 선택 그러면, 해당 라벨에 해당하는 글만 보여지게 된다. 해당 글들을 모두 선택(체크)하고, 위의 라벨삭제하는 방법에 따라 해당 라벨을 삭제한다. 결과적...