제 15 강 Div. Span 태그

◆ 강좌 요점

이번 강좌에서는 공간을 지정하고 style을 적용하는 태그인 DIV와 SPAN에 대해서 알아보도록 하겠습니다.

공간을 지정하는 것에 대해서는 FIELDSET도 마찬가지이기에 함께 다루도록 하겠습니다.

DIV나 SPAN의 경우 공간을 지정하는 것에서 거의 같은 역할을 하지만 실상 미세한 부분에서 차이가 있습니다.

그 차이점은 강좌를 통해 알아보시고, DIV나 SPAN 그리고 FIELDSET을 공간을 담는 상자로 이해하고 시작하는 것이 빠릅니다.

이전 강좌에서 공간에 관한 태그로서 TABLE을 보셨으니 이해의 측면에서 그리 어려운 태그가 아닙니다.

TABLE과 다른점이라면 TABLE은 하나의 공간을 <TD></TD>로 나누어

<TD></TD>의 묶음들의 집합체인 TABLE이 하나의 표 기능을 수행키 위한 태그이지만,

DIV, SPAN, FILEDSET은 그 각각이 하나의 공간을 이룹니다.

또한, TALBE의 경우 TD의 공간(크기)을 먼저 계산한 후 TABLE을 보여주는 방법을 취하지만,

DIV, SPAN, FILEDSET은 바로 보여지기에 렌더링에서도 TABLE보다 뛰어납니다.

DIV, SPAN, FIELDSET 세 태그 모두 특별한 속성은 없으며,

style 속성에 사용되는 요소로서 형태와 기능이 달라집니다.

◆ DIV 태그

DIV 태그는 DIVISION의 약자로 시작태그인 <DIV 속성="요소">와 마감태그인 </DIV>로 구성되어 있습니다.

태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기도 저절로 달라집니다.

그 공간은 줄 단위로 할당되어 태그의 시작 전후에 자동으로 줄바꿈 기능을 가지고 있습니다.

대표적으로 사용되는 속성으로는 style 속성이 있는데 SPAN과 FIELDSET도 공통으로 사용되는 속성이기에

3가지 태그의 소개후에 style 속성을 따로 다루도록 하겠습니다.

◆ SPAN 태그

SPAN 태그는 시작태그인 <SPAN 속성="요소">와 마감태그인 </SPAN>으로 구성되어 있습니다.

태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기도 저절로 달라집니다.

그 공간은 내용에 국한되며, DIV와 달리 태그의 시작 전후 자동 줄바꿈 기능이 없어 연속으로 사용하면, 이웃하게 위치합니다.

SPAN 태그는 연속사용시 이웃하는 성질을 가지고 있기에 글씨에 관한 style을 적용할 때 많이 사용되는 태그입니다.

◆ FILEDSET 태그

FILEDSET 태그는 시작태그인 <FIRLDSET 속성="요소">와 마감태그인 </FIELDSET>으로 구성되어 있습니다.

DIV와 SPAN과 다르게 테두리가 존재하며 모서리 부분이 둥근것이 하나의 특징입니다.

또 하나의 특징이라면, <LEGEND align="left | right | center">제목</LEGEND>를 삽입하여 제목을 추가할 수 있습니다.

태그내에 속성을 적지 않아도 시작태그와 마감태그 사이에 들어가는 내용에 따라 그 공간의 크기도 저절로 달라집니다.

DIV와 마찬가지로 그 공간은 줄단위로 할당되어 태그의 시작 전후에 자동으로 줄바꿈 기능을 가지고 있습니다.

◆ 공통적으로 사용되는 STYLE 속성

DIV, SPAN, FILEDSET 세 태그 모두 사용하는 속성중에 가장 중요한 속성은 style 이라 해도 과언이 아닙니다.

style 속성을 어떻게 사용하느냐에 따라 그 크기와 모양 그리고 기능이 달라지기 때문입니다.

style 속성에 사용하는 세부적인 속성들은 무수히 많지만, 가장 많이 사용되는 몇가지만 알려드리겠습니다.

궁금하신 속성들은 W3schools에서 검색을 통해 알아보시기 바랍니다.

  ▶ width, height

DIV, SPAN, FIELDSET의 크기를 결정짓는 속성입니다.

지금까지 배운 태그들은 크기를 결정짓는 속성을 독립적으로 사용 가능했지만,

DIV, SPAN, FIELDSET의 경우는 style 속성내에서만 사용 가능합니다.

요소로는 크기를 결정짓는 숫자와 동시에 단위(px, pt, cm, %, etc)를 사용하나 단위를 사용치 않으면 px로 인식합니다.

     예) <DIV style="width: 100px; height: 300px">내용</DIV>

          <SPAN style="width: 200; height: 200">내용</SPAN>

          <FIELDSET style="width: 100%; height: 100%">내용</FIELDSET>

  ▶ background

DIV, SPAN, FIELDSET의 배경을 결정짓는 속성입니다.

요소로는 색상을 사용할 수도 있고, 이미지의 주소를 사용할 수도 있습니다.

이전 강좌에서  TABLE의 style 속성을 표로 정리해 드렸는데 그와 동일합니다.

    예) <DIV style="background: 색상">내용</DIV>                                      - 배경색 사용시

          <DIV style="background: url('이미지 주소')">내용</DIV>                    - 배경 이미지 사용시

          <SPAN style="background: 색상">내용</SPAN>                                - 배경색 사용시

          <SPAN style="background: url('이미지 주소')">내용</SPAN>              - 배경 이미지 사용시

          <FIELDSET style="background: 색상">내용</FIELDSET>                    - 배경색 사용시

          <FIELDSET style="background: url('이미지 주소')">내용</FIELDSET>  - 배경 이미지 사용시

  ▶ border

DIV, SPAN, FIELDSET의 테두리를 결정짓는 속성입니다.

요소로는 테두리의 두께, 형태(8가지), 색상을 사용합니다.

(주의, 요소의 3가지를 모두 적지 않아도 무방하지만 형태는 반드시 적어야 합니다.)

border의 형태 8가지는 dotted, dashed, solid, double, groove, ridge, inset, outset 입니다.

이전 강좌에서  TABLE의 style 속성을 표로 정리해 드렸는데 그와 동일합니다.

     예) <DIV style="border: 1 solid #ff0000">내용</DIV>

          <SPAN style="border: 5 dotted #ff0000">내용</SPAN>

          <FIELDSET style="border: 10 double #ff0000">내용</FIELDSET>

  ▶  padding

DIV, SPAN, FILEDSET의 경계에서 내용까지의 여백을 결정짓는 속성입니다.

요소로는 상, 우, 하, 좌 의 여백의 크기(0을 포함한 양의 정수)를 사용합니다.

이전 강좌에서  TABLE의 style 속성을 표로 정리해 드렸는데 그와 동일합니다.

     예) <DIV style="padding: 10">내용</DIV> (외곽 경계에서 상·우·하·좌 : 10px 여백생성)

          <DIV style="padding: 10 20">내용</DIV> (외곽 경계에서 상·하 : 10px, 우·좌 : 20px 여백생성)

          <SPAN style="padding: 10 20 30">내용</SPAN> (외곽 경계에서 상 : 10px, 우·좌 : 20px, 하 : 30px 여백생성)

          <FIELDSET style="padding: 1 2 3 4">내용<FIELDSET> (외곽 경계에서 상 : 1px, 우 : 2px, 하 : 3px, 좌 : 4px 여백생성)

  ▶ margin

DIV, SPAN, FIELDSET의 위치를 결정짓는 속성입니다.

padding과 유사하나 다른 속성으로 padding은 외곽 경계에서 여백을 통해 내용의 위치가 바뀌지만,

margin은 DIV, SPAN, FIELDSET 자체가 margin에 사용되는 요소에 따라 위치가 바뀝니다.

요소로는 상, 우, 하, 좌 의 크기(정수)를 사용합니다.

이전 강좌에서  TABLE의 style 속성을 표로 정리해 드렸는데 그와 동일합니다.

     예) <DIV style="margin: 10">내용</DIV> (외곽 경계가 상·우·하·좌 : 10px 위치이동)

          <DIV style="margin: 10 20">내용</DIV> (외곽 경계가 상·하 :10px, 우·좌 : 20px 위치이동)

          <SPAN style="margin: -10 20 30">내용</SPAN> (외곽 경계가 상 : -10px, 우·좌 : 20px, 하 : 30px 위치이동)

          <FIELDSET style="margin: 1 2 3 -4">내용<FIELDSET> (외곽 경계가 상 : 1px, 우 : 2px, 하 : 3px, 좌 : -4px 위치이동)

  ▶ overflow

DIV, SPAN, FIELDSET의 크기보다 내용의 크기가 클경우 스크롤바를 생성해서 보여줄 것인지

크기 이외의 부분은 숨길것인지에 대한 속성입니다.

overflow 속성을 사용하지 않는다면, 내용물의 크기에 맞게 DIV, SPAN, FILEDSET의 크기가 늘어납니다.

요소로는 auto, hidden, scroll 이 있습니다.

auto의 경우 내용물이 클 경우에만 스크롤바가 생성됩니다.

hidden의 경우 지정된 크기 이외의 부분은 보여지지 않습니다.

scroll의 경우 지정된 내용물의 크기에 상관없이 항상 스크롤바가 생성됩니다.

스크롤바는 각부위의 색상을 지정하지 않는다면 기본적으로 제공되는 형태로 보여집니다.

각부위의 명칭과 관련해서는 이미 카페의 게시물이 있으니 찾아보시기 바랍니다.

     예) <Div style="overflow: auto">내용</DIV>

          <SPAN style="overflow: hidden">내용</SPAN>

          <FIELDSET style="overfloe: scroll">내용</FIELDSET>

  ▶ font

DIV, SPAN, FIELDSET의 내용에 들어가는 글자의 style을 결정짓는 속성입니다.

요소로는 글씨의 형태, 글씨의 크기/줄간격, 글씨체가 있습니다.

개별적으로 지정할 수 있으나 한꺼번에 지정하는 것이 간략하기에 한꺼번에 지정하는 방법만 알려드리겠습니다.

개별적으로 지정하는 방법은 이미 5강에서 공개하였으니 생략하겠습니다.

요소로 사용되는  글씨의 형태는 bold(두껍게), italic(기울임)등이 있습니다.

글씨의 크기 단위는 pt로 1pt부터 사용가능합니다.

줄간격은 pt의 단위로 사용할 수도 있고 글씨의 크기에 비례하여 2배이면 2, 1.5배이면 1.5 이렇게 배수를 사용할 수도 있습니다.

글씨체는 각 개인의 컴퓨터에 설치된 글꼴의 이름을 사용합니다. (굴림체, 돋움체, 바탕체, etc...)

     예) <DIV style="font: bold 9pt/1.3 돋움">내용</DIV> (두껍게 글씨크기:9pt 줄간격:9*1.3pt 글씨체:돋움)

          <SPAN style="font: italic 12pt/15pt 굴림체">내용</SPAN>(기울여서 글씨크기:12pt 줄간격:15pt 글씨체:굴림체)

          <FIELDSET style="font: normal 15pt/2 바탕체">내용</FIELDSET>(글씨크기:15pt 줄간격:15*2pt 글씨체:바탕체)

           (normal일 경우 적지 않아도 무방)

  ▶ color

DIV, SPAN, FIELDSET의 내용에 들어가는 글자의 색상을 결정짓는 속성입니다.

요소로는 영문으로 된 색상명이나 RGB 코드를 사용합니다. (5강과 동일)

     예) <DIV style="color: #ff0000">내용</DIV>

          <SPAN style="color: skyblue">내용</SPAN>

          <FIELDSET style="color: gold">내용</FIELDSET>

  ▶ filter

DIV, SPAN, FIELDSET에 filter를 적용하는 것으로 이것은 카페내 필터강좌가 있으니 생략하겠습니다.

  p.s) 강좌에 사용된 태그에는 대문자를 사용했지만, HTML 소스에서의 대.소문자의 구별이 없으므로 소문자로 사용하셔도 됩니다.

       이번 강좌에서는 특별히 예제의 결과를 보여주지 않았습니다.

       그것은 직접 태그연습장이나 그외 다른방법으로 소스를 작성하여 결과를 보면서 응용하는게 좋다는 개인적인 생각에...

       예전 TABLE 강좌와 함께 만들었으나 강좌에 부합하는 과제물의 구상과

       개인적으로 일이 바빠 카페활동을 못하다보니 이렇게 늦게 15강을 올리게 되었네요

       카페를 오랜만에 둘러보니 과제를 낸다는 것이 이제는 분위기에 맞지 않는다 싶어 강좌만 올립니다. 

       태그의 기초강좌를 시작하면서 막연하게 몇개의 강좌로 구성이 될지 어디까지 다루어야 할지 난감했습니다.

       그것은 강좌를 계속 연재하면서, style 속성을 풀어나갈 때 이미 기초의 범주를 넘어선다는 생각이 들어서였습니다.

       더 많은 기초적인 태그들이 남아있지만, 연재의 기초강좌는 15강을 끝으로 마치겠습니다