html 화면분할 - <div>태그 이용 화면을 다음과 같이 4분등 하는 예제입니다. <html> <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> 🟡 1. 웹페이지 공간 분할 - 지금까지 HTML을 공부한 이유는 웹사이트를 만들기 위해서 공부를 했는데, 웹사이트를 잘 만들기 위해서는 초반 설계부터 잘해야 차후에 수정할 일이 많이 안 생깁니다. 그러기 위해서는 전체적인 큰 틀 즉 레이아웃을 잘 설계하고 화면 분할을 잘해야 됩니다. (건물을 짓기 전에 도면을 잘 만들어야 되는 거처럼) 출처 :https://poiemaweb.com/html5-tag-structure- 레이아웃을 구성하기 위해서는 공간을 분할을 하는데, 위 사진에 나온 예시가 보편적인 분할 종류입니다. 아래 사진은 실제 운영되고 있는 웹사이트 예시입니다. 🟡 2. 공간 분할 태그 - 공간을 분할하는 태그들로는 div, span, table 등이 있습니다. 과거 웹사이트에서는 주로 table로 공간 분할을 많이 했지만, 요즘 들어서는 div 태그를 이용해서 레이아웃을 구성하는 게 보편적입니다.
🟡 3. div 태그 - div 태그는 Division의 약자로 웹사이트의 레이아웃을 만들 때 주로 사용합니다.
🟡 4. span 태그 - span 태그는 div 태그와 같이 공간을 나타내는 태그인데, div와 다른 점은 div는 줄 바꿈이 되지만 span은 되지 않습니다. span 태그
- div는 화면의 가로 전체를 사용하고, span은 자신 안에 콘텐츠만큼만 공간을 차지한다. 긴 글 읽어주셔서 감사합니다 :) |