Search This Blog

사용법어찌?

Home
블로그
구글+
드라이브
브라우저
푸바
MT4
HTML
정보보호
피드버너
애드센스/기타
시장통 HOME

More…

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

Get link
Facebook
Twitter
Pinterest
Google+
Email
Other Apps

도움이 되기를 바랍니다.

Get link
Facebook
Twitter
Pinterest
Google+
Email
Other Apps

Powered by Blogger

Theme images by Maliketh

평화와 번영
통일을 위한
판문점 선언

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

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

노동과세계

“서울시는 시민과 노동자 안전 위해 지하철 9호선 공영화하라”
코리아 히스토리 타임스

이재용삼성 단죄 못하면, 文정권 물러나야
국민주권연대

지역 민중당 행사에 참석한 홍덕범, 김준희동지
엄마뉴스

엄마들, '金방남 환영' 입장발표 "평화와 통일을 물려주자"
민플러스

사회원로 50인 “사법농단 법관 탄핵하고 특별법 제정하라”
MediaVOP

[정혜림의 발칙한 뉴스] 태안발전소 사고에 '감정적으로 굴지 말라’는 이들에게
주권방송

대한애국당 북한인권행사에 찾아간 대학생들 “평화통일을 가로막지 마세요”
백두칭송위원회

[광주 백두칭송위원회] 김정은 국무위원장 서울 방문 환영 연설대회 , 예술공연 진행
사람일보

천안함침몰사건 ‘어뢰’에 대하여
주권연구소

‘초미의 관심사’ 김정은 위원장 서울 답방의 배경과 의의
환단고기-역사뉴스

임나일본부설과 “가야=임나‘?
변혁과 진보

신의주 부근 바닷가에 나타난 제4세대 첨단무기
TheEduMedia

메타트레이더 사용법 - 야후에서 과거 데이타 내려 받기
무상의료 운동본부

Show 5 Show All

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: 세 개의 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: 영역 겹치기와 보이기 순서 지정하는 방법 - 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: 스크롤바 넣기와 제어하기 - 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: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다. ====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.

여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다.====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다.====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.여기는 DIV 스타일에 overflow: scroll; 속성을 …

시장통

2018년말 금시세 전망, 응답자의 57% 1400달러 이상 - Kitco Survey
자주보고自主寶庫

~ 물결: 김정은 국무위원장 서울 방문 환영단 발족 및 행사들
자료방

평화이음 PEACEiUM - 함께 만드는 통일세상
건강방

아스파탐 (Aspartame) 유해성 부작용 : 실명(失明), 암, 여타 질병과 연관 - 뉴트라 스위트 (NutraSweet), 이퀄 (Equal), 아미노 스위트 (AminoSweet)

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

검색기 Home 위로가기↑