Search This Blog

사용법어찌?

Home
MT4
블로그
인터넷
브라우저
드라이브
구글+
푸바
HTML
피드버너
애드센스/기타

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

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

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

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

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 여기에 그림이나 글자 또는 광고 등을 넣음 두번째 영역: 첫번째…

자료방

평화이음 PEACEiUM - 함께 만드는 통일세상
보고寶庫

한일군사정보보호협정 폐기 범국민 서명운동 2018년 5월 15일 ~ 8월 15일
시장통

국가별 미국 국채 (재무성 채권) 보유 현황 - 러시아 거의 절반 처분
시장통략

유로 달러 환율 EUR USD - 호주 환율, 캐나다 환율
건강방

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

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

검색기 Home 위로가기↑