Search This Blog

사용법어찌?

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

Get link
Facebook
Twitter
Pinterest
Email
Other Apps

Home 위로가기↑

Get link
Facebook
Twitter
Pinterest
Email
Other Apps

민족자주
평화통일

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

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

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: 두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - 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 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 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 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: 좌우정렬하기 ALIGN : left, center, right

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이라고 나와 있지만, 실제로 적용해보면 작동하지 않는다. 따라서 세로정렬은 다른 방법을 사용할 수 밖에 없다.

세로…

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

자주시보

북, 완전봉쇄된 개성시 주민들에게 특별지원물품 전달
시장통

2020년 국제 금 시세 전망 : 년말까지 2500달러, 금값 상승과 금 몰수 위험성 - E.B. Tucker
한국대학생진보연합

유선민 동지 석방대회 진행하다
민플러스

뭐가 무서워서 주한미군 나가란 말 한번 못하나
주권방송 615TV

김정은 위원장 ‘황해북도 수해 현장 방문, 수해 복구 과업 제시’
박석재 천문역사

유튜버 동영상 66번 자료
국민주권연대

[성명] 유리병 던져 한국인 여성 다치게 한 주한미군 강력히 처벌하라
정의기억연대

Korean Council Newsletter August 2020
주권연구소

조국, 윤미향 “악마”로 몬 가짜뉴스…‘마녀사냥’의 진실
보건의료단체연합

개인정보 도둑법이 8월 5일부터 시행됩니다
노동자전선

유성기업 손배소는 노조파괴 최후수단이다. 대법원은 판결로써 ‘노동권 침해하는 기업의 법제도 악용’을 멈춰라.
민족자주民族自主

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

꽃다지 온라인 콘서트 7월 4일에
자료방

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

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

Show 5 Show All

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

검색기 Home 위로가기↑