Day8!! 오늘은 css의 마지막 날이다.
html, css 레이아웃 구글링해보고 실습하기
레이아웃이란, 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다.
html 레이아웃
html에서는 아래의 방법으로 레이아웃을 작성할 수 있다.
이 외에도 table 요소를 이용한 레이아웃이 있지만 수정이 매우 어려워서 현재는 거의 사용하지 않는다.
div 요소를 이용한 레이아웃
<div id="header"><h2>Header 영역</h2></div>
<div id="nav"><h2>Nav 영역</h2></div>
<div id="section"><p>Section 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>
HTML5 레이아웃
웹 페이지의 레이아웃을 위한 별도의 새로운 요소(의미 semantic)를 제공한다. [header, nav, section, article, aside, footer]
<header><h2>Header 영역</h2></header>
<nav><h2>Nav 영역</h2></nav>
<section><p>Section 영역</p></section>
<footer><h2>Footer 영역</h2></footer>
css 레이아웃
display 속성
: 요소를 어떻게 보여줄지 결정하는 속성으로, 4가지가 있다.
* none 요소
: 보이지 않음
* block 요소
: 블록 박스, 가로 영역을 모두 채우고 줄 바꿈이 되며, width, height와 같은 속성을 지정할 수 있다.
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>
* inline 요소
: 인라인 박스, 줄바꿈이 안되고 width, height와 같은 속성을 지정X
: 글자나 문장에 효과를 주기 위해 존재하는 단위
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>
* inline-block 요소
: block과 inline의 중간 형태로, 줄 바꿈이 되지 않지만 크기를 지정할 수 있다.
float 속성
* inherit 요소
: 부모 요소에서 상속
* left 요소
: 왼쪽에 보유하는 블록박스를 생성
* reight 요소
: 오른쪽에 보유하는 블록박스를 생성
* none 요소
: 요소 없음
float 사용법
.content > img{ float: left }
실습 결과
<!DOCTYPE html>
<html lang="en">
<head>
<title>나의 웹사이트</title>
<style>
.Header{
width:400px;
border:4px solid black;
height:50px;
line-height : 55px;
}
.Nav{
height:250px;
border:2px solid red;
float:left;
width:200px;
line-height : 55px;
}
.Section{
width: 200px;
height:250px;
border:2px solid blueviolet;
float: left;
line-height : 55px;
}
.Footer{
width:400px;
border:4px solid blue;
height:50px;
line-height : 55px;
clear:both;
}
header{
width: 400px;
background-color: lightpink;
height:100px;
}
nav{
background-color: lightblue;
height:300px;
width: 200px;
float: left;
}
section{
background-color: lightgoldenrodyellow;
height:300px;
text-align: left;
width: 200px;
float: left;
}
footer{
width: 400px;
background-color: lightgray;
height:100px;
clear: both;
}
header, nav, section, footer {text-align: center;}
header, footer {line-height: 100px;}
nav, section {line-height: 240px;}
</style>
</style>
</head>
<body>
<h1>오늘 배운 내용</h1>
<div>
<h2>1. html/css 레이아웃</h2>
<h3>div를 이용한 레이아웃</h3>
<div class="Header">Header 영역</div>
<div class="Nav">Nav 영역</div>
<div class="Section">Section 영역</div>
<div class="Footer">Footer 영역</div>
</br>
<h3>html5 의미 요소를 이용한 레이아웃</h3>
<p >웹 페이지의 레이아웃을 위한 별도의 새로운 요소(의미 semantic)를 제공한다.</p>
<header><h2>Header 영역</h2></header>
<nav><h2>Nav 영역</h2></nav>
<section><p>Section 영역</p></section>
<footer><h2>Footer 영역</h2></footer>
</div>
</body>
</html>
'WEB' 카테고리의 다른 글
[Javascript] 조건문 / 반복문 (0) | 2022.03.02 |
---|---|
[javascript] 변수 선언(var), 디버깅(console.log) (0) | 2022.03.01 |
[WEB/CSS] flexbox (0) | 2022.02.27 |
[WEB] CSS 기본실습(2) (flex, gird 레이아웃) (0) | 2022.02.27 |
[WEB] CSS 기본실습(2) (0) | 2022.02.26 |