데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 24일차 강의 정리
CSS
9. Position
실습 8. 연습2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<style>
aside {
width: 200px;
position: fixed;
left: 70px;
top: 80px;
}
aside nav ul {
width: 150px;
margin: 10px 0;
}
aside nav ul li {
background: #123456;
margin: 2px 0;
padding: 5px;
font-size: 16px;
font-weight: bold;
}
aside nav ul li a {
text-decoration: none;
color: #fff;
}
aside nav ul li a:hover {
background: #456789;
}
.content {
width: 70%;
background: #ccc;
height: 1000px;
margin-left: 30%;
padding: 20px;
line-height: 1.4;
text-indent: 10px;
}
footer {
background: #000;
padding: 40px 20px;
}
footer address {
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<aside>
<nav>
<ul>
<li><a href="#">COMPANY</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COMMUNITY</a></li>
</ul>
</nav>
</aside>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et elementum ipsum. Sed quis risus justo.
Mauris pretium, ligula vitae molestie feugiat, quam turpis vestibulum sapien, quis bibendum augue sem eu ipsum.
Nullam lorem diam, imperdiet ultricies erat et, tristique consectetur massa. Etiam luctus libero id volutpat
imperdiet. Maecenas a luctus lacus. Morbi auctor pharetra ante tincidunt lobortis.
<br>
Suspendisse eu commodo elit. Suspendisse vel sem sit amet risus consequat ornare. Nam eleifend neque sagittis
volutpat scelerisque. Morbi placerat justo at tristique ullamcorper. Integer tellus augue, commodo nec orci in,
vulputate hendrerit justo. Pellentesque sed ante sit amet nibh molestie tincidunt sit amet id orci. Curabitur
dictum est faucibus ante posuere efficitur.
<br>
Etiam non justo in nulla posuere aliquam quis a felis. Vestibulum laoreet felis vitae purus feugiat, et
efficitur velit vulputate. Nam sed nibh maximus, scelerisque sem at, ultricies ex. Sed ut justo risus. Cras
sapien justo, fringilla sit amet ex non, pulvinar vulputate leo. Donec tristique, sapien id lobortis
scelerisque, nibh neque posuere mi, et tempor tortor libero id tortor. Phasellus volutpat libero at urna
scelerisque, vel vulputate nisl maximus. Suspendisse potenti. Quisque elit nibh, blandit sed ultricies vitae,
bibendum aliquam ipsum. Cras quis mauris posuere, auctor nulla sed, tincidunt nibh. Curabitur scelerisque
pulvinar scelerisque.
<br>
Quisque in mi nec turpis venenatis scelerisque. Nunc pellentesque a ipsum id consectetur. Ut ut turpis mi.
Suspendisse eu libero mauris. Integer lobortis feugiat purus nec venenatis. Curabitur facilisis tortor lorem,
eget elementum sapien hendrerit a. Sed elementum, quam sed ullamcorper porttitor, odio nibh tincidunt velit,
varius venenatis tortor est vitae nulla.
<br>
Pellentesque facilisis quam ut magna egestas, ac egestas erat finibus. Fusce sollicitudin mauris in scelerisque
egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo leo a porta aliquam. Ut ut
arcu venenatis, iaculis massa vel, lacinia tellus. Duis gravida ultrices mattis. In sit amet venenatis nisi,
quis dapibus metus. Suspendisse potenti. Mauris sodales dolor velit. Vestibulum dignissim tincidunt accumsan.
Vestibulum at elit ac magna tristique varius et sit amet augue. Integer purus mi, laoreet lobortis lectus vel,
elementum blandit massa. Donec at elit at nisl posuere posuere.
</div>
<footer>
<address>Copyright Allright Reserved</address>
</footer>
</body>
</html>
실습 9. 연습 3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<style>
body {
background-image: url(./images/bg.png);
}
header .logo {
margin: 20px auto;
text-align: center;
}
.menu {
background: black;
text-align: center;
}
.menu li {
display: inline-block;
padding: 20px;
}
.menu li:hover {
background: #4d4d4d;
}
.menu li a {
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.slider {
background: #fff;
}
.slider ul {
width: 75%;
margin: 0 auto;
}
.slider ul li {
width: 25%;
box-sizing: border-box;
float: left;
text-align: center;
margin: 40px 0;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.top {
width: 50px;
height: 50px;
background: #c13333;
position: fixed;
right: 0;
top: 0;
text-align: center;
line-height: 50px;
}
.top a {
color: #fff;
text-decoration: none;
}
section {
width: 700px;
margin: 0 auto;
position: relative;
}
section .left {
position: absolute;
top: 0;
left: -240px;
}
section .right {
position: absolute;
top: 0;
right: -240px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="./images/logo.jpg" alt="로고">
</div>
<nav>
<ul class="menu">
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</nav>
</header>
<article class="slider">
<ul class="clearfix">
<li><img src="./images/item01.png" alt="item01"><br>iPhone</li>
<li><img src="./images/item02.png" alt="item02"><br>iPod</li>
<li><img src="./images/item03.png" alt="item03"><br>iPad</li>
<li><img src="./images/item04.png" alt="item04"><br>iMac</li>
</ul>
</article>
<section>
<div class="content">
<img src="./images/ipad.jpg" alt="iPad">
</div>
<aside class="left">
<img src="./images/side01.png" alt="side01">
<br><br>
<img src="./images/side02.png" alt="side02">
</aside>
<aside class="right">
<img src="./images/side03.png" alt="side03">
<br><br>
<img src="./images/side04.png" alt="side04">
</aside>
</section>
<div class="top">
<a href="#">TOP</a>
</div>
</body>
</html>
실습 10. stack-order
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container .box {
position: relative;
width: 100px;
height: 100px;
background: tomato;
border: 4px dashed black;
font-size: 30px;
margin-right: -30px;
float: left;
}
.box1 {
z-index: 0;
}
.box2 {
z-index: -200;
}
.box3 {
z-index: 100;
}
.box4 {
z-index: 10;
}
.box5 {
z-index: 10;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</body>
</html>
실습 11. 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 600px;
margin: 100px auto 0;
}
.container .box {
position: relative;
width: 100px;
height: 100px;
background: tomato;
border: 4px dashed yellow;
border-radius: 10px;
font-size: 30px;
margin-right: -30px;
text-align: center;
line-height: 100px;
float: left;
transition: 0.5s;
}
.container .box:hover {
background: yellowgreen;
border-color: red;
z-index: 10;
/* position: relative;
bottom: 20px; */
transform: translateY(-20px);
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</body>
</html>
Author And Source
이 문제에 관하여(데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 24일차 강의 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@crisine/데이터융합-JAVA응용-SW개발자-기업-채용연계-연수과정-24일차-강의-정리
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<style>
aside {
width: 200px;
position: fixed;
left: 70px;
top: 80px;
}
aside nav ul {
width: 150px;
margin: 10px 0;
}
aside nav ul li {
background: #123456;
margin: 2px 0;
padding: 5px;
font-size: 16px;
font-weight: bold;
}
aside nav ul li a {
text-decoration: none;
color: #fff;
}
aside nav ul li a:hover {
background: #456789;
}
.content {
width: 70%;
background: #ccc;
height: 1000px;
margin-left: 30%;
padding: 20px;
line-height: 1.4;
text-indent: 10px;
}
footer {
background: #000;
padding: 40px 20px;
}
footer address {
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<aside>
<nav>
<ul>
<li><a href="#">COMPANY</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">COMMUNITY</a></li>
</ul>
</nav>
</aside>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et elementum ipsum. Sed quis risus justo.
Mauris pretium, ligula vitae molestie feugiat, quam turpis vestibulum sapien, quis bibendum augue sem eu ipsum.
Nullam lorem diam, imperdiet ultricies erat et, tristique consectetur massa. Etiam luctus libero id volutpat
imperdiet. Maecenas a luctus lacus. Morbi auctor pharetra ante tincidunt lobortis.
<br>
Suspendisse eu commodo elit. Suspendisse vel sem sit amet risus consequat ornare. Nam eleifend neque sagittis
volutpat scelerisque. Morbi placerat justo at tristique ullamcorper. Integer tellus augue, commodo nec orci in,
vulputate hendrerit justo. Pellentesque sed ante sit amet nibh molestie tincidunt sit amet id orci. Curabitur
dictum est faucibus ante posuere efficitur.
<br>
Etiam non justo in nulla posuere aliquam quis a felis. Vestibulum laoreet felis vitae purus feugiat, et
efficitur velit vulputate. Nam sed nibh maximus, scelerisque sem at, ultricies ex. Sed ut justo risus. Cras
sapien justo, fringilla sit amet ex non, pulvinar vulputate leo. Donec tristique, sapien id lobortis
scelerisque, nibh neque posuere mi, et tempor tortor libero id tortor. Phasellus volutpat libero at urna
scelerisque, vel vulputate nisl maximus. Suspendisse potenti. Quisque elit nibh, blandit sed ultricies vitae,
bibendum aliquam ipsum. Cras quis mauris posuere, auctor nulla sed, tincidunt nibh. Curabitur scelerisque
pulvinar scelerisque.
<br>
Quisque in mi nec turpis venenatis scelerisque. Nunc pellentesque a ipsum id consectetur. Ut ut turpis mi.
Suspendisse eu libero mauris. Integer lobortis feugiat purus nec venenatis. Curabitur facilisis tortor lorem,
eget elementum sapien hendrerit a. Sed elementum, quam sed ullamcorper porttitor, odio nibh tincidunt velit,
varius venenatis tortor est vitae nulla.
<br>
Pellentesque facilisis quam ut magna egestas, ac egestas erat finibus. Fusce sollicitudin mauris in scelerisque
egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo leo a porta aliquam. Ut ut
arcu venenatis, iaculis massa vel, lacinia tellus. Duis gravida ultrices mattis. In sit amet venenatis nisi,
quis dapibus metus. Suspendisse potenti. Mauris sodales dolor velit. Vestibulum dignissim tincidunt accumsan.
Vestibulum at elit ac magna tristique varius et sit amet augue. Integer purus mi, laoreet lobortis lectus vel,
elementum blandit massa. Donec at elit at nisl posuere posuere.
</div>
<footer>
<address>Copyright Allright Reserved</address>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<style>
body {
background-image: url(./images/bg.png);
}
header .logo {
margin: 20px auto;
text-align: center;
}
.menu {
background: black;
text-align: center;
}
.menu li {
display: inline-block;
padding: 20px;
}
.menu li:hover {
background: #4d4d4d;
}
.menu li a {
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.slider {
background: #fff;
}
.slider ul {
width: 75%;
margin: 0 auto;
}
.slider ul li {
width: 25%;
box-sizing: border-box;
float: left;
text-align: center;
margin: 40px 0;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.top {
width: 50px;
height: 50px;
background: #c13333;
position: fixed;
right: 0;
top: 0;
text-align: center;
line-height: 50px;
}
.top a {
color: #fff;
text-decoration: none;
}
section {
width: 700px;
margin: 0 auto;
position: relative;
}
section .left {
position: absolute;
top: 0;
left: -240px;
}
section .right {
position: absolute;
top: 0;
right: -240px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="./images/logo.jpg" alt="로고">
</div>
<nav>
<ul class="menu">
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</nav>
</header>
<article class="slider">
<ul class="clearfix">
<li><img src="./images/item01.png" alt="item01"><br>iPhone</li>
<li><img src="./images/item02.png" alt="item02"><br>iPod</li>
<li><img src="./images/item03.png" alt="item03"><br>iPad</li>
<li><img src="./images/item04.png" alt="item04"><br>iMac</li>
</ul>
</article>
<section>
<div class="content">
<img src="./images/ipad.jpg" alt="iPad">
</div>
<aside class="left">
<img src="./images/side01.png" alt="side01">
<br><br>
<img src="./images/side02.png" alt="side02">
</aside>
<aside class="right">
<img src="./images/side03.png" alt="side03">
<br><br>
<img src="./images/side04.png" alt="side04">
</aside>
</section>
<div class="top">
<a href="#">TOP</a>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container .box {
position: relative;
width: 100px;
height: 100px;
background: tomato;
border: 4px dashed black;
font-size: 30px;
margin-right: -30px;
float: left;
}
.box1 {
z-index: 0;
}
.box2 {
z-index: -200;
}
.box3 {
z-index: 100;
}
.box4 {
z-index: 10;
}
.box5 {
z-index: 10;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 600px;
margin: 100px auto 0;
}
.container .box {
position: relative;
width: 100px;
height: 100px;
background: tomato;
border: 4px dashed yellow;
border-radius: 10px;
font-size: 30px;
margin-right: -30px;
text-align: center;
line-height: 100px;
float: left;
transition: 0.5s;
}
.container .box:hover {
background: yellowgreen;
border-color: red;
z-index: 10;
/* position: relative;
bottom: 20px; */
transform: translateY(-20px);
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
</div>
</body>
</html>Author And Source
이 문제에 관하여(데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 24일차 강의 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@crisine/데이터융합-JAVA응용-SW개발자-기업-채용연계-연수과정-24일차-강의-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
