1. <div>태그
:블록요소의 형태로 그룹화 시킬 수 있음
2. <Span> 태그
인라인 요소의 형태로 콘텐츠를 그룹화 시킴
<style type="text/css">
div {
width: 250px;
margin: 50px auto;
background-color: aqua
}
span {
color: red;
width: 300px;
height: 50px;
background-color: yellow;
}
span {
color: red;
width: 300px;
height: 50px;
background-color: yellow;
display: inline-block
}
All
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>-</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-" />
<meta name="author" content="-" />
<!-- 주석: crtl + / -->
<!-- 복사 붙여넣기 : ctrl + D -->
<!-- 원하는 영역만 주석: ctrl + shifte + / -->
<style type="text/css">
div {
width: 250px;
margin: 50px auto;
background-color: aqua
}
span {
color: red;
width: 300px;
height: 50px;
background-color: yellow;
/* display: inline-block*/
}
/*인라인 요소는 가로/세로 크기를 바꿀 수 없음
/* 인라인 요소 안에 가로/세로 크기를 바꿀 수 있는 것도 Css에서 해줌: display: inline-block */
</style>
</head>
<body>
<h3>div : 블록요소로 그룹화 --> css </h3>
<div>
<h4>공지사항</h4>
<ul>
<li>디자인과정 개강 10일</li>
<li>퍼블리셔 과정 개강 11일</li>
<li>개발 과정 개강 12일</li>
</ul>
</div>
<h3>Span : 인라인요소로 그룹화 --> css </h3>
<p>span은 인라인 요소이고 <span>인라인 요소</span>는 width와 height 속성을 적용할 수 없으며, margin-top/ margin-bottom 도 적용 안됨 / HTML4에서는 인라인 요소 안에는 블록 요소를 포함 할 수 없음</p>
<!-- HTML4는 이거안됨 : 인라인요소 보다 블록요소가 크기 땜시롱
span
div /div
/span
블록 요소 안에는 인라인요소 들어갈 수 있음
-->
</body>
</html>
