이 블로그 검색

사용법어찌?

구글 드라이브 (Google Drive) 사용법 : 글 목록

공유 링크 만들기
Facebook
Twitter
Pinterest
이메일
기타 앱

Home 위로가기↑

공유 링크 만들기
Facebook
Twitter
Pinterest
이메일
기타 앱

민족자주
평화통일

● 민족자주 民族自主의 원칙 - 우리 민족 운명은 우리 스스로 결정
● 비정상적인 현재의 정전상태를 종식시키고 확고한 평화체제 수립
● 민족혈맥 잇고 공동번영 자주통일
과감 철저 리행 쟁취 果敢徹底履行爭取

... 통일의 그 날이, 우리 북과 남의 거리 만큼이나 아주 가까운 시일 내에, 우리 민족의 념원대로, 하루 빨리 이루어지기를 기대하면서 ... 해 솟는 백두산은 내 조국입니다. 한나산도 독도도 내 조국입니다 ... 노래말보기

이 블로그의 인기 게시물

HTML FONT tag: 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법

폰트에 속성을 주는 방법은 <font >태그와 다른 태그 안의 스타일(style) 속성 두 가지를 쓸 수 있겠다.

이전에는 폰트를 적용할 때 <font > ~~ </font>와 같이 하였는데, HTML5에서는 <font>태그를 지원하지 않는다. 물론, HTML5가 일반화되고 브라우저 버전이 올라가도 이전에 만들어진 HTML 문서의 <font>태그는 이상없이 작동을 할 것이므로 걱정할 일은 아니다.
단지, 앞으로 만드는 HTML문서는 가급적이면 스타일(style) 속성으로 주는 것이 낫지 않을까 싶다.

<font> ~ </font>태그로 속성주기
[ 예 ]
<font size="2em" color="green">
이 글자는 font 태그로 속성을 주었다
</font>
[실제 적용한 모습]
이 글자는 font 태그로 속성을 주었다
위에서 <font>태그를 설정한 내용과 실제 적용된 모습이 다르다.
이렇게 된 이유는, 구글블로그는 페이지 첫머리에 <!DOCTYPE HTML>로 선언하여 HTML5가 적용되기 때문이고, 위의 예에서 준 <font> 태그를 강제로 스타일 속성으로 바꾸어 적용하기 때문이다.
<span style="color: green;">
이 글자는 태그로 속성을 주었다
</span>

스타일(style)로 속성주기

스타일(style)은 <div> <p> <span> 등과 같이 여러 태그에서 쓸 수 있다. (각 태그에 대한 자세한 설명은 링크페이지를 참조)
<div style=" ~~ "> </div>
<p style=" ~~ "> </p>
<span style=" ~~ "> </span>
[예]
<…

자세한 내용 보기

HTML DIV tag: 스크롤바 넣기와 제어하기 - overflow: auto, scroll, hidden, white-space:nowrap

DIV 영역에 스크롤바를 표시하고 제어하려면, 스타일(style) 속성에서 overflow 를 지정하면 된다. DIV 영역의 오른쪽에 표시되는 세로 스크롤바가 기본이다.

스크롤 바를 설정하는 것은 어려운 일이 아니지만, 생각해 볼 것이 있다.
스크롤바가 있으면, 방문자 입장에서는 아무래도 번거롭다. 스크롤바는 내용이 한 번에 다 보이지 않는다는 것을 의미하기 때문이다.

누구나 경험한 일이겠지만, 어떤 사이트는 의도적으로 스크롤바를 설정하여 방문자로 하여금 어떤 행동을 하게 만들거나 유도하거나, 또는 알려야 할 내용을 사실상 보지 못하도록 만들거나 ..... 스크롤바가 나쁜 의도로 쓰이기도 한다.

그러한 사이트는 방문자로 하여금 외면당하기 마련이다. 눈앞의 어떤 이익을 위하여 방문자를 속이고 유도하는 데에 스크롤 바를 사용하여서는 아니될 것이다.

[Div 영역에 스크롤바 지정]
<div style="overflow:scroll; width:350px; height:200px;">
</div> overflow에는 자동 auto, 항상표시 scroll, 항상숨김 hidden 으로 지정할 수 있다.

1. overflow: scroll; 항상 스크롤바 표시
내용이 DIV 영역보다 많든 적든 상관없이 항상 스크롤바를 표시한다.

[예1: 내용이 DIV 영역보다 적은 예]
<div style="overflow:scroll; width:500px; height:150px;">
</div> [실제 적용한 모습]
여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다.
[예2: 내용이 DIV 영역보다 많은 예]
<div style="overflow:scroll; width:500px; height:150px;">
</div> [실제 적용한 모습]
여기는 DIV 스타일에 overflow: scr…

자세한 내용 보기

HTML DIV tag: 영역 겹치기와 보이기 순서 지정하는 방법 - Position, z-index

DIV영역을 여러개 놓고 서로 겹치게 하거나, 겹친 영역에 순서를 줄 수 있다.
DIV영역을 겹치게 놓고 순서를 주지 않으면,<div>태그가 위치한 순서대로 겹쳐진다. 즉, 윗쪽에 있는 DIV영역부터 차례로 표시되므로, 아래쪽에 있는 DIV영역이 윗쪽에 있는 DIV영역 위에 겹치게 된다.

1. 영역의 보이기 순서(z-index)를 지정하지 않은 태그 모양
<div style="position: relative;">
첫번째 DIV 영역
</div>
<div style="position: relative; left:10px; top: -70px;">
두번째 DIV 영역
</div>
[적용한 모습]
첫번째 DIV 영역 두번째 DIV 영역 2. 영역의 보이기 순서(z-index)를 지정한 태그 모양
<div style="position: relative; z-index: 2;">
첫번째 DIV 영역
</div>
<div style="position: relative; left:10px; top: -70px; z-index: 1;">
두번째 DIV 영역
</div>
※ 윗쪽에 있는 DIV영역의 순서를 "2"번으로 주고 아래쪽에 있는 DIV영역의 순서를 "1"번으로 주었다. 아래 그림에서 보듯이, "1"번으로 지정한 아래쪽 DIV영역이 먼저 표시되고, 그 다음에 "2"번으로 지정된 윗쪽 DIV영역이 그 위에 겹쳐서 표시되었다.

[적용한 모습]
첫번째 DIV 영역 두번째 DIV 영역
3. 글자 겹치기(z-index 지정하지 않음)
<div style="color: gold; font-size: 70px; font-weight: 900; height: 100px; position: relative;">
가나…

자세한 내용 보기

HTML DIV tag: 세 개의 DIV영역을 가로로 나란히 놓는 방법 - 테이블과 비교

DIV영역 여러개를 나란히 놓으려면, float 속성을 이용하면 된다.
창의 너비를 100%로 보았을 때, DIV영역의 갯수에 따른 상대적 비율을 DIV영역의 너비로 지정해 준다.

예컨데, DIV영역 세 개를 나란히 놓는다면, 하나의 영역 너비는 100%의 3분의 1인 33%가 된다. DIV영역 네 개를 나란히 놓는다면, 하나의 영역 너비는 100%의 4분의 1인 25%가 된다.

1.[태그 모양: 너비를 33%로 주었을 때]

[태그 모양]
<div style="border: 1px solid gold; float: left;width: 33%;">
첫번째 영역
</div>
<div style="border: 1px solid red; float: left;width: 33%;">
두번째 영역
</div>
<div style="border: 1px solid blue; float: left;width: 33%;">
세번째 영역
</div>
[적용후의 모습]
첫번째 영역: 각각의 영역의 너비를 33%로 주었을 때, 세 영역이 나란히 놓인다. 두번째 영역: 각각의 영역의 너비를 33%로 주었을 때, 세 영역이 나란히 놓인다. 세번째 영역: 각각의 영역의 너비를 33%로 주었을 때, 세 영역이 나란히 놓인다.

1-1.[태그 모양: 너비를 33%로 주고, 안여백을 주었을 때]

[태그 모양]
<div style="border: 1px solid gold; float: left;width: 33%; padding:10px;">
첫번째 영역
</div>
<div style="border: 1px solid red; float: left;width: 33%; padding:10px;">
두번째 영역
</div>
<div style="border: 1px soli…

자세한 내용 보기

HTML DIV tag: 두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right

블로그나 웹페이지를 보면, 그림이나 광고 등을 좌우로 나란하게 배치해 놓은 것을 볼 수 있다. 표(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:left 여기에 그림이나 글자 또는 광고 등을 넣음 두번째 영역: 첫번째…

자세한 내용 보기

HTML BUTTON tag : 버튼 태그 사용법 - 버튼 만들기와 꾸미기 - 글자 폰트 테두리 색상 여백 스타일

블로그나 웹페이지에 잘 어울리는 예쁜 버튼을 만들어 다는 것은 그리 쉬운 일이 아닌 것 같습니다. 그림 이미지나 아이콘을 만들어 멋있게 만들 수 있지만, 경우에 따라서는 버튼 이미지가 표시되지 않아 보기가 좋지 못한 경우도 볼 수 있습니다.

HTML의 버튼 태그 <button>를 사용하면, 손쉽게 만들 수 있고, 표시되지 않는 문제도 없으니 좋은 것 같습니다. DIV 태그나 SPAN 태그와 A 링크 태그를 사용하여 만들어도 되지만, 자체로서 버튼의 기능을 가진 Button 태그가 편한 것 같습니다. 아래는 버튼 태그를 사용하여 만든 몇 가지 예입니다.
참고: HTML A tag: 글자(텍스트)로 버튼 만들기: DIV, SPAN

1. 버튼 만들기

[버튼 태그 기본 모양]
<button> .... </button>
버튼 태그에서 버튼의 크기는 기본적으로 버튼안에 들어 가는 글자나 그림의 크기에 따라 자동으로 조절이 됩니다.

[홈(Home)으로 가기]
<button onclick="window.location.href='https://ojji.wayful.com'">HOME</button> 실제 적용한 모양
HOME

[이전 페이지로 가기 : 브라우저의 이전 페이지로 가기 기능 Go back]
<button onclick="goBack()">앞쪽 페이지로</button>
<script>
function goBack() {
window.history.back();
}
</script> 실제 적용한 모양
앞쪽 페이지로

[뒤쪽 페이지로 가기 : 브라우저의 뒤쪽 페이지로 가기 Go forward]
<button onclick="goForward()">뒤쪽 페이지로</button>
<script>
function goForward() {
window.histo…

자세한 내용 보기

HTML HR tag : 가로줄 넣기와 굵기 색상 정렬 등 속성 지정하는 방법

블로그나 웹페이지에 가로줄을 넣는 태그는 <hr>이며, hr은 horizontal rule의 두문자어이다.
<hr>이라고만 간단하게 넣으면 가로줄이 그으진다. 이 때는 블로그나 웹페이지에서 지정한 기본 설정이 적용된다.

[1] 가로줄 넣기 - 기본
<hr> 실제 적용한 모습

[2] 가로줄의 선종류 굵기 색상 지정
가로줄에 속성을 지정하면 아래와 같은 모양이 된다.
<hr style="border: 선종류선굵기선색상;">
선종류: solid dotted dashed double groove ridge inset outset 등이 있다
선굵기: 단위는 px, pt, %, em 등을 쓸 수 있다
선색상: red blue black 등과 같이 색상이름을 쓰도 되고, #eeeeee 와 같이 코드로 쓰도 된다

아래의 예에서는 선의 특징을 보이기 위해 선굵기를 10px로 굵게 하였다. 선굵기를 1px와 같이 가늘게 하면 다르게 보이므로 알맞게 조절하여 꾸미면 된다.

[선종류: solid]
<hr style="border: solid 10px red;"> 실제 적용한 모습

[선종류: dotted]
<hr style="border: dotted 10px red;"> 실제 적용한 모습

[선종류: dashed]
<hr style="border: dashed 10px red;"> 실제 적용한 모습

[선종류: double]
<hr style="border: double 10px red;"> 실제 적용한 모습

[선종류: groove]
<hr style="border: groove 10px red;"> 실제 적용한 모습

[선종류: ridge]
<hr style="border: ridge 10px red;"> 실제 적용한 모습

[선종류: inset]
<hr style=&…

자세한 내용 보기

HTML 공백(space)과 공백문자( )의 차이점과 사용방법

HTML에서는 공백(space)을 인식하되, 들어간 스페이스 수에 상관없이 1 칸으로 처리하여 보여준다. 행의 맨 앞에 있는 공백(space)는 무시되어 표시되지 않으므로, 행 맨앞에는 공백문자를 쓰야 한다.

공백문자 코드는   이고, 키보드의 스페이스 키 한 번을 친 것과 같이 한 칸을 띄운다. 여러 칸의 공백을 주려면, 원하는 만큼 공백문자를 연이어 붙여 쓰면 된다.   는 non-breaking space (줄바꿈을 하지 않는 공백)의 줄임말이다.

[공백 예 1]
0123
01234
01234

0123 0123
0123 0123 [실제 적용한 모습]
0123
01234
01234

0123 0123
0123 0123 첫 째줄, 둘 째줄, 셋 째줄을 비교하면, 행 맨앞의 스페이스는 모두 무시되어 없는 것과 마찬가지로 표시됨을 알 수 있다.
네 째줄과 다섯 째 줄을 비교하면, 문자 사이의 공백은 그 수에 상관없이 한 칸으로 인식하여 처리됨을 알 수 있다.

[공백 예 2]
01234
 01234
  01234
   01234
    01234
     01234 [실제 적용한 모습]
01234
01234
  01234
   01234
    01234
     01234 공백문자는 위치에 상관없이 원하는 공백만큼 연이어 붙여 쓰면 된다

[공백 예 3]
01234
 01234
01234 [실제 적용한 모습]
01234
01234
01234 행 맨앞에 공백을 준 경우와 공백문자를 넣은 경우의 차이를 볼 수 있다. 세째줄의 맨 앞에 준 공백은 무시되어 표시되지 않음을 볼 수 있다.

[공백 예 4]
  &…

자세한 내용 보기

HTML IMG tag 사용법 : 그림 이미지 크기 조절 방법, 좌우 가운데 정렬 방법, 여백 설정 방법, 기타 속성 설정 하기

웹페지에 HTML <Img> 태그로 그림 이미지를 넣을 때, 이미지 좌우 정렬, 이미지 크기 조절, 이미지 여백을 조절하게 됩니다. 방법은 스타일(style) 속성을 주면 간단하게 할 수 있습니다.

1. 그림 이미지 넣기

기본 태그 모양
<img src="여기에 이미지 주소(URL)를 적으면 됩니다." />
실제 예
<img src="https://1.bp.blogspot.com/pink-rose-250x250.png" />

참고: 태그 끝에 빨강색으로 표시한 / 는 <img ~~ 태그를 마무리 하는 것입니다. / 가 없어도 대부분 무리없이 작동을 하지만, / 가 없으면 오류가 나는 경우도 있습니다. 특별한 사정이 없다면, 태그 규칙에 맞게 / 를 넣어 주는 것이 더 낫지 싶습니다.
참고: <img src = ~~ 에서, img는 image [이미지]의 약칭이고, src는 source [소스]의 약칭입니다.

2. 이미지 크기 조절 하기

위에서와 같이 이미지를 불러 오면, 원래의 크기대로 표시가 됩니다. 페이지에 잘 어울리도록 이미지 크기를 조절하려면, 아래와 같이 스타일(style) 속성에서 너비(width)와 높이(height)를 지정해 주면 됩니다.

태그 모양
<img
src="이미지URL"
style="width:100px; height:100px;"
/ >
실제 예
<img
src="https://1.bp.blogspot.com/pink-rose-250x250.png"
style="width:100px; height:100px;"
/ >

참고: 위와 같이 하면, 페이지에 불려지는 이미지는 원래 크기 그대로 이지만, 방문자가 보는 페이지에서는 속성에서 지정한 크기로 표시됩니다. 이미지 크기는 페이지 로딩 속도에 미치는 영향이 상대적으로 크다 할 수 있습니다. 그러므로, 이미지를 필요 …

자세한 내용 보기

HTML DIV tag: 높이 지정 - 고정높이와 자동조절되는 높이 - height: auto

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 ...

자세한 내용 보기

서울의소리

[속보]윤미향 당선인 오늘 오후 2시 국회에서 기자회견
사람일보

미국 정찰기 한반도 상공 비행을 중단하라
국민주권연대

[성명] 한반도 위기 고조시키는 미국과 문재인 정부를 규탄한다
자주시보

‘현충원에서 친일파 묘 이장하자’ 국민동의 청원 진행 중
박석재 천문역사

유튜버 동영상 46번 올렸습니다~!
시장통

중국 디지탈 위안 : 2021 내년 법정통화 전자화폐 유통으로 종이돈 대체 - 중국인민은행(PBoC)
주권연구소

[조선일보의 친일·반민주 악행] 박정희·전두환 찬양 일색 조선일보 ‘흑역사’
주권방송 615TV

[조선일보의 친일·반민주 악행] 박정희·전두환 찬양 일색 조선일보 ‘흑역사’
한국대학생진보연합

검찰은 적폐에 동조말고 마녀사냥식 정의기억연대 압수수색들 중단하라.
자주보고自主寶庫

독도는 우리 땅 입니다 - 노무현 대통령 연설 전문, 동영상
자료방

Martial law [마셜 로] 뜻 : 계엄령 (戒嚴令)
건강방

코로나바이러스 Coronavirus (COVID-19) 정체 이면 이후 예방 치료
꽃다지

2020 첫 공연-고 문중원 기수 추모문화제
백두칭송위원회

김정은 국무위원장, 백마타고 백두산에서 첫눈 맞아

5개 표시 모두 보기

사용법어찌: 구글 블로그, 구글 드라이브, 구글 플러스, 메타트레이더, 인터넷 개인정보 보안, 피드버너, 푸바 2000, 프리웨어, 브라우저, 애드센스, 텀블러, HTML MT4 MT5 ... wayful.com

검색기 Home 위로가기↑