본문 바로가기
코딩

html_div 태그

by 행운월드 2020. 10. 21.
반응형

 

 

이번 포스팅은 html중에서, div라는 태그에 대한 내용입니다.

 

코딩 카테고리를 만들고, 포스팅을 하기시작했을 초창기에도 언급했었지만, 필자는 html코딩을 어디에서 정식으로 배운것이 아닌, 쇼핑몰관리자라는 일을 하면서, 익히게되었다고 한적이 있습니다. 특히, 지금은 웹뷰앱으로 앱까지 만들고 있으니, 너무나 감사한 html코딩입니다. 이렇게 되기까지 가장 결정적인 도움이 된것은, 바로 카페24라는 쇼핑몰솔루션 시스템의 디자인수정 메뉴안의 코딩이었습니다.

 

처음 카페24의 코딩을 할 당시만해도, 쇼핑몰스킨의 기반이 table코딩으로 이루어져 있었습니다. 한마디로 레이아웃이 table코딩으로만 되어있었습니다. 어쨓거나, 그 당시에는 모바일기기에서의 웹페이지 자체가 굉장히 희귀하던 시절이라서, table의 소스들을 데스크탑에서만 잘 보여지면 된다는 생각으로, 코드들을 수정했었습니다.

 

그러다, 어느순간 카페24의 쇼핑몰스킨의 레이아웃이 table기반에서 division코딩 이라는 것으로 바뀌었습니다. table코딩에 겨우 적응된 상태에서, division코딩이라는 새로운 레이아웃을 보고, 많이 당황했었는데 카페24상담원의 답변으로는, table코딩 잘하면 division코딩도 다들 잘 한다고 해서, 독학으로 지금까지 오게되었습니다. division코딩이 <div>태그를 html 레이아웃의, 주요 요소로 쓰는 코딩을 말한다고 합니다. 어쨓거나, 필자에겐 나름의 사연이 있는 div태그에 대해서 본격적으로 포스팅을 시작하겠습니다.

 

 

 

● <div>의 기본속성은 앞뒤 요소로, 무조건 줄바꿈이 있습니다.

많은 태그들이 줄바꿈 요소를 갖고 있지만, 웹에 표현되는 텍스트나 이미지의 속성에 영향을 주지 않으면서 줄바꿈속성이 있는 요소이고, 웹과 모바일웹 그리고, 웹뷰앱의 표현 요소로써 공통으로 널리 쓰이는 것이 div태그입니다. 표현방법은 <div>로 시작해서, </div>로 마무리 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_div</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 50px 50px 0;}
  </style>
</head>
<body>

<h3>div 없이</h3>
html에서 body태그에 아무요소를 넣치 않고, 텍스트만 쓰게 되면, 계속 키보드로 입력하는 그대로 줄바꿈 없이 쭉 이어져서 보여지게 됩니다.

<h3>div 있게</h3>
html에서 body태그에 아무요소를 넣치 않고,<div>텍스트만 쓰게 되면</div>, 계속 키보드로 입력하는 그대로 줄바꿈 없이 쭉 이어져서 보여지게 됩니다.

</body>
</html>

위의 html이 웹에 보여지는 것은, 아래의 이미지와 같습니다. 보시면 div요소가 있는 부분의 앞뒤로, 줄바꿈 속성이 있는것을 확인 할 수 있습니다.

 

● 레이아웃 요소로써의 <div>.

div태그는 웹사이트를 만들때 레이아웃 요소로도 많이 사용됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_div</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 50px 50px 0;}
  
  </style>
</head>
<body>

<div>
<div>top</div>
<div>사이드바</div>
<div>본문내용</div>
<div>footer</div>
</div>

</body>
</html>

위의 코딩대로 div태그와 텍스트만 입력했을 경우에는 아래와 같이 화면에 보여집니다. 그래서, div를 레이아웃요소로써 사용하려면, 스타일을 주어야 합니다.

아래의 코드를 보면, div에 class를 입력하여, 스타일의 속성을 준것을 확인 할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_div</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 50px 50px 0;}
  .wrap {width:500px;padding:0;margin:0;}
  .top {background:#dddddd;height:100px; width:100%;}
  .side {background:pink;height:100px;float:left;width:30%;}
  .body {background:lightgreen;height:100px;float:left;width:70%;}
  .footer {background:#dddddd;height:100px;width:100%;clear: both;}

  </style>
</head>
<body>

<div class="wrap">
 <div class="top">top</div>
 <div class="side">사이드바</div>
 <div class="body">본문내용</div>
 <div class="footer">footer</div>
</div>

</body>
</html>

위의 코드는 아래의 이미지처럼, 웹화면에 나타납니다. 요즘은 div태그가 아닌, 다른 요소들도 많이 레이아웃의 표현요소로써 사용되는 것으로 알고 있습니다. 꼭 어떠한 태그를 사용해야 된다는 법칙같은 것은 없기 때문에 코딩하는 분들의 기호에 맞게, 쓰기편한 태그를 사용하면 됩니다. 기본적인 div태그만 입력했을때와, 스타일을 주었을때는 어떻게 변화되는지 꼭 한번 연습해보세요. 연습하면서, 아래와 같이 나타나는 웹페이지를 어떻게 변화시켜서, 나의 의도대로 수정해 나갈것인가를 코딩해 보세요. 분명 재미를 느낄 수 있습니다. 요즘은 이미 다양한 요소가 들어가 있는 무료 템플릿들이 많이 있습니다. 그래도, html을 아예 모르는 상태에서 무조건 가져다 쓰는것보다는, div태그 정도는 알고 템플릿들을 사용해 보면, 분명 더 html에 대한 흥미를 느낄 수 있습니다.

 

 

 

● div태그의 "display:block;"과 "display:inline;".

아래의 html코드중에서 div에 "display:block;"과 "display:inline;"이 어떤 차이가 있는지 확인해 보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_div</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 50px 50px 0;}
  </style>
</head>
<body>

<h3>div 없이</h3>
html에서 body태그에 아무요소를 넣치 않고, 텍스트만 쓰게 되면, 계속 키보드로 입력하는 그대로 줄바꿈 없이 쭉 이어져서 보여지게 됩니다.

<h3>div 있게</h3>
html에서 body태그에 아무요소를 넣치 않고,<div>텍스트만 쓰게 되면</div>, 계속 키보드로 입력하는 그대로 줄바꿈 없이 쭉 이어져서 보여지게 됩니다.


<h3>div display:block;</h3>
html에서 body태그에 아무요소를 넣치 않고,<div style="display:block;">텍스트만 쓰게 되면</div>, 계속 키보드로 입력하는 그대로 줄바꿈 없이 쭉 이어져서 보여지게 됩니다.


<h3>div display:inline;</h3>
html에서 body태그에 아무요소를 넣치 않고,<div style="display:inline;">텍스트만 쓰게 되면</div>, 계속 키보드로 입력하는 그대로 줄바꿈 없이 쭉 이어져서 보여지게 됩니다.

</body>
</html>

위의 html은 아래와 같이 웹화면에 나타납니다. 위의 코드와 비교해 보시면, "display:block;"은 앞뒤로 줄바꿈 속성이 있는 상태로 표현됩니다. "display:block;"을 표기해 주지 않아도, div는 기본적으로 가지고 있는 속성이 "display:block;"이기때문에 줄바꿈이 일어납니다. "display:inline;"은 div의 줄바꿈 속성을 텍스트를 이어서 보는 것같은 inline속성으로 바꾸어 버립니다.

 

● div의 border, background 속성.

div는 레이아웃을 표현하는 것에도 많이 쓰이지만, html의 모든 요소에 들어갈 수 있기 때문에 내부적인 태그로 쓰일때의 표현가능한 속성을 간단하게 알아보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_div</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
body {margin: 50px 50px 0;font-size:20px;}
.divbd1 {border: solid 5px #dddddd;}
.divbd2 {border-top: solid 5px #dddddd;border-bottom: solid 5px #dddddd;}
.divbd3 {border: solid 5px #dddddd;border-radius:10px;}  
.divbd4 {border: solid 5px #dddddd;border-radius:10px;background:lightgreen;}  
.divbd5 {border: solid 5px #dddddd;border-radius:10px;background:lightgreen; padding:20px 0;}    
  </style>
</head>
<body>

<h3>div 보더</h3>
<div class="divbd1">div 보더값 주기</div>


<h3>div 위와 아래만 보더값 주기</h3>
<div class="divbd2">div 위와 아래만 보더값을 주기</div>


<h3>div 보더의 모서리를 둥글게</h3>
<div class="divbd3">div 보더의 모서리를 둥글게 하기</div>


<h3>div 보더의 모서리를 둥글게+배경색상</h3>
<div class="divbd4">div 보더의 모서리를 둥글게 하면서, 배경색상 넣기</div>


<h3>div 보더의 모서리를 둥글게+배경색상+padding값</h3>
<div class="divbd5">div 보더의 모서리를 둥글게 하면서, 배경색상 넣고, padding값 넣기</div>


</body>
</html>

위의 코드는 아래의 이미지에 보이듯이 화면에 표현됩니다. html의 각 태그는 속성값을 스타일을 이용해서 줄 수 있는데, 자세한 것은 나중에 알아보고, 오늘은 간단한 것만 살펴보겠습니다. 우선 처음에 보면, div요소에 보더값만 주었고, 그다음은 보더의 위와 아래만 값을 주었고, 그다음은 보더의 모서리를 둥글게 하였습니다. 모서리 둥글게 하는 것은 버튼요소를 만들때 많이 쓰입니다. 그리고, 네번째의 div에는 배경색도 추가하였습니다. 그다음 다섯번째 div에는 위아래 공간을 주는 padding속성도 넣었습니다.

 

● div의 내부 요소와 div 정렬.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>html_div</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
body {margin: 50px 50px 0;}
.divbd5 {border: solid 5px #dddddd;border-radius:10px;background:lightgreen; padding:20px 0;}    
.divbd6 {border: solid 5px #dddddd;border-radius:10px;background:lightgreen; padding:20px 0;text-align:center;} 
.divbd7 {border: solid 5px #dddddd;border-radius:10px;background:lightgreen; padding:20px;text-align:center;width:200px;margin:0 auto;}  
  </style>
</head>
<body>

<h3>div 보더의 모서리를 둥글게+배경색상+padding값</h3>
<div class="divbd5">div 보더+둥근모서리+배경색상+padding</div>

<h3>div 보더의 모서리를 둥글게+배경색상+padding값+텍스트 가운데정렬</h3>
<div class="divbd6">div 보더+둥근모서리+배경색상+padding+글씨 센타정렬</div>

<h3>div 보더의 모서리를 둥글게+배경색상+padding값+가운데정렬+div 가운데 정렬</h3>
<div class="divbd7">div 보더+둥근모서리+배경색상+padding+글씨 센타정렬+div 센타정렬</div>

</body>
</html>

위의 코딩 내용이 화면에 아래의 이미지와 동일하게 나타납니다. div요소에 스타일로 padding값을 준 첫번째 div는 아래와 같이 보여집니다. 두번째 div는 글씨를 센타정렬하였습니다. 세번째 div는 글씨와 div태그를 화면에서 센타 정렬 하였습니다. 혹시, 만약에 div를 센타정렬하는 것이 "text-lign:center;"와 "margin:0 auto;"만으로 안된다면, "display:block;"과 "display:inline;"을 스타일속성에 넣고 변화되는지 살펴보세요.

 

 

저작자표시

'코딩' 카테고리의 다른 글

html_iframe  (0) 2020.11.04
html_span 태그  (0) 2020.10.28
html_li_ul_ol_태그  (0) 2020.10.14
html_링크 태그_target  (0) 2020.10.09
html_주석_color(주석처리와 색상코드)  (0) 2020.10.01

관련글



티스토리툴바