div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용한다.

div는 웹페이지에서 논리적 구분을 정의하는 태그이다.

div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있다.

요즘에는 레이아웃 배치를 거의 div를 활용해 구성하는 추세

 

태그 속성 내용
<div> style 스타일
width 가로크기
height 세로크기
border 테두리 굵기
background - color 배경 색상
float 정렬
margin 여백

 

예제

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>

    <body>
     
        <div>
          <h1>MY HOMEPAGE</h1>
          <hr/>
      </div>

      <div>
          <ul>
              <li>HTML5</li>
              <li>CSS3</li>
              <li>JAVA</li>
              <li>MYSQL</li>
          </ul>
          <hr/>
      </div>
    </body>
</html>

결과화면

 

저작자표시 (새창열림)

'Front > HTML+CSS' 카테고리의 다른 글

[CSS] keyframes animation 실습  (0) 2023.03.08
나만의 일기장 CSS 사용해서 만들기(실습)  (0) 2023.03.08
[ HTML ] HTML 기본  (0) 2021.11.10

티스토리툴바