Ch8 공간 구조화
Grouping
. div, span요소가 있음
. div는 블록요소(새로운 줄에서 시작), span은 인라인 요소
. div로 브라우저의 공간영역을 할당
. span은 em, strong, i, sub, sup등과 함께 사용
div: 블록(block)형식으로 공간의 영역을 한줄로 분할 (자동 줄바꿈o)
span: 인라인(inline)형식으로 입력하는 내용만큼만 공간을 분할 (자동 줄바꿈x)
블록형식의 div는 스타일을 자유롭게 정의 가능하지만,
인라인 형식의 span은 태그안의 내용을 기준으로 너비와 높이가 결정됨
따라서 별도로 크기를 조절할 수 없으며, 오직 좌우 바깥 여백만 설정 가능
div, span grouping 및 스타일 설정
<body>
<h1>Grouping</h1>
<hr>
<h3>div 요소</h3>
<div style="background-color: #FFEFD5">
<ul>
<li>홈
<li>회사 소개
<li>인사 말씀
</ul>
<address>COPYRIGHT © mornigTech. All Rights Reserved</address>
</div>
<h3>span 요소</h3>
<ul>
<li><span style="background-color:#FFE4E1"><strong><a>오늘의 book</a></strong></span>
<br><em><a href=""><span style="background-color:#AFEEEE">HTML5와 CSS</a></em></span>
</ul>
</body>
div, span style 설정
<title>Insert title here</title>
<style type="text/css">
.s1{background-color: #F0FFFF}
.s2{background-color: #E0FFFF}
.s3{background-color: #F0FFF0 }
.s4{background-color: #F0F8FF; width: 200px; height:200px; text-align:center; } /* style에선 단위생략x */
.s5{background-color: #FFE4E1}
.s6{background-color: #AFEEEE}
.s7{background-color: #FFDAB9}
.s8{background-color: #E6E6FA}
</style>
</head>
<body>
<div class="s1">하늘</div>
<div class="s2">바다</div>
<div class="s3">섬</div>
<div class="s4">구름</div>
<hr>
<span class="s5">봄</span>
<span class="s6">여름</span>
<span class="s7">가을</span>
<span class="s8">겨울</span>
</body>
div style 설정
<body>
<div style="background-color:#F5F5F5">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
when an unknown printer took a galley of type and scrambled it to make a type <br>
specimen book. <br>
</div>
<div style="background-color:#FFF0F5; width:500px; height:200px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
when an unknown printer took a galley of type and scrambled it to make a type <br>
specimen book.
</div>
<div style="background-color:#E0FFFF; width:200px; height:100px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
</div>
</body>
div style 설정
<title>Insert title here</title>
<style type="text/css">
body{margin: 0px; padding: 0px;}
#wrap{margin: 0px; padding: 2%; width: 96%; background-color:#FFF5EE}
h1{text-align: center;}
#gnb{list-style: none; text-align: right;}
#left{float: left; margin-right: 0.5%; width: 33%; height: 500px; text-align: center; background-color: #F5F5DC;}
#center{float:left; width: 33%; height: 500px; text-align: center; background-color:#FFE4E1}
#right{float: right; width: 33%; height: 500px; text-align: center; background-color:#E0FFFF}
#footer{clear: both; padding: 5px; text-align: center; height: 50px;}
</style>
</head>
<body>
<div id="wrap">
<div id="skipnav">
<a href="#contentwrap">콘텐츠 바로가기</a>
</div>
<div id="header">
<h1>웹 프로그래밍</h1>
<div id="gnb">
<a href="#"><b>변수와 연산자</b></a>
<a href="#"><em>변수와 연산자</em></a>
<a href="#"><i>변수와 연산자</i></a>
<a href="#">클래스</a>
</div>
</div>
<hr>
<div id="contentwrap">
<div id="left">
<h2>왼쪽 콘텐츠</h2>
<p>내용</p>
</div>
<div id="center">
<h2>가운데 콘텐츠</h2>
<p>내용</p>
</div>
<div id="right">
<h2>오른쪽 콘텐츠</h2>
<p>내용</p>
</div>
<div id="footer">
<hr>
<address>서울시 강남구 논현동 10층 글로벌, 연락처: 02-1234-5678
COPYRIGHT ©: morningTech. All Rights Reserved</address>
</div>
</div>
</div>
</body>
