YJ의 새벽
CSS (<div>) 본문
- <div> </div> 태그
--<div> </div> 태그는 레이아웃을 나누는데 주로 쓰임.
-- div요소는 다른 적절한 요소가 없는 경우 마지막방편으로 사용하기를 강력히 권장.
-- 웹문서의 특정한 구역을 설정하기위해 사용.
( 웹문서의 특정 위치에 글이나 이미지를 적을 수 있는 네모칸을 만들어놓은것 )
--<div> 태그 속성
- id : 자바스크립트에서 호출하기 위한 이름 지정
- style : 스타일지정 / 항목과 값은 : 로 구분. 항목간은 ; 로 구분.
-width(가로) heigt(세로) 속성 사용가능.
-Position:absolute -> 웹문서 자체가 div의 위치기준이 된다.
-Position:relative -> div태그가 속한 테이블이나, 상위div태그 처럼 상위태그가 위치기준이 된다.
-top, bottom , left , right 로 구체적 위치지정.
<p> 태그와 비교
-- 문단을 나눈다는 의미는 같지만, p태그는 앞뒤한줄씩 공백을 만든다.
<span> 태그와 비교
-- <div> 는 style 속성 안에 width,height 등을 지정하지않으면 한줄 전체가 영역이 되지만,
<span> 은 속성 안에 width,heigth 들을 지정하지않으면 태그안의 내용까지만 영역이 된다.
EX ))) <div> </div> 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div예제</title>
</head>
<body>
<div style="background-color: aqua;">구역1</div>
<div style="width: 100px; height: 100px; background-color: blueviolet;">구역2</div>
</body>
</html>
EX ))) <div> </div> 예제2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div예제</title>
<style>
#banner{ --#banner 안에 (부모)
width:185px; height:236px;
background-image: url(banner_bg.jpg);
border: solid 1px #cccccc;
}
#banner img{ -- #banner img (자식)
margin: 202px 0px 0 50px;
}
</style>
</head>
<body>
<h3>PHP 책 소개</h3>
<ul>
<li> 저자 : 황재호</li>
<li>출판사 : 한빛아카데미</li>
<li>가격 : 30,000원</li>
</ul>
<div id="banner"><img src="buy.png"></div> --부모를 호출하면 그안에서 위치잡음.
</body>
</html>
'WebFront_ > HTML,CSS' 카테고리의 다른 글
CSS ( 테이블 ) (0) | 2023.02.03 |
---|---|
CSS ( display ) (0) | 2023.02.03 |
CSS (박스모델) (0) | 2023.02.02 |
CSS (선택자,스타일(link)) (0) | 2023.02.02 |
HTML (테이블과 폼 양식) (0) | 2023.02.01 |
Comments