<style> ~ </style>
- 스타일 정보 태그(Style Information)로 HTML문서 내에 스타일 시트를 선언하는 데 사용
<div> ~ </div>
- 블럭 태그(Division)
- <div> 요소는 그 자체로 어떤 의미를 갖지는 않으며, 몇가지 요소를 한 덩어리로 묶어서 스타일을 주거나 스크립트를 연결하는데 사용
- <div> 태그는 블럭 레벨 태그로 줄 바꿈이 일어난다.
ex10 >>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>div 태그</h3>
<div>
<p> 대표적인 블록태그</p>
<p> 요소들을 묶어서 처리할 때 사용 </p>
</div>
<hr>
<div style="background: red">A</div>
<!-- 내용이 없거나 height가 없으면 표시되지 않는다. -->
<div></div>
<div style="background: green">B</div>
<div style="background: blue">C</div>
<hr>
<div style="border: 1px solid red;">A</div>
<!-- 내용이 없거나 height가 없으면 선은 위(top) 한선만 나온다. -->
<div style="border: 1px solid greed;"></div>
<div style="border: 1px solid black;">B</div>
<div style="border: 1px solid blue;">C</div>
<hr>
<!-- padding : 안쪽 여백 -->
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 20px;">padding-안쪽여백</div>
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 10px 5px 10px 5px;">위 오른쪽 아래 왼쪽여백</div>
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 10px 15px 10px">위 오른쪽/왼쪽 아래 왼쪽여백</div>
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 10px 15px;">위/아래 오른쪽/왼쪽 여백</div>>
<hr>
<!-- margin: 바깥쪽 여백 -->
<div style="background: red; width: 200px; height: 50px;"></div>
<div style="background: blue; width: 200px; height: 50px; margin: 20px;"></div>
<div style="background: green; width: 200px; height: 50px;"></div>
<!-- 위아래는 여백이 20이고, 왼쪽 오른쪽은 auto이므로 수평 가운데 정렬 -->
<div style="background: blue; width: 200px; height: 50px; margin: 20px auto;"></div>
<hr>
</body>ex11 >>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* { /* 모든 태그 */
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h3>div 태그</h3>
<!-- border, margin, padding도 기본적으로 width, height에 포함된다. -->
<div style="background: yellow; width: 300px; height: 118px;">
<div style="border: 3px solid green; height: 30px;">A</div>
<div style="border: 3px solid red; margin: 5px; width: 284px; height: 30px;">B</div>
<div style="border: 3px solid #333; height: 30px">C</div>
</div>
<hr>
<p>
다음 div의 width는 270px이고 height는 170px이다.
</p>
<div style="width:200px; height: 100px; margin: 10px; padding: 20px; border: 5px solid #ccc;"></div>
</body>
</html>ex12 >>
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin: 0; padding: 0;
}
h3 {
margin: 20px auto;
}
</style>
</head>
<body>
<h3>div 예제</h3>
<p>
style - float 속성 : 해당 요소를 감싸고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하도록 설정<br>
style - clear 속성 : 설정된 float 속성을 해제
</p>
<div style="border: 3px solid blue; width: 399px; height: 50px;">
<div style="width: 200px; background: yellow; float: left;">A</div>
<div style="width: 100px; background: red; float: left;">B</div>
<div style="width: 50px; background: green; float: right;">C</div>
<div style="width: 50px; background: tomato; float: right;">D</div>
</div>
<hr>
<div>
<div style="background: red; height: 30px; width: 100px; float: left;"></div>
<div style="background: green; height: 30px; width: 100px; float: left;"></div>
</div>
<div style="background: black; height: 30px; width: 200px; clear: both;"></div>
<!-- 위에 있던 float 속성을 없앰 -->
<div>
<div style="background: red; height: 30px; width: 100px; float: left;"></div>
<div style="background: green; height: 30px; width: 100px; float: left;"></div>
</div>
<div style="clear: both"></div>
<div style="margin: 30px auto; width: 200px;">
<div style="background: red; height: 30px; width: 100px; float: left;"></div>
<div style="background: green; height: 30px; width: 100px; float: left;"></div>
</div>
</body>
</html>'쌍용강북교육센터 > 9월' 카테고리의 다른 글
| 0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제 (0) | 2021.09.15 |
|---|---|
| 0914_HTML : table 태그 사용 이력서 만들기 숙제 (2) | 2021.09.14 |
| 0913_HTML : 레이아웃 관련 태그 (1) (1) | 2021.09.14 |
| 0913_HTML : 기본 태그(5) formatting 관련 태그 (0) | 2021.09.14 |
| 0913_HTML: 기본 태그(4) 공통속성 (0) | 2021.09.14 |