[div] - 자체적인 기능을 가진 태그는 아님, 태그에서 그룹을 구성할때 레이아웃,컨테이너 형태로 사용함
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>This is a heading in a div element
This is some text in a div element.
[실습 진행] - 오늘 만들어볼 결과물부터 확인
[1차 수정] - h1 , h2,h3 태그 사용으로 제목과 내용의 양식을 통일시킨다.
<div>
<h1>목록보기</h1>
<h3>선물하기 좋은 물건을 골라서 판매합니다. </h3>
<table>
<tr><td>
<table width="500" border="1" cellspacing="0">
<tr>
<td width="200"><img src="00_IMG/mattress.jpeg" width="200"></td>
<td width="300">
<h2>매트리스커버 관련 상품 추천</h2>
<h3>상품명: 보몽드 순면스퀘어 솔리드 누빔매트커버, 다크블루</h3>
</td>
</tr>
</table>
</td><td>
<table width="500" border="1" cellspacing="0">
<tr>
<td width="200"><img src="00_IMG/covers.jpeg" width="200"></td>
<td width="300">
<h2>여름이불세트 관련 상품 추천</h2>
<h3>상품명: 슈에뜨룸 선인장 리플 침구 세트, 베이지</h3>
</td>
</tr>
</table>
</td></tr>
<tr><td>
<table width="500" border="1" cellspacing="0">
<tr>
<td width="200"><img src="00_IMG/hanger.jpeg" width="200"></td>
<td width="300">
<h2>행거도어 관련 상품 추천</h2>
<h3>상품명: 선우랜드 레인보우 2단 문걸이용 옷걸이 _중형, 화이트, 상세페이지참조</h3>
</td>
</tr>
</table>
</td><td>
<table width="500" border="1" cellspacing="0">
<tr>
<td width="200"><img src="00_IMG/mattress_pink.jpeg" width="200"></td>
<td width="300">
<h2>매트리스커버 관련 상품 추천</h2>
<h3>상품명: 보드래 헬로우 누빔 매트리스커버, 핑크</h3>
</td>
</tr>
</table>
</td></tr>
</table>
</div>
</body>
</html>
수정 후
[2차 수정] style 태그를 이용해서 각각의 형식을 지정한다.
<style type ="text/css">
h1 {
font-size: 2em;
font-family : Gulim;
text-align : left;
font-weight : bold;
}
h2 {
font-size : 1.5em;
font-family: Gulim;
text-align : left;
font-weight : bold;
}
h3 {
font-size : 1em;
font-family : Gulim;
text-align : left;
font-weight : lighter;
}
div {
width:1000px;
margin-left:auto;
margin-right:auto;
}372님의 쇼핑몰 목록
선물하기 좋은 물건을 골라서 판매합니다.
|
| ||||
|
|
[3차 수정] - 쇼핑몰 목록 부분이 실습결과와 다르게 가운데 정렬되어있다 이유가 무엇인지 찾아본다.
원인은 아래와같이 /div를 지정 너무일찍 닫아줘서 밑에 html 태그들은 정렬되지않았다. 삭제후 다시 실행해 보았다.
[실습결과]
[실습 코드]
<!-- 아래 차시 학습 시 활용하세요 :)
14. 도전! HTML 실습
15. IT 기본 지식: 상대경로와 절대경로 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>상품페이지</title>
<style type ="text/css">
h1 {
font-size: 2em;
font-family : Gulim;
text-align : left;
font-weight : bold;
}
h2 {
font-size : 1.5em;
font-family: Gulim;
text-align : left;
font-weight : bold;
}
h3 {
font-size : 1em;
font-family : Gulim;
text-align : left;
font-weight : lighter;
}
div {
width:1000px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<br>
<div>
<h1>372님의 쇼핑몰 목록</h1>
<h3>선물하기 좋은 물건을 골라서 판매합니다. </h3>
<table>
<tr><td>
<table width="500" border="1" cellspacing="0">
<tr>
<td width="200"><img src="00_IMG/mattress.jpeg" width="200"></td>
<td width="300">
<h2>매트리스커버 관련 상품 추천</h2>
<h3>상품명: 보몽드 순면스퀘어 솔리드 누빔매트커버, 다크블루</h3>
</td>
</tr>
</table>
</td><td>
<table width="500" border="1" cellspacing="0">
<tr>
<td width="200"><img src="00_IMG/covers.jpeg" width="200"></td>
<td width="300">
<h2>여름이불세트 관련 상품 추천</h2>
<h3>상품명: 슈에뜨룸 선인장 리플 침구 세트, 베이지</h3>
</td>
</tr>
</table>
</td></tr>
<tr><td>
<table width="500" border="1" cellspacing="0">
<tr>
<td width="200"><img src="00_IMG/hanger.jpeg" width="200"></td>
<td width="300">
<h2>행거도어 관련 상품 추천</h2>
<h3>상품명: 선우랜드 레인보우 2단 문걸이용 옷걸이 _중형, 화이트, 상세페이지참조</h3>
</td>
</tr>
</table>
</td><td>
<table width="500" border="1" cellspacing="0">
<tr>
<td width="200"><img src="00_IMG/mattress_pink.jpeg" width="200"></td>
<td width="300">
<h2>매트리스커버 관련 상품 추천</h2>
<h3>상품명: 보드래 헬로우 누빔 매트리스커버, 핑크</h3>
</td>
</tr>
</table>
</td></tr>
</table>
</div>
</body>
</html>
여기까지 감사합니다.
====================================================
출처: IT UP, 코딩이 처음이어도 괜찮아! 진짜 입문자를 위한 웹개발과 IT 기초 지식
https://itup.co.kr/rv1/k-digital/main/lecture/info?course_uid=912417&education_uid=52212
잔재미코딩
