VScode/CSS
[CSS] layout
hvoon
2022. 9. 8. 16:51
layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout01.html</title>
<style type="text/css">
body{margin:0;}
#base{position:relative; width:100%; height:500px; border:3px dotted black; top:100px;}
#box1{position:absolute; width:50%; height:100%; background:yellow; border:3px solid green;
/* left:0px; top:0px; right:100px; bottom:100px; */ }
/* absolute position의 기본 위치는 -10px, top:0px; */
#box2{position:absolute; width:50%; height:400px;
background:orange; border:3px solid red; right:5%; top:50px;}
#box3{position:absolute; width:100px; height:100px; background:blue;}
#box4{position:absolute; width:100px; height:100px; background:blue; right:0;}
#box5{position:absolute; width:100px; height:100px; background:blue; right:0; bottom:0;}
#box6{position:absolute; width:100px; height:100px; background:blue; bottom:0;}
</style>
</head>
<body>
<div id="base">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout02.html</title>
<style type="text/css">
body{margin:0;}
#base{position:relative; width:100%; height:500px;
background:#EEEEEE; border:1px solid black; top:200px;}
.box{position:absolute; width:200px; height:400px;
top:50px; border:1px solid gray; box-shadow: -3px 3px 3px 3px gray;}
#box1{background:orange; right:51% }
#box2{background:#FFFF22; right:65%; }
#box3{position:absolute; background:#FFFFAA; width:50%;
height:400px; border:1px solid black; top:50px; left:50%; box-shadow: -3px 3px 3px 3px gray;}
</style>
</head>
<body>
<div id="base">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#first{position:relative; width:100%; height:100px; border:1px dashed black;}
#first_text{position:relative; width:250px; height:100px; margin:0 auto; border:1px solid red; text-align:center;
line-height:120px; font-size:200%; font-family:Verdana; font-weight:bold;}
#second{position:relative; width:100%; height:100px; border:1px dashed black;}
#second_text{position:relative; width:450px; height:100px; margin:0 auto; border:1px solid blue; color:gray;}
#third{position:relative; width:100%; height:600px; border:1px dashed black;}
#view{position:relative;width:1100px; height:600px; border:2px solid red; margin:0 auto;}
#box1{position:absolute; width:800px; height:500px; background:red; left:0; top:0; color:white;}
#box2{position:absolute; width:800px; height:500px; overflow:hidden; right:0; bottom:0;}
#box3{position:absolute; width:400px; height:300px; background:white; left:100px; bottom:50px;
box-shadow:5px 5px 5px; border:1px solid black;}
#box3_title{position:relative; width:350px; height:110px; margin:0 auto; border:1px solid green;
font-size:190%; text-align:center; line-height:110px; font-family:Verdana; font-weight:bold;}
#box3_text{position:relative; width:350px; height:190px; margin:0 auto; border:1px solid green; color:silver;}
</style>
</head>
<body>
<div id="first">
<div id="first_text">Content Title</div>
</div>
<div id="second">
<div id="second_text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div id="third">
<div id="view">
<div id="box1">빨간색 배경</div>
<div id="box2"><img src="images/Penguins.jpg" width="800"></div>
<div id="box3">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout05.html</title>
<style type="text/css">
#first{position:relative; width:100%; height:200px; background:rgb(231, 243, 168); }
#first_title{position:relative; width:400px; height:100px; background:yellowgreen;
margin:0 auto; font-weight:bold; font-size:150%; text-align:center; line-height:70px}
#first_text{position:relative; width:400px; height:100px; background:#B2B554; margin:0 auto; font-size:90%; }
.second{position:relative; width:100%; height:200px; background:#bffcc0; margin-top:20px;}
.view{position:relative; width:1100px; height:200px; background:#f9b97c; margin:0 auto;}
.circle{position:relative; width:200px; height:200px; overflow:hidden; border-radius:50%;
float:left; background:white;}
.rect{position:relative; width:350px; height:200px; background:#f9977c; float:left; }
.title{position:relative; width:320px; height:70px; border:1px dashed blue; font-weight:bold;
font-size:150%; text-align:center; line-height:70px; margin:0 auto;}
.text{position:relative; width:320px; height:130px; border:1px dashed blue; margin:0 auto; font-size:90%;}
</style>
</head>
<body>
<div id="first">
<div id="first_title">Content02 Title</div>
<div id="first_text">제3항의 승인을 얻지 못한 때에는
그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div class="second">
<div class="view">
<div class="circle"><img src="images/Koala.jpg" height="200"></div>
<div class="rect">
<div class="title">SegmentTitle</div>
<div class="text">제3항의 승인을 얻지 못한 때에는
그 처분 또는 명령은 그때부터 효력을 상실한다.
<br/><img src="images/content01.jpg"></div>
</div>
<div class="circle"><img src="images/Koala.jpg" height="200"/></div>
<div class="rect">
<div class="title">SegmentTitle</div>
<div class="text">제3항의 승인을 얻지 못한 때에는
그 처분 또는 명령은 그때부터 효력을 상실한다.
<br/><img src="images/content01.jpg"></div>
</div>
</div>
</div>
<div class="second">
<div class="view">
<div class="circle"><img src="images/Koala.jpg" height="200"/></div>
<div class="rect">
<div class="title">SegmentTitle</div>
<div class="text">제3항의 승인을 얻지 못한 때에는
그 처분 또는 명령은 그때부터 효력을 상실한다.
<br/><img src="images/content01.jpg"></div>
</div>
<div class="circle"><img src="images/Koala.jpg" height="200"/></div>
<div class="rect">
<div class="title">SegmentTitle</div>
<div class="text">제3항의 승인을 얻지 못한 때에는
그 처분 또는 명령은 그때부터 효력을 상실한다.
<br/><img src="images/content01.jpg"></div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout06.html</title>
<style type="text/css">
#first{position:relative; width:100%; height:140px; border:1px solid black; }
#first_title{position:relative; width:400px; height:70px; border:1px solid green; margin:0 auto;
font-weight:bold; font-size:200%; line-height:70px; text-align:center; }
#first_text{position:relative; width:400px; height:70px;
border:1px solid green; margin:0 auto; font-size:80%; }
#second{position:relative; width:100%; height:600px; border:1px solid black;}
#view{position:relative; width:1100px; height:600px; border:1px solid red; margin:0 auto;}
.rect{position:relative; width:348px; height:600px;
border:1px solid blue; margin-right:24px; float:left;}
.rect:last-child{margin-right:0px;}
.img{position:relative; width:350px; height:300px; overflow:hidden;}
.box{position:relative; width:310px; height:280px; border:1px solid black; margin:0 auto;
box-shadow:5px 5px 5px; top:-30px; background:white; }
.button{position:absolute; width:150px; height:40px; background:blue; color:white; font-weight:bold;
font-size:150%; line-height:40px; text-align:center; bottom:30px; right:0;}
.title{position:relative; width:280px; height:80px; border:1px dashed black; font-weight:bold;
font-size:150%; text-align:center; line-height:70px; margin:0 auto; }
.text{position:relative; width:280px; height:200px; border:1px dashed black; margin:0 auto; font-size:90%;}
</style>
</head>
<body>
<div id="first">
<div id="first_title">Content02 Title</div>
<div id="first_text">제3항의 승인을 얻지 못한 때에는
그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div id="second">
<div id="view">
<div class="rect">
<div class="img"><img src="images/Penguins.jpg" height="300"></div>
<div class="box">
<div class="title">Segment Title</div>
<div class="text">제3항의 승인을 얻지 못한 때에는
그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div class="button">Button</div>
</div>
<div class="rect">
<div class="img"><img src="images/Desert.jpg" height="300"></div>
<div class="box">
<div class="title">Segment Title</div>
<div class="text">제3항의 승인을 얻지 못한 때에는
그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div class="button">Button</div>
</div>
<div class="rect">
<div class="img"><img src="images/Lighthouse.jpg" height="300"></div>
<div class="box">
<div class="title">Segment Title</div>
<div class="text">제3항의 승인을 얻지 못한 때에는
그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div class="button">Button</div>
</div>
</div>
</div>
</body>
</html>
작성해야할 코드가 길어질 때 text/css 파일만 따로 만들어 작성할 수 있음.
webapp폴더 안에 새로운 폴더 생성해 .css로 파일 만듦
.
@charset "UTF-8";
#first{position:relative; width:100%; height:150px; border:1px dotted black;}
#first_title{position:relative; width:400px; height:75px; border:1px solid green; margin:0 auto; font-size:200%;font-weight:bold; line-height:75px; text-align:center;}
#first_text{position:relative; width:400px; height:75px; border:1px solid green; margin:0 auto; font-size:90%;}
#second{position:relative; width:100%; height:600px; border:1px dotted black;}
#view{position:relative; width:1200px; height:600px; border:1px solid red; margin:0 auto;}
#left_view{position:relative; width:600px; height:600px; background:yellow; float:left; overflow:hidden;}
#right_view{position:relative; width:600px; height:600px; background:yellowgreen; float:left;}
.rect{position:absolute; width:600px; height:188px; background:white;}
#rect1{top:0;}
#rect2{top:206px;}
#rect3{bottom:0;}
.left{position:relative; width:400px; height:188px; float:left; }
.title{position:relative; width:370px; height:50px; margin:0 auto; text-align:right; line-height:50px; font-size:150%; font-weight:bold; border-top:3px solid black;}
.text{position:relative; width:370px; height:133px; margin:0 auto; text-align:right; border-bottom:3px solid black;}
.right{position:relative; width:196px; height:188px; float:left; }
.circle{position:absolute; width: 188px; height:188px; right:0; top:0; border-radius:50%; overflow:hidden;}head 안에 <link rel="stylesheet" type="text/css" href="만든 폴더/파일 이름.css"/> 을 작성하여 저장해놓은 css 파일을 불러옴.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout07.html</title>
<link rel="stylesheet" type="text/css" href="css/Layout07.css"/>
</head>
<body>
<div id="first">
<div id="first_title">Content02 Title</div>
<div id="first_text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div id="second">
<div id="view">
<div id="left_view"><img src="images/Lighthouse.jpg" width="600" height="600"></div>
<div id="right_view">
<div class="rect" id="rect1">
<div class="left">
<div class="title">Segment Title</div>
<div class="text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div class="right">
<div class="circle"><img src="images/Koala.jpg" height="188"></div>
</div>
</div>
<div class="rect" id="rect2">
<div class="left">
<div class="title">Segment Title</div>
<div class="text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div class="right">
<div class="circle"><img src="images/Penguins.jpg" height="188"></div>
</div>
</div>
<div class="rect" id="rect3">
<div class="left">
<div class="title">Segment Title</div>
<div class="text">제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다.</div>
</div>
<div class="right">
<div class="circle"><img src="images/Jellyfish.jpg" height="188"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>