2018.11.30 시멘틱구조 , 화면배치 , 로그인폼
2018. 11. 30. 16:43ㆍHTML5&CSS
#1 시멘틱 구조
<!doctype hmtml>
<html>
<head>
<meta charset="utf-8">
<title>시멘틱 구조</title>
<style>
*{ padding: 0; margin: 0;}
header{
background-color: crimson;
height:400px;
}
nav{
background-color: aqua;
float:left;
width:30%;
height:400px;
}
section{
background-color: blue;
float:left;
width:50%;
height:400px;
}
aside{
background-color: coral;
float:left;
width:20%;
height:400px;
}
footer{
background-color:darkgoldenrod;
clear:both;
height:100px;
}
</style>
</head>
<body>
<header>문서의 헤더</header>
<nav>문서의 메뉴</nav>
<section>문서의 본문</section>
<aside>문서의 사이드</aside>
<footer>문서의 푸터</footer>
</body>
</html>
#2 화면 배치(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>화면 배치</title>
<style>
div{
border:2px dotted chartreuse;
}
.d1{
float: left;
width: 300px;
height: 100px;
}
.d2 {
float: left;
width: 300px;
height: 100px;
/* overflow:hidden; 정해진 크기에 넘는 것들을 숨김 */
overflow: scroll;
border:2px dotted blue;
}
</style>
</head>
<body>
<div class="d1">d1배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치</div>
<div class="d2">d2배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치
배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치화면배치</div>
</body>
</html>
#3 화면배치 (2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>화면 배치</title>
<style>
div{
border:2px dotted chartreuse;
}
img{
float: left;
}
.d1{
clear: both;
}
.outside::after{
content:"";
clear:both;
display:table;
}
</style>
</head>
<body>
<div class="outside">
<img src="pine.png" width="170px" height="170px">
<div class="inside">
<h2>Img 파인애플</h2>
파인애플은 맛있고 달고 ... 파인애플은 맛잇고 달고 ...파인애플은 맛있고 달고 ... 파인애플은 맛잇고 달고 ..
.파인애플은 맛있고 달고 ... 파인애플은 맛잇고 달고 ...파인애플은 맛있고 달고 ... 파인애플은 맛잇고 달고 ...
</div>
</div>
<div class="d1">
dfgsdfgsdfg
</div>
</body>
</html>
#4 Table로 화면배치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent{
display:table;
}
.son1{
background-color: cyan;
width: 100px;
display: table-cell;
}
.son2{
background-color: blueviolet;
width: 100px;
display: table-cell;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">
sdfasdfasdfasdfasdfasdfasdfasdfasdf sdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>
<div class="son2">
sdfasdfasdfasdfasdfasdfasdfasdfasdf sdfasdfasdfasdfasdfasdfasdfasdfasdf
</div>
</div>
</body>
</html>
#5 로그인폼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
<style>
</style>
</head>
<body>
<header>
<h2>로그인폼</h2>
<hr />
</header>
<section >
사용자 ID :<input id="userID" type="test"><br/>
비밀 번호 :<input id="userPW" type="password"><br/>
<input type="button" value="전송" onclick="sned()"/>
</section>
<script>
function send(){
userID = document.querySelector("#userID");
userPW = document.querySelector("#userPW");
alert(userID.value);
alert(userPW.value);
}
</script>
</body>
</html>
'HTML5&CSS' 카테고리의 다른 글
| .vscode 설정후 Ctrl + Shift + B 실행하기 (0) | 2018.12.04 |
|---|---|
| 2018.12.03 화면배치(overflow,margin사용) (0) | 2018.12.03 |
| 2018.11.29 테이블여백 & 하이퍼링크 & id링크 (0) | 2018.11.29 |
| 2018.11.28 글자배경/이미지삽입/표만들기/리스트만들기 (0) | 2018.11.28 |
| 2018.11.27 페이지의 기본 구조 (0) | 2018.11.27 |