html 화면분할 - <div>태그 이용
화면을 다음과 같이 4분등 하는 예제입니다.
<html>
<body topmargin="0" leftmargin="0">
<div style="float:left;width:50%;height:50%;background-Color:#F2FFFF">
<img src="image.gif" border="1" width="100%" height="100%" alt="상,좌">
</div>
<div style="clear:right;float:right;width:50%;height:50%;background-Color:#FFF2FF">
<img src="image.gif" border="1" width="100%" height="100%" alt="상,우">
</div>
<div style="float:left;width:50%;height:50%;background-Color:#FFFFF2">
<img src="image.gif" border="1" width="100%" height="100%" alt="하,좌">
</div>
<div style="clear:right;float:right;width:50%;height:50%;background-Color:#EFEFEF">
<img src="image.gif" border="1" width="100%" height="100%" alt="하,우">
</div>
</body>
</html>
🟡 1. 웹페이지 공간 분할
- 지금까지 HTML을 공부한 이유는 웹사이트를 만들기 위해서 공부를 했는데, 웹사이트를 잘 만들기 위해서는 초반 설계부터 잘해야 차후에 수정할 일이 많이 안 생깁니다. 그러기 위해서는 전체적인 큰 틀 즉 레이아웃을 잘 설계하고 화면 분할을 잘해야 됩니다. (건물을 짓기 전에 도면을 잘 만들어야 되는 거처럼)
- 레이아웃을 구성하기 위해서는 공간을 분할을 하는데, 위 사진에 나온 예시가 보편적인 분할 종류입니다. 아래 사진은 실제 운영되고 있는 웹사이트 예시입니다.
🟡 2. 공간 분할 태그
- 공간을 분할하는 태그들로는 div, span, table 등이 있습니다. 과거 웹사이트에서는 주로 table로 공간 분할을 많이 했지만, 요즘 들어서는 div 태그를 이용해서 레이아웃을 구성하는 게 보편적입니다.
그런데 div 태그는 그냥 하나의 공간이라는 의미만을 가지고 있어서, 정확이 이 div가 어떤 부분을 나타내고 어떤 의미인지 정확하게 알 수 없기 때문에 HTML5에서 레이아웃 관련 새로운
태그들이 추가되었습니다.
태그 | 설명 |
header | 웹사이트의 메타데이터들을 담고 있고, 페이지의 타이틀을 보여주는 부분입니다. |
nav | 네이게이터를 의미하고, 페이지 이동을 할 때 이용합니다. |
aside | 본문 옆에 존재하고 본문과는 연관이 없는 내용이 많고, 주로 광고나 카테고리 목록을 표시 합니다. |
section | 본문(article)을 여러개 포함하고 있는 공간을 의미합니다. |
article | 본문의 주내용이 들어가는 공간을 의미합니다. |
footer | 푸터를 의미하고, 주로 웹사이트의 카피라이터(저작권표시), 대표자, 이메일등을 표시합니다. |
🟡 3. div 태그
- div 태그는 Division의 약자로 웹사이트의 레이아웃을 만들 때 주로 사용합니다.
- div 태그에는 여러 가지 속성들이 있는데 주로 style 속성을 이용을 많이 합니다. 아래 표는 style 속성 안에 들어갈 수 있는 속성들의 종류 및 설명입니다. 표 이외에도 많은 속성들이 있습니다.
속성 | 설명 |
width | div 태그의 가로 크기를 설정합니다. |
height | div 태그의 세로 크기를 설정합니다. |
border | div 태그의 테두리를 설정합니다. |
background-color | div 태그의 배경 색상을 설정합니다. |
float | div 태그의 웹사이트 기준 위치를 설정합니다. (정렬) |
margin | div 태그의 여백을 설정합니다. |
style : 속성 | 코드 | 결과 |
width | // width : 100px <h2>1</h2> </div> <div style="width: 200px; border: 1px solid tomato;"> <h2>1</h2> | |
height | // height : 100px <h2>1</h2> </div> <div style="height: 200px; width: 100px; border: 1px solid tomato;"> <h2>1</h2> </div> | |
border | // 두께 1px, 실선, 토마토색 <h2>1</h2> </div> <br> <divstyle="height: 100px; width: 100px; border: 3px dotted skyblue;"> <h2>1</h2> </div> | |
background-color | // 배경색 하늘색 <h2>1</h2> </div> <br> <divstyle="height: 100px; width: 100px; background-color: teal;"> <h2>1</h2> </div> | |
float | // 왼쪽 정렬 <h2>1</h2> </div> <div style="height: 100px; width: 100px; background-color: teal; float: right;"> <h2>1</h2> </div> | |
margin | // margin 이 없음 <h2>1</h2> </div> <div style="height: 100px; width: 100px; background-color: teal; margin: 100px; border: 1px solid black"> <h2>1</h2> </div> |
🟡 4. span 태그
- span 태그는 div 태그와 같이 공간을 나타내는 태그인데, div와 다른 점은 div는 줄 바꿈이 되지만 span은 되지 않습니다.
<span style="background-color: blueviolet;"> span1 </span><span> 안녕하세요 </span> <span> 저는 빅원입니다. </span> | |
<div> 안녕하세요 </div> <div> 저는 빅원입니다. </div> |
- div는 화면의 가로 전체를 사용하고, span은 자신 안에 콘텐츠만큼만 공간을 차지한다.
긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽은 신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~