margin&padding
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여백주기:margin, padding</title>
<style type="text/css">
div{
background: pink;
border: 1ps solid black;
width:200px;
height: 200px;
margin: 30px 0px 0px 30px;
padding:20px;
}
</style>
</head>
<body>
<div>
<h1>CONTENT</h1>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
1. table의 경계선을 지정...실선...그린색
2. 글씨 중앙 정렬
3. 테이블을 옆으로 나란히 배치
4. 여백을 상하좌우 30px----바깥쪽 여백
5. td안에 있는 이미지의 여백은 20px로 지정
6. 각각의 테이블의 배경색을 서로 다르게 지정
*/
table{
border: 1px solid green;
text-align: center;
margin: 30px;
float: left;
border-collapse: collapse;
}
table td{
border: 1px solid purple;
padding: 20px;
}
table.rara01{
background: yellow;
}
table.rara02{
background: lime;
}
</style>
</head>
<body>
<h2 align="center">Margin, padding</h2>
<table class = "rara01">
<tr>
<td>시구장면1</td>
<td><img src="img/rara.jpg"></td>
</tr>
</table>
<table class = "rara02">
<tr>
<td>시구장면2</td>
<td><img src="img/rara.jpg"></td>
</tr>
</table>
</body>
</html>
display
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display: 1)none 2)black 3)inline 4)inline-block</title>
<style type="text/css">
/* #box{
display: none;
} */
/* #box{
display: block;
} */
/* #box{
display: inline;
} */
/* #box{
display: inline-block;
} */
</style>
</head>
<body>
<span>Dummy</span>
<div id = "box">
<span>"Neque porro quisquam estpsum qu</span>
</div>
<span>Dummy</span>
</body>
</html>1)
2)
3)
4)
입력폼 State Selector
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력폼 State Selector</title>
</head>
<body>
<h2>입력폼 State Selector</h2>
<form action ="#" name = "frm">
<h3>Enabled</h3>
<input/>
<h3>Disabled</h3>
<input disabled="disabled" style ="background:gray;"><!--입력 금지를 나타낼때 주로 이렇게함-->
<h3>ReadOnly</h3>
<input readonly="readonly" value = "readonly">
<h3>Required</h3>
<input required="required">
</form>
</body>
</html>
모서리 radius
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radius</title>
<style type="text/css">
#show1{
border: 2px solid red;
padding: 10px;
border-radius: 25px;
}
#show2{
border: 2px solid red;
padding: 10px;
border-radius: 50px 25px;
}
</style>
</head>
<body>
<h2>border-radius::25px</h2>
<div id = "show1">
<p>Lorem Ipsum is simply dummy text of the printing and typ</p>
</div>
<h2>border-radius::50px</h2>
<div id = "show2">
<p>Lorem Ipsum is simply dummy text of the printing and typ</p>
</div>
</body>
</html>
디바이스환경에 따른 반응형 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<style type="text/css">
@media screen and (max-width:767px){/*mobile*/
html{
background: red;
color: white; font-weight: bold;
}
}
@media screen and (min-width:768px) and (max-width:959px){ /*tablet*/
html{
background: green;
color: white; font-weight: bold;
}
}
@media screen and (min-width:960px){/*pc*/
html{
background: blue;
color: white; font-weight: bold;
}
}
</style>
</head>
<body>
<h1>Lrem Ipsum</h1>
<p>ince the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It ha</p>
<p>ince the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It ha</p>
</body>
</html>
박스 모델
box-sizing
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boxmodel</title>
<style type="text/css">
.div1{
width: 300px;
height: 100px;
border: 1px solid red;
}
.div2{
width: 300px;
height: 100px;
border: 1px solid red;
padding: 50px;
/* box-sizing: border-box; */
box-sizing: content-box;/*이게 원래 디폴트입니다.*/
}
</style>
</head>
<body>
<div class = "div1">The div is smaller.....(width 300px height 100px)</div>
<br/>
<div class = "div2">The div is bigger.....(width 300px height 100px)</div>
<br/>
</body>
</html>
배경이미지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
background-image: url("img/BackgroundFront.png"), url("img/BackgroundBack.png");
/* background-repeat: repeat;(이게 원래 디폴트입니다.) */
/* background-repeat: no-repeat;
background-size: 100% 1000px;/*섞어 쓸수습니다. 앞width 뒤 height*/ */
/*두개의 그림의 크기 각각지정 콤마는 앞 이미지와 뒤 이미지를 구분한다. 콤마가 아닐때는 위와 같이 두개 함친 크기를 지정 */
background-size: 100%, 200%;
}
</style>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
height:2000px;
background-image: url("img/BackgroundFront.png"), url("img/BackgroundBack.png");
background-repeat: no-repeat;
background-size: 100%;
background-color: #e7e7e8;
background-position: 0px center;/*중간으로 위치하게 하기 위해서는 height값을 넣어줘야함*/
}
</style>
</head>
<body>
<h1>Lorem Ipsm</h1>
<p>dable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less no</p>
<p>dable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less no</p>
<p>dable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less no</p>
</body>
</html>
레이아웃 마무리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
* {/*이렇게 초기화 해놓고 시작 하면 좋습니다. */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: #eee;
text-align: center;
padding: 30px;
}
.header p {
margin-top: 20px;
}
.topnav {
background: black;
}
.topnav a {
color: white;
text-decoration: none;
padding: 15px 20px;
display: inline-block;
}
.topnav a:hover {
color: pink;
}
.column {
width: 33%;
float: left;
padding: 20px;
margin: 30px 0;
}
.column h2 {
margin-bottom: 20px;
}
.footer {
background: #eee;
clear: both;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="topnav">
<a href="#">Link a</a>
<a href="#">Link b</a>
<a href="#">Link c</a>
</div>
<div class="row">
<div class="column">
<h2>Column1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt placeat iure, nihil maxime, itaque omnis quae tenetur inventore deserunt, vero quas commodi unde. Nostrum unde esse placeat adipisci non, fugiat blanditiis libero. Dolor ex incidunt dolorem quae quis temporibus, quaerat at obcaecati rerum, animi cupiditate. Rem natus dicta obcaecati officia impedit id ipsam recusandae consequuntur autem dolore. Iusto natus praesentium sint est illum, soluta voluptate vel voluptatibus ipsa consectetur cupiditate commodi delectus, unde quo, excepturi minus esse! Laborum ipsam ab repellat placeat quod aliquam sunt sequi quibusdam perferendis fuga eos error, possimus magni quam delectus animi, velit! Dolores, illum ad.</p>
</div>
<div class="column">
<h2>Column2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi obcaecati, vero, reprehenderit in magni quia alias quam iusto, cum perferendis iste. Impedit praesentium eos vero. Officia velit atque obcaecati magnam porro blanditiis totam nam, ex aut quibusdam distinctio harum molestiae impedit exercitationem aliquam in. Ut possimus amet nulla illo non asperiores, vero, cum beatae ea nostrum consequatur explicabo ipsa, ipsum consectetur fugit quam sint. Numquam dolorum, dolores perferendis quia necessitatibus sequi ipsam dolor quibusdam, voluptate voluptas odit. Sit voluptates dolore praesentium quod distinctio, tempora fugiat, reprehenderit maxime labore necessitatibus ex beatae inventore magni nisi repudiandae corporis culpa, dignissimos sunt hic.</p>
</div>
<div class="column">
<h2>Column3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum praesentium voluptatibus harum! Sed repellendus dignissimos, expedita laborum eaque nemo magni nesciunt nostrum tenetur tempora numquam dolore molestias tempore pariatur quisquam quod voluptas adipisci corrupti saepe veniam suscipit. Tempora esse iusto accusamus, deserunt officiis blanditiis necessitatibus dolores saepe delectus commodi. Inventore enim et porro vitae non laudantium voluptate consequatur laboriosam repellat, incidunt ipsum ratione neque suscipit quia at expedita eaque, in placeat distinctio aliquam harum. Nulla voluptatum expedita placeat nemo! Doloribus repudiandae iusto quae ut omnis quos pariatur. Libero odio animi, deserunt! Perferendis eius impedit, rerum quas quam facere consequuntur. Ducimus.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
'컴퓨터 프로그래밍 > 수업' 카테고리의 다른 글
| 2020.05.21_3 (0) | 2020.05.21 |
|---|---|
| 2020.05.21_2 (0) | 2020.05.21 |
| 2020.05.20_2 (0) | 2020.05.20 |
| 2020.05.20_1 (0) | 2020.05.20 |
| 2020.05.19_2 (0) | 2020.05.19 |
