div의 테두리를 결정짓는 border

 div 태그의 요소와 속성 

div태그의 기본적인 요소는 테이블태그 와 같은  width (넓이결정) 와  height (높이결정) 속성과 속성값으로 면적을 가지는 block요소를 가진 태그 입니다.

<div> </div> 이렇게 태그내에 아무런 내용을 주지 않은 빈태그 일지라도 p태그와 같은 문단의 단락을 결정 해주게 됩니다.

넓이와 높이를 결정 하는 스타일을 주면 스타일 속성 값 만큼의 블록을 갖게 되는 요소를 가지고 있죠

스타일

위의 스타일 이라는 글자를 <div> 스타일 </div>  이렇게 태그와 태그 사이에 넣은 것인데요 

태그에 아무런 속성과 값 스타일을 주지 않을 경우 태그 내의 글자는 그냥 왼쪽의 상단에 위치 하게 되며 차지 하는 면적도 p태그 와 같이 한줄의 면적 만을 가지게 되는 것 입니다.

이때 태그내의 콘텐츠는  <div> 태그로 감싸 있어 상위에 주어진 값들은 영향을 미치지 못하며 글쓰기로 입력한 기본 값인 14pt의 크기가 적용 됩니다.

그럼 태그에 속성 값을 주어 block 확보와 폰트 사이즈를 변경 시켜 보도록 합니다.

< div style="width:100%; height:40px; text-align:center; padding-top:7px; font-size:16pt;" >스타일 < /div >

스타일

비록 테두리는 없지만 스타일대로 넓이와 높이 값을 가진 블록을 형성 하고 있으며 폰트값이 16pt 의 크기로 글자크기가 적용되고 위치는 center적용으로 중앙에 위치 한 것을 알수가 있습니다.

 border 엘리먼트의 속성과 속성값

그럼 여기에 테두리를 결정하는 border 엘리먼트에 값을 주어 가시적인 block을 확인 해 보도록 합니다.

< div style="width:100%; height:40px; text-align:center; padding-top:7px; font-size:14pt;  border:1px solid red ;" > 스타일 < /div > 

아래는 결과 입니다.

스타일

border 의 속성으로는 선의종류, 선의굵기  와  선의 컬러 가 있으며 이 외의 속성으로는 테두리의 모서리 를 둥글게 해 주는  border-radius  속성이 있습니다.

border-radius 속성 페이지 보기 

이 속성들에  속성값을 주어  div  레이 아웃의 모습을 다양 하게 변화 시켜 주면 되겠 습니다.

선의종류 값으로  solid  실선  또는  dotted  점선  dashed  짧은실선 등이 있습니다.

선의굵기 값의 단위로는 px픽셀 단위를 사용 합니다.

선의 색상  값 으로는  # 아스키16진수값  예) #ff1818 이런 식으로 선언  해 줍니다.

  

또는  rgb(삼원색 적색,그린색,청색값)을 , 콤마 부호를  찍어 구분 하고 중괄호속에 선언  하여  색상코드를 지정 해 주도록 하며 이때 rgb와 중괄호가 간격이 없도록 반드시  붙혀 주어야 합니다.

또는  라틴 고유 컬러명(red, blue, black, orange, white, green, lime  등 고유명 으로 값을 표시 해 주도록 합니다.

위의 div style에 아래 예제들 처럼  border  의 속성에 추가로 선의 컬러와 굵기 및 형태 값을 더해 주고 폰트 컬러를 blue로 지정 해 보는 코딩을 해보겠습니다.

예제1)

< div style ="border:1px solid #ffc200;" > 스타일 </div >

예제2)

< div style ="border:2px dashed rgb(209,200,0);" > 스타일 </div >

예제3)

< div style ="border:3px dotted orange;" > 스타일 </div >

아래는 결과 입니다.

예제1)

스타일

예제2)

스타일

예제3)

스타일

만약 위의 코딩에서 배경색과 폰트의 컬러및 폰트 크기 그리고 박스의 테두리를 달리 해서 코딩 하고 싶을 경우 아래의 예제 처럼 코딩을 해 주면 되겠죠

예제1)
<div class="abod">스타일</div>

예제2)
<div class="bbod">스타일</div>

예제3)
<div class="cbod">스타일</div>

스타일은 아래 시트를 만들어 간접 방식으로 제어 합니다.

<style>
예제1)
.abod{
border:1px solid #ffc200;
width:340px; height:40px; 
text-align:center; 
padding-top:7px; 
font-size:14pt; 
color:#ff1818;
background:#ffc200;
border-radius:0.4em;
}
예제2)
.bbod{
border:2px dashed rgb(209,200,0); 
width:340px; height:40px;
text-align:center; 
padding-top:7px; 
font-size:16pt;
font-weight:bold; 
color:rgb(200,180,0); 
background:rgb(0,0,200);
border-radius:0.4em;
}
예제3)
.cbod{
border:3px dotted orange; 
width:340px; height:40px; 
text-align:center; 
padding-top:7px; 
font-size:18pt;
color:lime; 
background:red;
border-radius:0.4em;
}
</style>

아래는 결과 입니다. 

예제1)

스타일

예제2)

스타일

예제3)

스타일

위의 결과에서 폰트의 크기를 달리 적용 하므로 해서 예제2) 와 예제3)은 폰트가 박스의 포지션 middle 정렬이  되지  않는다는 것을 알수 있습니다.

여기서 웹표준을 선언 하게 되면  border 의 값은 div 태그의 바같쪽에 더해져  테두리가 만들어 진다는 것에 유념 해서 코딩을 해 주어야 합니다.

<style>
예제4)
.dbod{
border:5px solid blue;
width:340px; height:40px;
text-align:center;
padding-top:7px;
font-size:14pt;
color:#ff1818;
background:#ffc200;
border-radius:0.4em;
}
예제5)
.ebod{
border:10px solid blue;
width:340px; height:40px;
text-align:center;
padding-top:7px;
font-size:14pt;
color:#ff1818;
background:#ffc200;
border-radius:0.4em;
}
</style>

예제4)

<div class="dbod">스타일</div>

예제5)

<div class="ebod">스타일</div>

아래는 결과 입니다.

예제4)

스타일

예제5)

스타일

위의결과에서 처럼 웹표준이 적용되지 않을 경우 똑같은 크기로 적용된 박스의 크기가 선의 굵기 때문에 선의 굵기 만큼 커진다는 것을 알수 있습니다.

모바일 앱의경우 웹표준이 적용되지 않습니다.

그러므로 위의 두개의 박스는 선의 굵기의 차이 만큼 전체 크기가 차이가 나게 됩니다.

웹표준으로 박스롤 만들경우 선의 외부쪽을 기준으로 크기가 정해 지게 됩니다.

참고로 현재의 웹 에디터에는웹표준이 기본적으로 적용되고 있습니다.

모바일앱에서는 웹표준이 적용되지 않기 때문에 박스에 box-sizing:border-box;를 선언 해 주어야 합니다.

박스의 크기는 콘텐츠 기준에서 border 기준으로 전환 하게 되므로 테두리 선의 굵기에 상관 없이 박스의 크기는 박스의 외부를 기준으로 정해 지게 됩니다.

 

<style>
예제6)
.fbod{
box-sizing:border-box;
border:5px solid blue;
width:340px; height:40px;
text-align:center;
padding-top:7px;
font-size:14pt;
color:#ff1818;
background:#ffc200;
border-radius:0.4em;
}
예제7)
.gbod{
box-sizing:border-box;
border:10px solid blue;
width:340px; height:40px;
text-align:center;
padding-top:7px;
font-size:14pt;
color:#ff1818;
background:#ffc200;
border-radius:0.4em;
}
</style>

예제6)

<div class="fbod">스타일</div>

예제7)

<div class="gbod">스타일</div>

아래는 결과 입니다.

예제6)

스타일

예제7)

스타일

위의 결과 에서처럼 웹표준 box-sizing:border-box 가 적용 되었을 경우 선의 외경을 기준으로 정하기 때문에 선과 콘텐츠가 포함되는 크기는 동일 해진다는 것을 알수 있습니다.

요즘은 태이블 태그 대신 div태그로 레이아웃을 구성하는 방법을 많이 사용 하고 있습니다.

테이블 태그와 다른점은 테이블 태그는 하위 속성 태그 들을 가지며 테이블 크기는div태그처럼 auto값 과 퍼센트 값 픽셀값을 가지고 있지만  내부의 하위 태그인 td태그에는 auto값을 정의 할수 없습니다. 

테이블 테그는 디테일한 구조의 표나 박스를 만드는 것에는 효과적으로 사용 할수 있습니다.

 

<div> 태그는 단독 태그이기 때문에 구애 받음 없는 영역 구성에 효과 적 이라 할수가 있습니다.

특히   auto 기능으로 용이한 레이 아웃을 구성 할수  있다는 장점이 있으며 기본적으로 한칸의 블록만을 가진 단순한 구조를 가진 태그 입니다.

<style>

예제1)
.hbod{
box-sizing:border-box;
border:px solid blue;
width:340px; height:100px;
text-align:left; 
padding:7px; 
font-size:14pt; 
color:#ff1818;
background:#ffc200;
border-radius:0.4em;
}

예제1-1)
.ibod{
box-sizing:border-box;
border:px solid blue;
width:340px; /*height:100px;*/
text-align:left;
padding:7px;
font-size:14pt;
color:#ff1818;
background:#ffc200;
border-radius:0.4em;
}
예제1-2)
.jbod{
box-sizing:border-box;
border:1px solid blue;
width:340px; height:auto;
text-align:left;
padding-top:7px;
font-size:14pt;
color:#ff1818;
background:#ffc200;
border-radius:0.4em;
}
</style>

예제1) <div class="hbod">스타일 에서 넓이340px 높이를 100px적용 한 경우 입니다</div>

결과) 

예제1)

스타일 에서 넓이340px높이를 100px적용 한 경우 입니다

위 예제1)에서 넓이340px높이100px을 그리고 padding:7px text-align:left;bored -radius:0.4em을 지정한 결과를 보았습니다. 

만약 위의 코딩에서 높이값을 지정 해 주지 않을 경우 영역 내의 콘텐츠의 내용에 따라 자동으로 크기가 조절 됩니다.

브라우져에 따라 자동으로 적용이 되는 경우와 그렇지 못한 경우가 있으므로 스타일에 auto를 선언 해 주는 것이 웹표준 이라고 할수 있습니다.

그럼 한번 예제를 만들어 확인 해 보도록 합니다.

위의 1번 예제에 넓이 값은 기존의 픽셀값으로 고정 한후 높이를 삭제 한 경우 와  높이에  auto값을 선언 한 경우의 두가지 스타일을 변경 적용 해 보도록 합니다.

아래는 결과 입니다.

예제1-1)

스타일 에서 높이를 삭제해 변경 적용 한 경우 입니다

예제1-2)

스타일 에서 높이를 auto로 변경 적용 한 경우 입니다

예제1-3)

스타일 에서 넓이를 삭제해 변경 적용 한 경우 입니다

예제1-4)

스타일 에서 넓이를 auto로 변경 적용 한 경우 입니다

이번에는 넓이와 높이에 모두 auto를 적용 해 보도록 합니다. 

예제1-5)

스타일 에서 넓이와 높이를 동시에 auto로 변경 적용 한 경우 입니다

위 예제1-1번과 1-2번 에서 나타난 결과 처럼 높이값을 삭제 해도 auto 선언을 한것과 같이 auto가 적용되어 진 것을 볼수가 있습니다.

여기서 높이에만 padding-top을 7px을 주든 것을 4방향 모두 7픽셀의 padding을 줌으로서 콘텐츠가 박스 내부에 안정적으로 자리를 잡은 것을 볼수 있게 되었네요 특히 text-align:의 속성값을 left로 바꾸어 선언 해 줌으로서  사방에 여백이 생겨 난 것을 볼수가 있습니다.  

기본 스타일을 적용시에는 넓이 보다 텍스트의 내용이 길어 지게 되면 길어진 만큼 태그영역의 우측 바같쪽으로 밀려 나는 것이 기본 스타일의 경우가 됩니다.

그러나 여기서 높이에 auto를 선언 해 줌으로서 기본적으로 주어지는 상위의 css스타일의 white-space:wrap 적용에 의해 넓이 바같쪽인 우측으로 밀려 나는 대신  div 영역의 하단이 자동으로 늘어 나는 것을 확인 할수가 있습니다. 

1-3번역시 넓이값의 삭제시 1-4번의 경우처럼 넓이에 auto가 적용 되어지는 것을 볼수가 있습니다.

여기서는 높이를 픽셀로 고정 했기 때문에 넘치는 텍스트는 아래의 바같쪽으로 밀려나 나타 나게 됩니다.

두가지  다 auto 적용시 padding:7px속성과 값에 의해  페딩 7px 만큼의 공간이 text-align:left에  의해  생긴 공간 만큼 bottom쪽에도  생겨서 중앙 정렬이 일어나는 것을 확인 할수가 있습니다

지난 글  overflow:scroll 속성 에서 공부한 것 처럼 만약 픽셀 값으로 스타일 선언을 한 경우 white-space nowrap 속성 과 값이 적용 되어 지게 될 경우 텍스트의 길이에 따라서 영역을 벗어 나는 경우도 있습니다.

페딩값을 삭제한 코딩 결과를 보도록 합니다.

예제1-6)

스타일 에서 넓이와 높이를 동시에 auto로 적용 하고 페딩 값 없는 경우의 모습 입니다.

이번에는 전체에 페딩값을 똑같이 20픽셀을 주고 결과를 보도록 합니다.

예제1-7)

스타일 에서 넓이와 높이를 동시에 auto로 변경 적용 하고 위 예제 1-6번 div 영역의 내부 에 똑같이 20픽셀의 페딩을 적용 해 봅니다.

이번에는 위의 예제1-7의 코딩 으로 콘텐츠내용의 길이가 넓이와 높이에 미치는 결과를 보도록 합니다. 

예제1-8)

콘텐츠 길이에 따른 변화

padding 값을 내부 상,우,하,좌에 20px씩을 주고 넓이와 높이에 auto를 선언 한 스타일에서 텍스트의 길이가 짧은 한줄에 그칠 경우 넓이에 주어진 auto값에 의해 너비는 부라우져 너비까지 늘어나게 되고 나머지 세 방향에는 20픽셀의 여백이 생겨나는 것을 알수가 있습니다.

테이블이나 div영역을 고정 해 주려면 px 픽셀 값으로 설정 해 주어야 하며 브라우져에 따라 테이블 태그나 div태그에 퍼센트가 적용이 되지 않는 경우도 있으므로 코딩후에 브라우져에서 결과를 확인 하면서 브라우져에 최적화 된 코딩으로 설정 해 주도록 해야 합니다.

요즘은 거의 div 태그로 코딩을 해 주는 경향이 짙어 갑니다만 그러나 섬세한 레이아웃의 구성에는 테이블 태그가 훨씬효과 적이며 특히 table 태그내에 div태그를 또는 div 태그내에  table  태그를 적절히 혼용해 사용 할 경우 보다 다양한 레이아웃의 표현이 가능 해지게 되므로 숙달된 경험자들은 두가지 태그를 조합해서 레이 아웃을 구성 합니다.

div태그 한번에 배우기 div태그의 모든것 정리