YJ의 새벽

CSS (<div>) 본문

WebFront_/HTML,CSS

CSS (<div>)

YJDawn 2023. 2. 3. 16:39

 

 

 

  • <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
'WebFront_/HTML,CSS' Related Articles more
Comments