ENFJ 비전공자 개발스터디

HTML 공간 분할 연습 본문

HTML CSS

HTML 공간 분할 연습

madb 2022. 1. 20. 15:33
반응형

div요소를 이용한 레이아웃

<!DOCTYPE html>
<html>
<head>
   <title>HTML Layouts</title>
   <style type="text/css">
      #header {
         background-color: lightgrey;
         height: 100px;
      }
      #nav {
         background-color: #339999;
         color: white;
         width: 200px;
         height: 300px;
         float: left;
      }
      #section {
         width: 200px;
         text-align: left;
         float: left;
         padding: 10px;
      }
      #footer {
         background-color: #ffcc00;
         height: 100px;
         clear: both;
      }
      #header, #nav, #section, #footer {text-align: center;}
      #header, #footer {line-height: 100px;}
      #nav, #section {line-height: 240px;}

   </style>
</head>
<body>
   <h1>div 요소를 이용한 레이아웃</h1>
   <div id = "header">
      <h2>HEADER 영역</h2>
   </div>
   <div id = "nav">
      <h2>NAV 영역</h2>
   </div>
   <div id = "section">
      <h2>SECTION 영역</h2>
   </div>
   <div id = "footer">
      <h2>FOOTER 영역</h2>
   </div>
</body>
</html>
반응형
저작자표시 비영리 변경금지

'HTML CSS' 카테고리의 다른 글

CSS pseudo-classes 가상 클래스 선택자(link, visited, active, hover, text-decoration)  (0) 2022.01.21
HTML5 폼 태그 Form Tag GET POST 방식  (0) 2022.01.18
HTML5, 태그  (0) 2022.01.17
'HTML CSS' Related Articles more