Search This Blog

사용법어찌?

메타트레이더 (Metatrader MT4 MT5) 사용법 : 글 목록

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

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

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

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

MediaVOP

나경원 정신승리 갑오브갑 인증 영상
주권방송

[박둥지의 세계의 눈] 5화. 위기의 베네수엘라 “중남미의 비극, 그 뒤에는…”
민플러스

국과수 연구원, ‘1번 어뢰’ 추진체에 ‘부식’ 존재 인정했다
사람일보

2019년 진보민중진영은 무엇을 할 것인가
국민주권연대

[아침햇살8] 김정은 국무위원장의 신년사 -2
노동과세계

말로는 노동 존중, 행동은 노동 탄압
코리아 히스토리 타임스

우리역사 시작은 조이족 한웅
엄마뉴스

신년맞이 '김정은 국무위원장 서울 방문 환영'
백두칭송위원회

[성명]미국의 방해를 물리치고 김정은 위원장 서울 방문을 열렬히 환영하자
변혁과 진보

핵무력 완성에서 핵동결 완료로 전변된 핵정책
환단고기-역사뉴스

현대적 디자인의 가야 금동관은 왜 보물이 되나
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; 속성을 …

시장통

2019년 국제 금 시세 평균 1330달러, 강세장 가능성 40% - Chantelle Schieven
자료방

차트 보는 법: 추세 매매와 장기 차트의 중요성 - 주식 선물 옵션 Forex margin
자주보고自主寶庫

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

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

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

검색기 Home 위로가기↑