HTML DIV 태그 사용법과 실제 예제

HTML DIV tag : Video 유투브 동영상 반응형 (responsive) 임베드 방법 - 웹페이지 너비에 맞게 비디오 너비 높이 자동 조절

2020-05-12T01:26:00.002-04:00

유투브(YouTube) 비메오(Vimeo) 등에 올려진 동영상을 웹페이지나 블로그에 심는(embed [임베드]) 경우에,

웹페지 너비에 따라 자동으로 비디오 너비(width)와 높이(height)가 조절되게 하는 방법입니다.

이렇게 하는 방법은 여러가지가 나와 있습니다. 아래는, 브라우저 특성을 타지 않으면서도, 간단하고 쉬워 누구나 할 수 있는 방법 가운데 하나입니다.

아래에서 보는 바와 같이, 스크립트는 두 부분으로되어 있습니다.
하나는 클래스(class) 스타일(style)을 지정하는 부분과, 둘은 동영상 임베드 스크립트를 놓는 부분입니다. 각 부분에 대한 설명은 아래쪽에 각각 해놓았습니다.

[동영상 반응형으로 심는 스크립트 예]

[클래스 스타일 지정 부분]

1) 위 클래스 지정부분은 비디오가 들어가는 부분 위쪽에 놓으면 됩니다.
2) 동일한 페이지에 너비/높이 비율이 같은 비디오가 여러개 들어가는 경우에도, 한 번만 놓으면 됩니다.
3) 위에서, 빨강색으로 표시한 padding-bottom: 56.25%; 부분이 비디오의 너비/높이 비율을 설정한 것입니다. 위에서 56.25%는 최근에 많이 쓰이는 16:9 비율을 %로 표시한 것입니다.
56.25 = 9 (높이) ÷ 16 (너비) x 100.

유투브 등에서 동영상 임베드 스크립트를 복사하면, width="560" height="349" 와 같이 해당 동영상의 너비(width)와 높이(height)가 나와 있습니다. 이 수치를 가지고, 비율(%)을 계산하여, 위 빨강색 표시 부분의 수치를 알맞게 변경하면 됩니다.

너비/높이 비율(%) 계산 예)
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/EyIk1kjEWXI?start=190" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

위 스크립트는 유투브에서 복사한 임베드 스크립트 입니다. 빨강색으로 표시한 바와 같이, 너비(width)와 높이(height)가 나와 있습니다. 이것을 다음과 같이 비율(%)로 계산하여 적용하면 됩니다.
비율(%) = 315 (height 높이) ÷ 560 (width 너비) x 100 = 56.25%

최근 비디오는 대체로 16:9 비율 (56.25%)이 많습니다. 예전의 비디오는 4:3 비율 등이 있습니다. 그런 경우에는 위와 같은 방법으로 비율(%)을 계산하면 됩니다.

[동영상 스크립트 넣는 부분]

1) 유트브 등에서 동영상 임베드 스크립트를 복사하면, 위에서 보는 바와 같이, 대체로 <iframe ...... ></iframe>으로 되어 있습니다. 복사한 스크립트를 그대로 <div class="videoTeduri"> 와 </div> 사이에 붙여 넣으면 됩니다.

2) 동영상 스크립트 부분은 웹페이지에서 원하는 위치에 놓으면 됩니다.

[실제로 적용한 모습]
첫번째 비디오는 유투브에서 복사한 스크립트를 그대로 붙여 넣은 것이고, 두번째는 같은 스크립트를 위에서와 같은 방법으로 스타일을 지정하여 붙여 넣은 것입니다. 브라우저 폭을 늘였다 줄였다 해 보면, 그 차이를 볼 수 있습니다.

참고) 한 페이지에, 너비/높이 규격이 서로 다른 동영상을 넣는 경우에는, 클래스(class) 대신에, 고유성을 같는 아이디(id)를 적용하여, 각 비디오 마다 설정부분을 붙여 주면 됩니다.

HTML DIV tag: 세로 정렬하는 방법 - 세로 가운데 정렬, 세로 아래쪽 정렬 - position: relative, position: absolute

2017-08-08T02:11:00.002-04:00

DIV 영역 안의 내용을 위쪽, 가운데, 아래쪽으로 세로 정렬하는 속성에 관한 글들을 찾아 보면, vertical-align="middle"과 같이 vertical-align 속성을 top, middle, bottom으로 한다고 나와 있습니다. 하지만, 실제로 적용해 보면, 어째서 그런지는 알 수 없지만, 되지 않습니다.

DIV 영역의 내용을 세로로 가운데 또는 아래쪽으로 정렬하려면, 아래와 같이, 두 개의 DIV 영역을 설정하고, position 속성을 주어 해결할 수 있습니다.

즉, 내용이 들어 있는 DIV 영역 바깥에 또 하나의 DIV 영역을 설정하고, 내용이 들어 있는 안쪽 DIV 영역의 위치를 지정하는 것입니다. 아래의 예제에서, 빨강색은 바깥쪽 DIV 영역이고, 파란색은 안쪽 DIV 영역입니다.

1. DIV 영역을 세로 아래로 정렬하기

[예제 태그: 두 개의 DIV 영역을 설정하고, 안쪽 DIV 영역을 세로로 아래쪽으로 정렬한 모양]

<div style="width: 100%; border: 1px solid red; height: 150px; position: relative;">
<div style="width: 99%; border: 3px dotted blue; position: absolute; bottom: 0px;">

이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; bottom:0px; 로 설정하면 됩니다.

</div>
</div>

[위의 예제 태그를 실제 적용한 모습: 안쪽의 DIV 영역을 바깥 DIV 영역의 아래쪽으로 세로 정렬한 모습]

이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; bottom:0px; 로 설정하면 됩니다.

2. DIV 영역을 세로 가운데로 정렬하기

[예제 태그: 두 개의 DIV 영역을 설정하고, 안쪽 DIV 영역을 세로로 가운데로 정렬한 모양]

<div style="width: 100%; border: 1px solid red; height: 150px; position: relative;">
<div style="width: 99%; border: 3px dotted blue; position: absolute; top: 50%; transform: translateY(-50%);">

이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; top: 50%; transform: translateY(-50%); 로 설정하면 됩니다.

</div>
</div>

[위의 예제 태그를 실제 적용한 모습: 안쪽 DIV 영역을 바깥 DIV 영역의 세로 가운데로 정렬한 모습]

이 영역은 DIV 영역 안에 들어 있는 또 하나의 DIV 영역입니다.
안쪽의 DIV 영역을 바깥 DIV 영역의 아래 쪽에 위치하도록 하려면,
1) 바깥 DIV 영역의 스타일(style)에 position: relative; 로 설정하고
2) 안쪽 DIV 영역의 스타일(style)에 position: absolute; top: 50%; transform: translateY(-50%); 로 설정하면 됩니다.

참고: 위의 예에서 안쪽 DIV 영역의 너비(width)를 99%로 준 것은 바깥 DIV 영역과 같이 100%를 주면 안쪽 DIV 영역이 바깥 DIV 영역을 벗어나 표시되기 때문입니다. 실제로 적용하는 조건에 맞추어 너비를 조절하면 되겠습니다.

>> HTML DIV tag: 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)
>> HTML DIV tag : DIV 영역 자체를 페이지의 가로 가운데에 위치시키는 방법
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag : DIV 영역에 스타일을 반복적으로 적용하는 방법 - 특정한 페이지만

2016-01-31T10:14:00.001-05:00

블로그 자체가 아니라, 특정한 페이지에서만 특정한 스타일을 반복적으로 적용하고자 할 때에는 그 페이지의 HTML 맨 위에 스타일을 주는 것이 블로그 템플릿에 스타일을 주는 것 보다 간편하고 쉽다. 나중에 그 페이지를 수정할 때에도 좋은 것 같다. 아래는 이 페이지의 HTML 맨위에 "글자 크기를 좀 더 크게 하고, 영역의 아래에 가로 줄을 넣도록" 스타일을 주고, 특정한 DIV 영역에 클래스를 지정하여 CSS를 적용한 것이다.

1. 여기는 DIV 영역이며, 'gangjo' 라는 클래스(class) 이름으로 지정한 내용이 적용되도록 <div class="gangjo">로 설정하였다. 블로그의 모든 페이지에 특정한 CSS가 적용되도록 하려면, 블로그 템플릿(Template)에 넣으면 되지만, 어떤 특정한 페이지에서만 여러번 반복적으로 CSS를 적용하고자 할 때에는 그 페이지의 맨 위에서 스타일(style)을 설정해 주는 것이 편하고 복잡하지도 않아 좋을 듯 하다.

2. 여기는 또 DIV 영역이며, 위에서와 같이 'gangjo' 라는 클래스(class) 이름으로 지정한 내용이 적용되도록<div class="gangjo"> 로 반복하여 설정하였다. 블로그의 모든 페이지에 특정한 CSS가 적용되도록 하려면, 블로그 템플릿(Template)에 넣으면 되지만, 어떤 특정한 페이지에서만 여러번 반복적으로 CSS를 적용하고자 할 때에는 그 페이지의 맨 위에서 스타일(style)을 설정해 주는 것이 편하고 복잡하지도 않아 좋을 듯 하다.

지구별 탐험대. 귀하의 높은 안목을 존경합니다. 쏜 살 같이 빠르고 흐르는 물처럼 막을 수도 없는 것이 세월이다. 오늘 익히면 내일 새롭고 모레는 기억조차도 아니 나는 것이 배움의 길이로다. 가죽으로 싼 책이 닳아 떨어지도록 여러번 그리고 눈 빛이 책을 꿰뚫도록 마음을 가지런히 하여 공부를 해야 하는 것은 그런 까닭이다. 어쩌고 저쩌고..... 주절주절..... 지구별 탐험대. 귀하의 높은 안목을 존경합니다. 쏜 살 같이 빠르고 흐르는 물처럼 막을 수도 없는 것이 세월이다. 오늘 익히면 내일 새롭고 모레는 기억조차도 아니 나는 것이 배움의 길이로다. 가죽으로 싼 책이 닳아 떨어지도록 여러번 그리고 눈 빛이 책을 꿰뚫도록 마음을 가지런히 하여 공부를 해야 하는 것은 그런 까닭이다. 어쩌고 저쩌고..... 주절주절.....

방법은 아래와 같이 간단하니, 누구나 쉽게 페이지를 꾸밀 수 있겠다.
=> 먼저, 블로그 글쓰기 창에서 HTML 편집창으로 들어가, 아래의 첫 번째와 같은 스타일 코드를 HTML 맨 위에 넣는다.
=> 그리고, 글 을 써다가 위에서 준 스타일을 적용할 영역에는 아래 두번 째 예와 같이 클래스(class)로 스타일을 지정해 주면 된다.

[HTML 맨 위에 스타일을 준 예]

> 클래스 이름은 마음대로 만들면 되고, 다만, 이미 있는 이름과 중복되지 않도록 하면 된다.
> 위의 예에서는 클래스 이름을 " gangjo "라고 만들고, 글자크기를 1.5em 으로, 영역 아래에 밑줄을 긋도록, 영역 오른쪽은 줄 바꿈을 하도록, 그리고 영역 윗쪽과 아래쪽의 간격을 각각 1.5em 1em 띄우도록 설정하였다. 스타일 내용은 글꼴, 색상, 배경색, 배경 그림... 등의 속성을 주어 알맞게 꾸미면 된다.
> 그리고 아래의 예에서와 같이, DIV 영역에 class="gangjo" 로 설정하여, 위에서 설정한 스타일이 적용되도록 하였다.
위에서 설정한 스타일을 적용할 모든 DIV 영역에 같은 방법으로 설정하면 된다.

[본문 중에 위에 준 스타일을 적용할 DIV 영역에 클래스를 지정한 예]

<div class="gangjo">
1. 여기는 DIV 영역이며, 'gangjo' 라는 클래스(class) 이름으로 지정한 내용이 적용되도록 <div class="gangjo"> 로 설정하였다.
블로그의 모든 페이지에 특정한 CSS가 적용되도록 하려면, 블로그 템플릿(Template)에 넣으면 되지만, 어떤 특정한 페이지에서만 여러번 반복적으로 CSS를 적용하고자 할 때에는 그 페이지의 맨 위에서 스타일(style)을 설정해 주는 것이 편하고 복잡하지도 않아 좋을 듯 하다.
</div>

위와 같이 스타일을 설정하고, DIV에 클래스(class)로 지정을 해 놓으면, 나중에 스타일만 수정하면 해당되는 모든 DIV 영역에 수정되어 적용되므로 편리하다.
클래스(class)는 비단 DIV 영역에만 줄 수 있는 것이 아니고, <span>태그 등에도 줄 수 있으니, 알맞은 태그를 사용하면 된다.

참고로, 블로그 전체에 특정한 스타일이 적용되도록 하려면, CSS를 블로그 템플릿에 넣어 주면 된다. 이에 대한 자세한 방법은 링크 참조.
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag : DIV 영역 자체에 링크 거는 방법

2015-11-21T05:06:00.000-05:00

DIV 영역 그 자체에 링크를 걸어서 DIV 영역을 클릭하면, 지정된 주소(URL)로 이동하도록 하려면 아래와 같이 스타일(style) 속성으로 지정해 주면 된다.

[DIV 영역 자체에 링크 걸기]

[실제 예제]

이 곳은 DIV 영역이며, 영역 자체에 링크를 걸었다. DIV 영역을 클릭하면 지정된 주소로 이동한다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag : DIV 영역 자체를 페이지의 가로 가운데에 위치시키는 방법

2015-11-21T05:05:00.004-05:00

DIV 영역 그 자체를 페이의 가로 가운데에 위치시키려면 크게 두 가지 경우를 생각해 볼 수 있을 것 같습니다.
하나는 DIV 영역에 포지션(position)을 지정하는 것이고, 또 하나는 포지션을 지정하지 않고 margin 속성을 이용하는 것입니다.

1. 포지션을 지정하지 않고 margin 속성으로 DIV 가운데 위치시키기

[실제 예제]

<div style="background-color:gold; padding:10px; margin: 0 auto; width:300px; height: auto;">
이 곳은 DIV 영역이며, 스타일(style)의 마진(margin)에 인수를 주어 DIV 영역 그 차제가 페이지의 가로로 가운데 위치하도록 함
</div>

이 곳은 DIV 영역이며, 스타일(style)의 마진(margin)에 인수를 주어 DIV 영역 그 차제가 페이지의 가로로 가운데 위치하도록 함

2. DIV 영역을 두 개 겹쳐서 가운데 위치 시키기

위의 첫 번째 방법으로 하면 대체로 잘 작동을 하지만, 특정한 경우에는 위치가 제대로 잡히지 않을 때가 있습니다. 그럴 때는, 위와 같은 방법으로 하되, 그 바깥에 DIV 영역을 하나 더 설정해 줌으로써, 해결할 수 있습니다.

[실제 예제]

<div style=" border: 1px solid red;">
<div style="margin: 0 auto; width:50%; border: 3px dotted blue;">
이곳은 안쪽 DIV 영역이며, 위 1번 방법과 같이 DIV에 margin 속성을 이용하여, DIV영역을 가로로 가운데 위치하도록 함. .....................
</div>
</div>

[실제 적용한 모습]

이곳은 안쪽 DIV 영역이며, 위 1번 방법과 같이 DIV에 margin 속성을 이용하여, DIV영역을 가로로 가운데 위치하도록 함. .....................

3. 포지션을 지정한 DIV 영역을 페이지 가운데 위치시키기

이 방법은 이론적으로는 좋아 보이지만 실제에서는 쉽지가 않은 측면이 있습니다. 페이지에서 절대적 거리(px)를 지정하다 보니, 페이지의 구조나 내용이 변경되거나, 반응형 페이지에서 페이지 폭이 변경되면, 절대적 위치가 바뀌게 되므로 제대로 되지 않습니다. 브라우저에 따라서도 다르게 표시됩니다. 그러므로, 페이지가 완전히 고정되어 변경될 일이 없을 때 사용할 수 있습니다.

[실제 예제]

<div style="position: absolute; top:690px; left: 50%;">
<div style="position: relative; left: -50%; background-color: #ddd; padding:10px;">
방법 3 : 이 곳은 DIV 영역이며, 영역에 포지션(position)을 지정하였고, 영역이 페이지의 가로로 가운데에 위치하도록 스타일(style) 속성을 주었다
</div>
</div>

방법 3 : 이 곳은 DIV 영역이며, 영역에 포지션(position)을 지정하였고, 영역이 페이지의 가로로 가운데에 위치하도록 스타일(style) 속성을 주었다

HTML DIV tag: 세로 정렬하는 방법 - 세로 가운데 정렬, 세로 아래쪽 정렬 - position: relative, position: absolute
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag : 영역 테두리 모서리 둥글게 하기 : border-radius

2015-05-05T03:00:00.003-04:00

DIV 태그로 영역을 만들고 테두리 선을 그리면, 기본적으로 사각형이 된다.
테두리의 모서리를 모두 또는 특정 모서리만 둥글게 하면 페이지에 더 잘 어울릴 때가 있다.
스타일(style)에 border-radius 를 주면 되고, 수치 단위는 px, %, em, pt 등을 쓰면 된다.

[모서리 둥글게 하기]

border-radius: 2em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;

[네 모서리를 모두 둥글게 하기: border-radius: ]

[실제 적용한 모습]

여기는 DIV 역역이다
네 모서리를 모두 둥글게 하였다

[왼쪽 위 모서리만 둥글게 하기: border-top-left-radius: ]

[실제 적용한 모습]

여기는 DIV 역역이다
왼쪽 위 모서리만 둥글게 하였다

[오른쪽 위 모서리만 둥글게 하기: border-top-right-radius: ]

[실제 적용한 모습]

여기는 DIV 역역이다
오른쪽 위 모서리만 둥글게 하였다

[왼쪽 아래 모서리만 둥글게 하기: border-bottom-left-radius: ]

[실제 적용한 모습]

여기는 DIV 역역이다
왼쪽 아래 모서리만 둥글게 하였다

[오른쪽 아래 모서리만 둥글게 하기: border-bottom-right-radius: ]

[실제 적용한 모습]

여기는 DIV 역역이다
오른쪽 아래 모서리만 둥글게 하였다

[각 모서리에 다른 수치 주기: border-radius: 5px 10px 15px 20px ]
border-radius: 5px 10px 15px 20px; 과 같이 수자를 주어도 된다.
순서는 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순이다. 곧, 왼쪽 위 모서리 부터 시계 방향으로 차례로 적용된다.

[예1]

[실제 적용한 모습]

여기는 DIV 역역이다
각각의 모서리에 다른 수치를 주었다.

[예2]

[실제 적용한 모습]

여기는 DIV 역역이다
아래 두 모서리만 둥글게 하였다

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

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

2015-04-11T03:52:00.002-04:00

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

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

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

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

[Div 영역에 스크롤바 지정]

overflow에는 자동 auto, 항상표시 scroll, 항상숨김 hidden 으로 지정할 수 있다.

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

[예1: 내용이 DIV 영역보다 적은 예]

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: scroll; 속성을 주었다. 내용의 양에 관계없이 항상 스크롤바가 표시된다.

[예2: 내용이 DIV 영역보다 많은 예]

[실제 적용한 모습]

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

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

2. overflow: auto; 내용이 DIV 영역 보다 많을 때만 표시
내용의 양이 DIV 영역보다 많으면 스크롤바를 표시하고, 적으면 표시하지 않는다.
텍스트로 된 내용이 DIV 영역보다 많을 때는, 텍스트 문장은 자동 줄바뀜이 되기 때문에, 세로 스크롤바만 표시되고, DIV 영역보다 큰 그림의 경우에는 가로 세로 스크롤바가 모두 표시 된다.

[예1: 내용이 DIV 영역보다 적은 예]

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

[예2: 내용이 DIV 영역보다 많은 예]

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다. ====> 이 글은 예를 보이기 위한 것이므로 읽을 필요가 없다.

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

3. overflow: hidden; 항상 스크롤바 숨김
내용이 DIV 영역보다 많든 적든 항상 스크롤바를 표시하지 않는다.
따라서, DIV 영역을 넘는 내용은 보이지 않게 된다. 의도적으로 내용을 숨기려 할 때나 필요한 기능이다.

[예1: 내용이 DIV 영역보다 적은 예]

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

[예2: 내용이 DIV 영역보다 많은 예]

[실제 적용한 모습]

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.여기는 DIV 스타일에 overflow: auto; 속성을 주었다. 내용의 양이 DIV 영역보다 많으면 스클롤바가 표시되고 적으면 표시되지 않는다.

4. overflow-y, overflow-x
overflow-y 는 DIV 영역 오른쪽의 세로 스크롤바를 말하고, overflow-x 는 DIV 영역 아래의 가로 스크롤바를 말한다.
내용이 텍스트인 경우에는 줄바꿈(wrap)을 하지 않도록 하는 경우 외에는 특별히 쓸 일이 없을 것 같다. DIV 영역보다 큰 그림의 경우에는 쓸 경우가 있을 수 있겠다.
overflow에 주는 속성(scroll, auto, hidden)은 위에서 본 것과 같다.

주) 구글 블로그의 다이나믹뷰 템플릿에서는 이 기능이 제대로 작동하지 않으므로, 일반 템플릿에 이 부분에 대한 예를 별도로 만들어 놓았다.
Overflow-y, Overflow-x 제어의 실제 예 보기 >>

[예1: overflow:auto]

[실제 적용한 모습]

[예2: overflow-x:hidden]
가로(x) 스크롤바를 숨김. 따라서, DIV 영역 너비를 넘는 오른쪽 부분을 보이지 않는다.

[실제 적용한 모습]

[예3: overflow-y:hidden]
세로(y) 스클롤바를 숨김. 따라서, DIV 영역의 세로(길이)를 넘는 부분은 보이지 않는다.

[실제 적용한 모습]

5. white-space:nowrap; 과 overflow-y:hidden

[DIV 영역 안의 텍스트 줄바꿈을 하지 않도록 하는 태그]

white-space:nowrap;

DIV 영역에 들어 있는 문장의 길이가 길면 자동으로 줄바꿈이 되는데, 줄바꿈(wrap)을 하지 않도록 하면 텍스트 문장이 DIV 영역 밖으로 펼쳐 보이게 된다.

[예1: white-space:nowrap]
긴 문장의 자동 줄바꿈을 하지 않도록 하였음. 따라서, DIV 영역을 넘어서 문장이 표시됨

[실제 적용한 모습]

예 1: DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다.DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다.

[예2: white-space:nowrap; overflow-y:hidden]
긴 문장의 줄바꿈을 하지 않도록 하고, 스크롤바 표시를 자동을 설정함.
따라서, 문장의 길이가 DIV 영역의 너비 보다 길면 가로(x) 스크롤바가 표시됨.

[실제 적용한 모습]

예 2: DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다.DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. 문장 끝.

[예3.: white-space:nowrap; overflow:hidden]
긴 문장의 줄바꿈을 하지 않도록 하고, 스크롤바를 표시하지 않도록 설정함.
따라서, 문장의 길이가 DIV 영역의 너비 보다 길지만 스크롤바가 표시되지 않았다.

[실제 적용한 모습]

예 3: DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다.DVI 영역안의 긴 문장 줄바꾸기를 하지 않도록 하였다. 문장 끝.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

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

2014-01-01T08:31:00.001-05:00

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

1. 영역의 보이기 순서(z-index)를 지정하지 않은 태그 모양

[적용한 모습]

첫번째 DIV 영역

두번째 DIV 영역

2. 영역의 보이기 순서(z-index)를 지정한 태그 모양

※ 윗쪽에 있는 DIV영역의 순서를 "2"번으로 주고 아래쪽에 있는 DIV영역의 순서를 "1"번으로 주었다. 아래 그림에서 보듯이, "1"번으로 지정한 아래쪽 DIV영역이 먼저 표시되고, 그 다음에 "2"번으로 지정된 윗쪽 DIV영역이 그 위에 겹쳐서 표시되었다.

[적용한 모습]

첫번째 DIV 영역

두번째 DIV 영역

3. 글자 겹치기(z-index 지정하지 않음)

[적용한 모습]

가나다라 ABCD

3-1. 글자 겹치기(z-index 지정함)

[적용한 모습]

가나다라 ABCD

위 예들에서 보듯이, DIV영역을 겹치면 겹친 영역이 그 만큼 밀리게 된다. 이를 감안하여 DIV 영역의 가로폭을 조절하여야 한다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag: 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)

2014-01-01T07:37:00.001-05:00

※ 브라우저 창의 폭을 넓게 하여 스크롤을 해 보면 각 위치속성의 특징을 쉽게 볼 수 있다.

영역1 : Position: fixed

이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, left, top)로 주었다.

창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.

픽셀(px)의 기준점은 창의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.

[태그 모양]

영역2 : Position: fixed

이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, right, bottom)로 주었다.

창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.

픽셀의 기준점은 창의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.

[태그 모양]

영역3 : Position: absolute

이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.

픽셀(px)의 기준점은 페이지의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.

[태그 모양]

영역4 : Position: relative

이곳은 DIV영역이며, 위치속성을 상대위치(Relative, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.

픽셀(px)의 기준점은 <div>태그가 있는 바로 그 지점과 DIV영역의 왼쪽 위 꼭지점이다.

[태그 모양]

영역5 : Position: absolute

이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, right, bottom)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.

픽셀(px)의 기준점은 페이지의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.

[태그 모양]

※ 위치속성이 절대위치(absolute)나 상대위치(relative)로 지정된 DIV영역이 다른 DIV 영역의 안에 들어 있다면, 픽셀(px)의 기준점은 그 상위 영역의 꼭지점이 됩니다.

그러므로, DIV 태그에 위치를 지정하면, 해당 DIV가 표시되는 위치는 웹페이지의 영역 구조 체계에 따라 다르게 표시되고, 또한, 반응형 템플릿(스킨)의 경우에는 폭이 유동적이므로, 그에 따라 해당 DIV 위치도 유동적으로 표시됩니다.

모든 조건이 동일하더라도, 브라우저에 따라서도 다르게 표시됩니다. 결론적으로 말하자면, DIV 영역에 위치를 지정하면, 접속하는 기기의 화면 해상도에 따라서, 그리고 브라우저에 따라서, 웹페이지가 엉클어질 수 있으므로, 여러 모로 검토해보고 신중하게 사용할 필요가 있겠습니다.

※ 실제로 DVI에 위치를 지정해 보면, 웹페이지(블로그 등)의 틀(레이아웃) 구조에 따라서 그리고 브라우저에 따라서 차이가 있음을 알 수 있습니다. 그러므로, 방문자들이 가장 많이 사용하는 브라우저를 기준으로 하여, 실제로 여러가지 경우를 하나하나 확인하면서 조정할 필요가 있습니다.

개인적인 의견으로는, 어떤 조건에서도 확실하다는 자신감이 없다면, 되도록 DVI에 위치 지정을 하지 않는 것이 좋을 것 같습니다. 참고로, 이 페이지를 열어 놓고 브라우저 폭을 늘였다 줄였다 해 보면, 위에서 말한 내용에 대한 감각을 얻는데 도움이 될 것입니다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag: 영역내 글자(폰트) 종류, 크기, 색상, 굵기, 줄간격 등을 설정하는 방법

2014-01-01T05:46:00.002-05:00

DIV 영역내 글자(폰트)의 글꼴, 크기, 기울임, 색상, 굵기, 줄간격 주기

색   상 color: 색상이름 또는 색상코드 ;
굵   기 font-weight: bold ;
기울임 font-style: italic;
크   기 font-size: 숫자px, 숫자% 또는 숫자em ;
글   꼴 font-family: 굴림, 돋움, 궁서, Arial, 등등 ;
줄높이 line-height: 숫자px, 숫자% 또는 숫자em ;

1. [색상 지정 : color: 색상 이름 또는 코드]

파랑(blue), 빨강(red) 등과 같이 HTML에서 지정할 수 있는 이름은 기본색상 17개를 포함하여 모두 140가지가 있다.
어떤 브라우저에서든 문제없이 정확하게 표현할 수 있는 웹안전색상(Web safe colors) 또는 웹표준색상(Web standard color)은 216가지가 있다.
※참고: 색상이름 및 Hex코드표

예) 윗쪽은 색상이름인 'green'으로 지정하고, 아래쪽은 green의 Hex코드인 #008000 으로 지정함

<div style="color: #008000;">
이곳은 DIV영역이며, 글자색을 Hex코드로 지정함
</div>

2. [폰트(font) 지정]

폰트는 굵기, 기울임, 크기, 글꼴을 한꺼번에 지정할 수도 있고, 각각 지정할 수도 있다.

한꺼번에 지정하려면
font: 굵기 기울임 크기/줄높이 글꼴;
와 같은 순서로 지정하고 속성과 속성사이에는 공백(스페이스 바)을 준다.

각각 지정하려면
font-size: 폰트 크기;
등과 같이 개별적으로 굵기 기울임 크기 줄높이 글꼴을 지정한다.

2-1. [한꺼번에 지정한 태그 모양]

<div style="font: bold italic 2.0em/1.0em 돋움체;">
여기는 DIV영역이며, 폰트(font)에 굵기, 기울임, 크기/줄높이, 글꼴을 한꺼번에 지정하였다
</div>

[실제 적용된 모습]

여기는 DIV영역이며, 폰트(font)에 굵기, 기울임, 크기/줄높이, 글꼴을 한꺼번에 지정하였다

2-2. [폰트 속성을 각각 지정한 태그 모양]

<div style="
font-weight: bold;
font-style: italic;
font-size: 2.0em;
line-height: 1.0em;
font-family: 돋움체;
">
여기는 DIV영역이며, 폰트(font) 속성을 각각 지정하였다.
</div>

[실제 적용된 모습]

여기는 DIV영역이며, 폰트(font)속성을 각각 지정하였다.

※ 위 2-1과 지정하는 방식은 다르지만, 속성값이 똑 같기 때문에 보여지는 결과는 같은 모습이 된다.

3. 글자 굵기(font-weight: )
글자의 굵기는 100~900 까지의 숫자로 지정할 수 있다. 기본설정인 400 은 normal에 해당하고, 700 은 bold에 해당한다.

100	200	300	400	500	600	700	800	900
			normal			bold

4. 글꼴(font-family: )

글꼴은 여러개를 지정할 수 있으며, 가능한 것 부터 앞에서 부터 적용이 된다. 즉,
font-family: 궁서체, 돋움체, 굴림체;
로 지정을 하면, 궁서체 글꼴이 있으면 궁서체로 표시하고, 궁서체가 없으면 다음 글자체인 돋움체로 표시하고, 도움체 글꼴이 없으면 그 다음에 있는 굴림체로 표시한다. 표시할 수 있는 글꼴이 없으면, 기본글꼴로 표시된다.

이 글꼴은 기본 글꼴이다 (= 아무것도 지정하지 않음)
이 글꼴은 궁서체이다 This font is 궁서체
이 글꼴은 돋움체이다 This font is 돋움체
이 글꼴은 굴림체이다 This font is 굴림체

이 글꼴은 Arial 이다 This font is Arial
이글꼴은 Courier 이다 This font is Courier
이 글꼴은 Georgia 이다 This font is Georgia
이 글꼴은 Impact 이다 This font is Impact
이 글꼴은 Verdana 이다 This font is Verdana

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

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

2014-01-01T01:18:00.003-05:00

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

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

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

[태그 모양]

[적용후의 모습]

첫번째 영역: 각각의 영역의 너비를 33%로 주었을 때, 세 영역이 나란히 놓인다.

두번째 영역: 각각의 영역의 너비를 33%로 주었을 때, 세 영역이 나란히 놓인다.

세번째 영역: 각각의 영역의 너비를 33%로 주었을 때, 세 영역이 나란히 놓인다.

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

[태그 모양]

[적용후의 모습]

첫번째 영역: 각각의 영역의 너비를 33%로 주고 안여백(padding)을 주면, 마지막 영역이 아래로 밀리는 현상이 나타난다.

두번째 영역: 각각의 영역의 너비를 33%로 주고 안여백(padding)을 주면, 마지막 영역이 아래로 밀리는 현상이 나타난다.

세번째 영역: 각각의 영역의 너비를 33%로 주고 안여백(padding)을 주면, 마지막 영역이 아래로 밀리는 현상이 나타난다.

위에서 보는 것처럼 여백을 주면 마지막 영역이 아래로 밀리는 현상이 나타난다. 이를 막기 위해서는 너비를 33%보다 조금 줄여서 30% 정도로 주면 나란히 놓인다.

2. 여백을 주었을 때와 주지 않았을 때의 전체 너비 비교

윗쪽은 너비를 33%로 주고 여백을 주지 않은 것이고, 가운데는 여백을 주고 너비를 30%로 줄여서 나란히 놓은 것이다. 아래쪽은 여백을 주고 너비를 30%로 주어 나란히 놓되 오른쪽 끝선을 맞추기 위해 마지막 영역의 float속성을 right로 지정한 것이다.

참고: 브라우저의 가로폭을 크게 넓히면 영역간의 차이가 잘 보인다.

[태그 모양]

[적용후의 모습]

첫번째 영역: 각각의 영역의 너비를 33%로 주고 여백을 주지 않았다

두번째 영역: 각각의 영역의 너비를 33%로 주고 여백을 주지 않았다

세번째 영역: 각각의 영역의 너비를 33%로 주고 여백을 주지 않았다

첫번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

두번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

세번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

첫번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌.
마지막 영역의 float 속성을 right로 주어 오른쪽 끝으로 붙였다

두번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌
마지막 영역의 float 속성을 right로 주어 오른쪽 끝으로 붙였다

세번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌
마지막 영역의 float 속성을 right로 주어 오른쪽 끝으로 붙였다

위에서 보는 것처럼, 여백을 주고 너비를 30%로 줄인 두 번째 예의 전체 너비가 그렇지 않은 첫 번째 예의 전체 너비보다 조금 짧다.
세번째 예는 영역의 오른쪽 끝선을 맞추기 위해, 마지막 영역의 float속성을 right(오른쪽)으로 지정하였다. 따라서 세번째 예에서는 두번째 영역과 마지막 세번째 영역 사이에 공백이 생겼다.

3. DIV와 테이블 태그 비교

[태그 모양]

[실제 적용한 모습]
윗쪽은 DIV영역에 안여백을 주고 영역 너비를 30%로 준 모습이고, 가운데는 테이블의 데이타 셀을 각각 33%로 하여 세 개로 나눈 모습이다. 아래쪽은 DIV영역에 안여백을 주지 않고 영역 너비를 33%로 준 모습이다.
브라우저의 가로폭을 크게 넓혀서 DIV 영역과 테이블 영역의 전체 가로폭의 차이를 비교해 보기 바란다.

DIV 첫번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

DIV 두번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

DIV 세번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

1번 데이타셀 : 각 데이타 셀(td)의 너비를 33%로 주었다

2번 데이타셀 : 각 데이타 셀(td)의 너비를 33%로 주었다

3번 데이타셀 : 각 데이타 셀(td)의 너비를 33%로 주었다

DIV 첫번째 영역: 각각의 영역의 너비를 33%로 주고 안여백을 주지 않았다

DIV 두번째 영역: 각각의 영역의 너비를 33%로 주고 안여백을 주지 않았다

DIV세번째 영역: 각각의 영역의 너비를 33%로 주고 안여백을 주지 않았다

>> 참고: HTML DIV tag: 두개의 영역(그림, 글자, 광고 등)을 나란히 놓기
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag: 영역 배경 색상과 배경그림(이미지) 넣기와 반복/위치 속성주기 - Background-image, Background-color

2013-12-31T09:19:00.001-05:00

[태그 모양]

1. 영역에 바탕 색깔 넣은 모습

<div style="background-color: gold; height: 100px; width: 100%;">
이곳은 DIV영역이며, 바탕색을 금색(gold)으로 지정한 실제 모습이다.
</div>

2. 영역에 바탕 그림 넣기 코드 모습

[영역에 그림을 넣은 실제 모습]

여기는 DIV영역이며, 바탕그림의 크기가 DIV영역보다 작기때문에 그림이 자동으로 반복되면서 DIV영역을 채우게 된다.

2-1. 바탕그림의 반복(repeat)

바탕그림(background-image) 태그는 기본적으로 그림을 반복한다. 즉,
그림의 크기가 영역의 크기보다 작으면, 그림을 가로로 반복하고 또 세로로도 반복하여 영역을 꽉채우게 된다. 바탕그림의 반복을 제어하는 태그는 아래와 같다.

[background-repeat: ]

repeat: 바탕그림을 x축 및 y축으로 반복하여 영역에 채운다. 즉, 가로.세로 모두 반복한다
repeat-x : x축으로만 반복한다. 즉, 가로로만 반복한다
repeat-y : y축으로만 반복한다. 즉, 세로로만 반복한다
no-repeat : 가로.세로 모두 반복하지 않는다

2-11. [바탕그림을 반복으로 지정한 태그모양]

※ 바탕그림의 기본 속성이 반복(repeat)이기 때문에, 지정을 하지 않은 것과 같은 결과가 된다.

[바탕그림을 반복(repeat)로 지정한 모습]

2-12. [바탕그림을 x축(가로)으로만 반복하도록 지정한 태그모양]

[실제 적용한 모습]

※ 바탕그림이 가로로만 반복하여 채워지고 영역의 아랫쪽은 그냥 비어 있다.

2-13. [바탕그림을 y축(세로)으로만 반복하도록 지정한 태그모양]

[실제 적용한 모습]

※ 바탕그림이 세로로만 반복하여 채워지고 영역의 오른쪽(가로쪽)은 그냥 비어 있다.

2-14. [바탕그림을 반복하지 않도록(no-repeat) 지정한 태그모양]

[실제 적용한 모습]

※ 바탕그림이 가로.세로 어느쪽도 반복하지 않았다.
이와 같이 영역보다 그림이 작을 경우에, 그림의 위치를 지정할 수도 있다. 방법은 아래와 같다.

2-2. 바탕그림 위치 지정(position)

[background-position: ]

1. 퍼센트(%)로 지정하기
1) 모양: background-position: x% y%;
2) 의미: DiV영역의 왼쪽 위 꼭지점의 좌표를 (0% 0%)로 한 상대적 좌표를 지정하는 방법이다. 첫번재의 X%는 X축(가로)의 상대적 위치를 말하고, 두번째의 y%는 y축(세로)의 상대적 위치를 말한다. 따라서, 오른쪽 아래 꼭지점의 좌표값은 (100% 100%)가 되고, 영역의 한 가운데 좌표는 (50% 50%)가 된다.

2. 픽셀(pixels)로 지정하기
1) 모양: background-position: xpx ypx;
2) 의미: DiV영역의 왼쪽 위쪽 꼭지점의 좌표를 (0px 0px)로 한 상대적 좌표를 지정한다. 위에서와 마찬가지로 앞쪽은 x축(가로)를 뜻하고 뒷쪽은 y축(세로)를 뜻한다.

3. 문자로 지정하기
1) 모양: 좌우지정문자 상하지정문자;
2) 의미: 앞쪽은 좌우의 위치를 말하고, 뒷쪽은 상하위치를 말한다. 지정하는 문자는 아래와 같다.

left top
left center
left bottom

center top
center center
center bottom

right top
right center
right bottom

left top	center top	right top
left center	center center	right center
left bottom	center bottom	right bottom

4. 바탕그림의 위치를 지정하지 않을 경우에는 기본값인 (0 0)이 적용된다. 즉, 영역의 왼쪽 위 꼭지점에 위치한다.

※ 픽셀은 고정된 절대위치이고, 나머지는 유동적인 상대위치이므로, 브라우저의 가로폭에 따라 조절 된다.
영역의 기본위치 점은 영역의 왼쪽 위 꼭지점(0 0)이고, 그림의 위치를 나타내는 기준 점은 그림의 왼쪽 위 꼭지점이다.
즉, (50px 100px)은, 영역의 왼쪽 끝선에서 그림의 왼쪽 위 꼭지점까지의 픽셀피치가 50픽셀이고, 영역의 위쪽 끝 선에서부터 그림의 위쪽 꼭지점까지의 픽셀피치가 100픽셀임을 말한다.

2-21. [바탕그림위치를 50% 50%로 준 태그 모양]

[적용한 모습]

2-22. [바탕그림위치를 50px 50px로 준 태그 모양]

[적용한 모습]

2-23. [바탕그림위치를 center center로 준 태그 모양]

[적용한 모습]

※ 여기에서 살펴본 배경 색상과 그림에 관한 모든 태그는 DIV태그가 아닌 다른 태그들에서도 마찬가지로 적용이 됩니다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag: 테두리 너비 지정하는 방법 - WIDTH : 픽셀(px) 또는 퍼센트(%)

2013-12-25T17:42:00.003-05:00

DIV영역의 가로너비는 퍼센트(%) 비율로 줄 수도 있고, 픽셀(px)단위로 고정시킬 수도 있다.

블로그나 홈페이지의 방문자들은 다양한 크기의 모니터를 사용하고 있고, 브라우저의 폭도 다양하게 설정하여 사용하므로, 픽셀 보다는 브라우저폭에 따라 조절되는 퍼센트를 사용하는 것이 유연성을 높일 수 있을 것이다.

브라우저의 너비를 넓혔다 줄였다 하면서, 살펴보면 각각의 설정에 따라 결과가 어떻게 다른지 쉽게 이해할 수 있을 것이다.

주) 이 블로그의 템플릿이 고정너비로 되어 있어 작동이 되지 않아, 이 페이지의 HTML 파일을 구글 드라이브에 올려 놓았습니다. 아래 그림과 같이, 링크 페이지에서 파일을 다운 받아 열고, 브라우저의 폭을 조절해 보면 어떻게 작동되는지 볼 수 있습니다. DIV 가로 너비 예제

[DIV 영역 너비 설정의 종류]

width: 111px; <= 너비가 111픽셀로 고정
width: 100%; <= 너비가 브라우저 너비에 따라 조절됨
max-width: 500px; <= 너비가 최대 500픽셀 이내에서 브라우저 너비에 따라 조절됨
min-width: 100px; <= 너비가 최소 100픽셀 이상에서 브라우저 너비에 따라 조절됨

[영역의 가로 너비를 650픽셀로 고정시킴]

<div style="border: 1px solid #48BAE4; height: auto; width: 650px;">
픽셀(px)로 너비를 고정하여, 브라우저 폭이 좁아지거나 넓어져도 그에 맞추어 영역이 조절되지 않고 고정되어 있다.
</div>

[가로너비를 브라우저의 가로폭에 따라 조절되도록 하되 최대너비를 650px로 고정시킴]

<div style="border: 1px solid #48BAE4; height: auto; max-width: 650px;">
브라우저 너비에 따라 영역의 너비가 조절되지만, 최대 650픽셀까지만 확대된다.
</div>

[영역의 가로 너비를 최소 300픽셀로 줌]

<div style="border: 1px solid #48BAE4; height:auto; min-width: 300px;">
브라우저 너비에 따라 영역의 너비가 조절되지만, 최소 300픽셀 까지만 축소된다. 브라우저 너비를 좁혀서 바로 아래의 300픽셀로 고정된 경우와 비교해 보기 바람.
</div>

이 영역은 너비가 300픽셀로 고정된 것임

[영역의 가로 너비를 100퍼센트로 줌]

<div style="border: 1px solid #48BAE4; height: auto; width: 100%;">
브라우저 폭에 따라 영역의 너비가 조절된다. 너비를 지정하지 않으면 기본적으로 100%가 적용되므로, 너비를 100%로 주면 너비를 주지 않은 것과 같은 결과가 된다. 바로 아래의 예와 비교해 보기 바람. 다만, 브라우저에 따라 처리하는 방식이 다른데서 오는 실제적인 차이가 있다.
</div>

이 영역은 너비(width)를 적지 않음

[영역의 가로 너비를 50%로 줌]

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag: 테두리선 종류 - BORDER LINE TYPE : solid, dotted, dashed, double, groove, inset, outset, ridge

2013-12-25T16:40:00.004-05:00

DIV영역의 테두리선 종류를 잘 이용하면, DIV영역이 페이지에 잘 어울리도록 하거나 또는 눈에 잘 띄도록 할 수 있다.

[선의 종류]

solid, dotted, dashed, double, groove, inset, outset, ridge

border: 선굵기 선종류 선색상;

[Solid 1px 을 적용한 모습]

<div style="border: 1px solid #48BAE4; height: auto; padding:10px;">
Solid 1px을 적용한 모습
</div>

[Dotted 1px 을 적용한 모습]

<div style="border: 1px dotted #48BAE4; height: auto; padding:10px;">
Dotted 1px을 적용한 모습
</div>

[Dashed 1px 을 적용한 모습]

<div style="border: 1px dashed #48BAE4; height: auto; padding:10px;">
Dashed 1px을 적용한 모습
</div>

[Double 5px 을 적용한 모습]

<div style="border: 5px double #48BAE4; height: auto; padding: 10px;">
Double 5px을 적용한 모습
</div>

[Groove 5px 을 적용한 모습]

<div style="border: 5px groove #48BAE4; height: auto; padding: 10px;">
Groove 5px을 적용한 모습
</div>

[Inset 5px 을 적용한 모습]

<div style="border: 5px inset #48BAE4; height: auto; padding: 10px;">
Inset 5px을 적용한 모습
</div>

[Outset 5px 을 적용한 모습]

<div style="border: 5px outset #48BAE4; height: auto; padding: 10px;">
Outset 5px을 적용한 모습
</div>

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag - 테두리 그리기 STYLE - BORDER

2013-12-25T16:06:00.002-05:00

페이지 안에 영역을 설정하는 태그가 DIV이다.
DIV 영역은 설정하되 테두리선이 표시되지 않도록 할 수도 있고, 테두리선을 모두 또는 일부만 표시할 수도 있다.

테두리(border: 보더) 속성 주기

[사방의 테두리선을 일괄적으로 표시하는 방법]
border: 1px solid gold
의미 => 선굵기: 1px, 선종류: 직선(solid), 선색상: 금색(gold)

[특정한 쪽만 테두리선을 표시하는 방법]
영역 윗쪽 테두리선만 표시 border-top: 1px solid gold
영역 오른쪽 테두리선만 표시 border-right: 1px solid gold
영역 왼쪽 테두리선만 표시 border-left: 1px solid gold
영역 아래쪽 테두리선만 표시 border-bottom: 1px solid gold

1.[태그 모양: DIV 영역은 설정하되 테두리 선을 표시하지 않음]

<div style="height: auto; width: 100%;">
여기는 DIV영역이지만, 테두리 선을 표시하지 않음
</div>

1-1.[실제 적용한 모습]

여기는 DIV영역이지만, 테두리 선을 표시하지 않음

2.[태그 모양: 영역의 사방 테두리를 일괄적으로 표시함]

<div style="height: auto; width: 100%; border:1px solid gold;">
여기는 DIV영역이며, 테두리 선을 일괄적으로 표시함
</div>

2-1.[실제 적용한 모습]

여기는 DIV영역이며, 테두리 선을 일괄적으로 표시함

3.[태그 모양: 영역의 윗쪽 테두리만 표시함]

<div style="height: auto; width: 100%; border-top:1px solid gold;">
여기는 DIV영역이며, 윗쪽 테두리선만 표시함
</div>

3-1.[실제 적용한 모습]

여기는 DIV영역이며, 윗쪽 테두리선만 표시함

4.[태그 모양: 영역의 오른쪽 테두리만 표시함]

<div style="height: auto; width: 100%; border-right:1px solid gold;">
여기는 DIV영역이며, 오른쪽 테두리선만 표시함
</div>

4-1. [실제 적용한 모습]

여기는 DIV영역이며, 오른쪽 테두리선만 표시함

5.[태그 모양: 영역의 왼쪽 테두리만 표시함]

<div style="height: auto; width: 100%; border-left:1px solid gold;">
여기는 DIV영역이며, 왼쪽 테두리선만 표시함
</div>

5-1.[실제 적용한 모습]

여기는 DIV영역이며, 왼쪽 테두리선만 표시함

6.[태그 모양: 영역의 아래쪽 테두리만 표시함]

<div style="height: auto; width: 100%; border-bottom:1px solid gold;">
여기는 DIV영역이며, 아래쪽 테두리선만 표시함
</div>

6-1.[실제 적용한 모습]

여기는 DIV영역이며, 아래쪽 테두리선만 표시함

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag : 영역 밖과 안쪽에 여백주기 - 마진과 패딩 Margin / Padding

2013-12-25T12:07:00.002-05:00

DIV는 페이지 안에서 영역을 설정하는 것이다. DIV영역의 테두리와 바깥쪽과의 사이에 여백을 줄 때는 마진(Margin)을, 그리고 DIV영역 테두리와 안쪽과의 사이에 여백을 줄 때는 패딩(Padding)을 사용한다.

margin과 padding에 여백을 주는 방법은 같다.

margin: 1px 2px 3px 4px
padding: 1px 2px 3px 4px
순서는 위쪽에서 부터 시계방향이다. 즉, 위쪽 여백 1px, 오른쪽 여백 2px, 아래 여백 3px, 왼쪽 여백 4px을 뜻한다.

특정한 쪽에만 여백을 줄 때는 다음과 같이 하는 것이 편하다.

위쪽 바깥 여백    => margin-top: 1px
오른쪽 바깥 여백 => margin-right: 1px
아래쪽 바깥 여백 => margin-bottom: 1px
왼쪽 바깥 여백    => margin-left: 1px

위쪽 안 여백    => padding-top: 1px
오른쪽 안 여백 => padding-right: 1px
아래쪽 안 여백 => padding-bottom 1px
왼쪽 안 여백    => padding-left: 1px

[DIV 영역에 여백을 주지 않은 모양새]

<div style="border: 3px solid gold; float: left; height: auto; width: 200px;">
안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

여백을 주지 않은 모양새이다. 바깥 여백도 안 여백도 주지 않았다. 따라서, 이 DIV영역의 바깥쪽과 테두리 사이에 여백이 없이 딱 붙어 있다. 마찬가지로 DIV영역 테두리와 안쪽의 내용도 딱 붙어 있다.

안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다. 안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다. 안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

[바깥 여백을 준 모습]

<div style="border: 3px solid gold; float: left; height: auto; width: 200px; margin: 15px 25px 15px 0px;">
안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

바깥 여백을 주어, DIV영역 테두리와 바깥 내용과의 사이에 여백이 생겼다.
전체적인 모양새에 비추어 알맞는 수치를 주면 된다.
왼쪽은 여백을 굳이 줄 필요가 없어 주지 않았다.

[바깥 여백과 안 여백을 준 모습]

<div style="border: 3px solid gold; float: left; height: auto; width: 200px; margin: 15px 25px 15px 0px; padding: 10px;">
안쪽 여백을 주지 않았다. 글이 DIV영역 테두리에 바짝 붙어 있다. DIV영역 테두리와 바깥쪽도 여백 없이 붙어 있고, 안쪽도 여백없이 붙어 있다. 이하는 읽을 필요가 없다. 여백의 상태을 보여주기 위해 똑 같은 말을 계속 써 놓은 것이다.

바깥 여백과 함께 안 여백을 주어 DIV영역 테두리와 바깥 내용과의 사이 그리고 안쪽 내용과의 사이에 여백이 생겼다.

※ 위의 예에서는 DIV영역의 테두리를 (황금색으로) 표시하였기 때문에, 바깥 여백인 마진을 준 것과, 안 여백인 패딩을 준 모양이 서로 다르게 보인다.
테두리를 표시하지 않게 되면, 외관상으로는 마진을 준 것과 패딩을 준 것이 구분되지 않는다.

예컨데,
margin-right: 10px; padding-right:10px; 로 준 것과
margin-right: 20px; 로 준 것과
padding-right: 20px; 로 준 것은 모두 DIV영역 안의 내용과 밖의 내용과의 사이 여백이 20px이 되므로 결과적으로는 여백만을 볼 때는 모두 같은 결과가 되는 것이다.

그러나, DIV 영역 안의 내용이 차지하는 너비를 기준으로 보면 위 경우들은 서로 다르다.
예를 들어, DIV영역의 너비(width)를 100 px로 설정하였다고 가정해 보자.

마진은 얼마를 주던 DIV 안의 내용 너비에는 변화가 없다. 마진은 DIV 영역의 테두리를 기준으로 바깥쪽으로 밀어 내어 여백을 만들기 때문이다.

패딩은 DIV 영역안의 내용이 차지하는 공간을 줄여서 테두리와의 사이에 여백을 만들기 때문에, 패딩을 주면 실제 내용이 차지하는 공간은 DIV 영역보다 작게 된다. 왼쪽 패딩(padding-left)을 10px로 주면, 실제 내용이 차지하는 너비는 DIV 너비 100 px에서 10 px 이 줄어 든 90 px 이 된다.

따라서, 상황에 따라 마진과 패딩을 알맞게 적용하면 될 것이다.

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

HTML DIV tag: 아랫글 올려 붙이기 - float: left/right

2013-12-25T10:58:00.001-05:00

DIV영역의 가로폭이 그리 넓지 않을 때에는, 아래 글이나 그림을 DIV영역과 나란히 되도록 올려 붙이는 것이 전체적으로 모양새가 나은 때가 있다.

방법은 DIV에 플로우트(float: 무엇이 무엇 위에 떠다) 속성을 지정하면 된다.
float: left <= DIV영역을 왼쪽에 놓음
float: right <= DIV영역을 오른쪽에 놓음

1.[태그 모양 : float 속성을 주지 않음]

<div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px;">
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.

1-1.[실제로 보이는 모양]

여기는 DIV 영역이다

여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.

2.[태그 모양 : DIV영역의 오른쪽 빈 공간으로 아래의 글을 나란히 올려 붙임]

<div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px; float: left;">
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.

2-1.[실제로 보이는 모양 : DIV 영역 오른쪽 옆으로 올려 붙임]

여기는 DIV 영역이다

여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다.DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.

3.[태그 모양 : DIV영역의 오른쪽과 아래쪽에 바깥 여백을 줌]

<div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px; float: left; margin: 0px 15px 5px 0px;">
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.

3-1.[실제로 보이는 모양 : DIV 영역 오른쪽 옆으로 올려 붙이고 여백을 줌]

여기는 DIV 영역이다

4.[태그 모양 : DIV영역의 왼쪽으로 올려 붙이고 여백을 줌 : float: right ]

<div style="border: 3px solid gold; height: auto; padding: 10px; width: 150px; float: right; margin: 0px 0px 5px 15px;">
여기는 DIV 영역이다
</div>
여기부터는 DIV영역 아래에 있는 내용이다. DIV영역의 가로폭이 아주 작기 때문에 옆에 빈공간이 커서 모양새가 좋지 않다. 하여, DIV영역 아래에 있는 이 내용을 DIV영역과 나란하게 올려 붙이려 하는 것이다. DIV는 줄바뀜이 한 번 일어나고, 여백이 없다. 따라서, 아래의 글을 올려 붙이고 바깥여백을 적당하게 주어 모양새를 맞춰야 한다.

4-1.[실제로 보이는 모양 : DIV 영역 왼쪽으로 올려 붙이고 여백을 줌]

여기는 DIV 영역이다

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

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

2013-12-25T03:04:00.003-05:00

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

HTML DIV tag: 좌우정렬하기 ALIGN : left, center, right

2013-12-25T02:33:00.001-05:00

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

세로정렬은 되지 않는다.
>> DIV 영역을 세로로 가운데 또는 아래로 정렬하는 방법 설명 페이지 보기

>> DIV 영역을 세로 정렬 - 세로 가운데 정렬, 세로 아래쪽 정렬 방법
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...

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

2013-12-24T12:32:00.002-05:00

블로그나 웹페이지를 보면, 그림이나 광고 등을 좌우로 나란하게 배치해 놓은 것을 볼 수 있다. 표(table)를 이용하여도 되고, 아래와 같이 DIV태그를 사용하여도 된다.

방법은 DIV 영역을 2개 만든 다음, 두 영역을 나란히 붙히는 것이다.

1. 영역 2개 만들기

[태그 모양]

[적용후 모습]

첫번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음

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 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두 영역사이를 띄우려면, margin(바깥 여백)을 준다.
첫번째 영역의 오른쪽에 여백을 주어도 되고, 두번째 영역의 왼쪽에 여백을 주어도 된다. 여기서는 첫번째 영역의 오른쪽에 여백을 준다.

[태그 모양]

<div style="width:200px; height:150px; border:1px solid red; float:left; margin-right:10px;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
오른쪽에 바깥여백을 줌 => margin-right:10px;
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float:left;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 오른쪽에 바깥여백을 줌 => margin-right:10px; 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

3.두 영역을 나란히 놓되, 첫번째 영역은 왼쪽에 붙이고, 두번째 영역은 오른쪽으로 붙이기

[태그 모양]

<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: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:right 여기에 그림이나 글자 또는 광고 등을 넣음

※ 영역 아래의 글이 따라 올라가는 것 막기
위와 같이 영역을 설정하고 나면, 그 아래에 있는 글이나 그림이 영역 옆으로 딸려 올라가게 된다. 이것을 막는 방법은 몇 가지가 있는데, 그 가운데 가장 편한 방법은 두번째 영역을 지정한 </div>에 바로 붙여서 <div style="clear:both:"></div>를 추가하는 것이다.

[태그 모양]

<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: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div><div style="clear:both:"></div>

※ 너비주기
실제로는 영역의 높이(height) 그리고 테두리(border:~)를 설정할 필요가 없는 경우가 많다. 그림이나 글씨 등을 넣게 되면, 높이는 그에 따라 자동으로 맞추어 지기 때문이다.

너비(width)는 두개의 영역이 나란히 놓여야 하므로 지정을 해주어야 한다.
전체 너비는 100%이므로, 왼쪽 오른쪽의 너비를 알맞은 비율(%)로 주어도 되고
예) width: 30%

비율이 아닌 고정너비(px)단위로 지정을 해주어도 된다.
예) 250px

[태그 모양: 왼쪽 영역의 너비는 30%를 주고, 오른쪽 영역의 너비는 65%를 줌, 두 영역 사이는 자동으로 5%(=100% - 30% - 65%)가 됨 ]

<div style="width: 30%; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width: 65%; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:right 여기에 그림이나 글자 또는 광고 등을 넣음

※ 테두리와 안의 내용을 모두 지우고 나면 다음과 같다.

[태그 모양]

참고: HTML DIV tag: 세 개의 DIV영역을 가로로 나란히 놓는 방법 - 테이블과 비교
>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...