<!DOCTYPE html>
<html lang="en">
<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>
{
margin: 0;
padding: 0;
}
body {
background-color: aquamarine;
}
#container {
width: 500px;
height: 250px;
background: rosybrown;
position: absolute;
left: 50%; top: 50%;
margin-left: -250px;
margin-top: -125px;
}
</style>
</head>
<body>
<div id="container">
<h1>요소의 중앙 배치</h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.contanier {
margin-top: 50px;
margin-left: 50px;
width: 700px;
}
.top_bar {
background: red;
position: fixed;
left: 0; top: 0; right: 0;
height: 50px;
}
.left_bar {
background: blue;
position: fixed;
left: 0; top: 50px; bottom: 0;
width: 50px;
}
</style>
</head>
<body>
<div class="top_bar"></div>
<div class="left_bar"></div>
<div class="contanier">
<p>Lorem ipsum dolor sit amet.</p>
<p>donce roasd neqe.</p>
<p>na rk meot vitat tellasd matik bibidum</p>
<p>pellterjjsadi hgkoend plackrat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla blanditiis, corporis eligendi laboriosam distinctio aut, reiciendis aliquid fugiat facilis nostrum at modi ut architecto excepturi nam unde reprehenderit qui nesciunt.
Aperiam placeat optio ducimus inventore quis quas, sed impedit praesentium unde eos accusantium temporibus illum consequuntur reiciendis aut non hic nisi itaque rerum similique, atque fuga. Quis quod eos omnis.
Eaque placeat voluptatibus, neque dicta repellat accusantium error iste at sapiente consequatur ipsam! Suscipit minus facere incidunt repellat quasi a repudiandae eligendi molestiae magni corporis dolores, possimus ullam ipsa labore.
Dolore, ea modi ab itaque enim molestias delectus voluptate deserunt sunt cupiditate fugit sed quia corporis quaerat excepturi accusantium laudantium eaque consequatur fuga? Libero quis nam, deserunt repudiandae illum aliquam?
Soluta quia optio perspiciatis atque omnis quas ipsum pariatur doloribus, minima quasi reprehenderit enim laboriosam provident corporis eum distinctio, praesentium non perferendis, libero possimus nobis. Odio voluptas nihil qui numquam?
Repudiandae, accusantium illo. Veritatis dolores sequi magni ad inventore rerum maxime quae voluptate aliquam, necessitatibus dolorum quaerat, minima perspiciatis maiores beatae, in quas recusandae cupiditate consequatur ipsam odit. Numquam, alias!</p>
</div>
</body>
</html>
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!DOCTYPE html>
<html lang="en">
<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>
@media screen {
body { background-color: red; }
}
@media print {
body { background-color: green;}
}
</style>
</head>
<body>
<h1>모니터와 프린터 구분</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta molestiae possimus quia, corrupti, neque necessitatibus nam quidem nisi aperiam expedita, adipisci voluptate deserunt ducimus cupiditate vitae quasi amet id eius.
Consequuntur asperiores quisquam facere minima nobis, inventore earum provident dolores veritatis delectus amet distinctio expedita dicta voluptas iusto optio magnam facilis perferendis dolorem. Voluptatem ipsam fugiat suscipit architecto quo dolorum?
Obcaecati asperiores repudiandae eius maiores, nulla fugiat voluptas qui dolor rerum exercitationem quo. Quia eos autem enim iure vitae nisi debitis in reprehenderit quisquam cumque recusandae, illo magnam sint consequatur?
Ab doloremque cum id praesentium ea saepe exercitationem natus maiores rem possimus pariatur necessitatibus error ut officiis inventore totam, voluptatum laboriosam. Soluta eligendi veritatis similique hic molestias magnam sunt sed.
Excepturi maiores consequatur quo nisi dignissimos mollitia ab quibusdam nulla deleniti vel. Animi velit fuga veritatis, deleniti, autem esse voluptatum, eius asperiores eveniet quod voluptatem quaerat facere porro reprehenderit itaque?</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>
/* 스마트폰 */
@media screen and (max-width: 767px) {
body { background-color: yellowgreen;}
}
/* 태블릿PC 세로 */
@media screen and (min-width: 768px) and (max-width: 959px) {
body {background-color: aquamarine;}
}
/* 데스크톱 */
@media screen and (min-width: 960px) {
body {background-color: blueviolet;}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore natus quaerat eaque quae tempora officiis doloribus dignissimos, qui maiores repudiandae. Officia quod nobis aliquam numquam tenetur amet ex ipsam earum?
Perferendis, fugiat animi quisquam incidunt aspernatur blanditiis voluptas, unde laudantium id, modi suscipit illo magnam voluptate impedit. Odio sapiente qui quam porro magnam, nihil quo enim? Excepturi doloribus fugit sit.
Quis iusto est, dolorem soluta error ab quam eaque excepturi placeat necessitatibus voluptatum optio itaque delectus iure architecto neque! Voluptatum ad voluptates quis non illum quae et deleniti aut rerum!
Sequi, accusantium minima error, molestias debitis necessitatibus ipsa eligendi autem officia nobis ducimus aut in natus voluptas obcaecati minus sit repellat. Rerum sed impedit consequuntur laboriosam ipsum totam blanditiis non!
Facere labore in neque eligendi assumenda illum, nemo dignissimos doloribus vero et dolorum sequi at eum, saepe vitae praesentium similique earum fugit dicta porro! Accusamus eius asperiores quod nihil labore!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>
@media screen and (orientation: portrait) {
body {background-color: aquamarine;}
}
@media screen and (orientation: landscape) {
body {background-color: bisque;}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa ea dolore provident sapiente reprehenderit consequuntur? Nesciunt, quis illo. Aperiam aspernatur repellendus corrupti enim est nostrum alias reiciendis laboriosam molestiae labore.
Libero voluptatibus, omnis inventore officia praesentium, cumque nemo rerum, possimus a maiores aut saepe vel quia. Illo, eius fuga impedit nesciunt, minus, perspiciatis voluptatum ea provident iure architecto hic nostrum?
Nobis iusto, illum perferendis blanditiis dicta, culpa consequatur quod est molestias obcaecati incidunt sed molestiae minus similique rem ex dolor. Enim dicta, ipsa minima quaerat consequatur mollitia quod assumenda architecto!
Fuga repellendus similique magnam, cum ad ea? Tenetur quas expedita pariatur modi minus deleniti, ut ratione corporis optio voluptatum reprehenderit sit a itaque, mollitia, veniam ad nemo necessitatibus eius eveniet.
Repellendus, tempore. Quae architecto maxime soluta dolor cum, sapiente veniam quaerat consectetur, facilis facere minus voluptas pariatur error culpa necessitatibus, corporis aliquid reiciendis eveniet veritatis. Fuga obcaecati esse minus pariatur.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>
* { margin: 0; padding: 0;}
body {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu {
width: 260px;
float: left;
}
#section {
width: 700px;
float: right;
}
li {list-style: none;}
@media screen and (max-width: 767px) {
body {width: auto;}
#menu { width: auto; float: none;}
#section {width: auto; float: none;}
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
<div id="section">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet enim porro itaque ab vel tempora repellat eius tempore soluta dolor voluptatem placeat adipisci ut accusantium voluptas, assumenda eveniet voluptatibus harum!
Repellendus aperiam unde modi deleniti, consequuntur aspernatur tempore amet maxime, delectus aliquid fugiat? Corrupti, corporis suscipit? Quas modi dolorum sit fugiat ducimus nemo. Exercitationem iusto odio itaque molestiae aut in.
Dolore a animi facere ut. Itaque earum a, voluptatum nesciunt iste quo quibusdam officiis, ea cumque sit ab illum vero non qui quasi explicabo praesentium facere architecto? Doloribus, provident repellendus?
Libero nobis ducimus repellat qui eligendi tenetur officiis voluptas pariatur fugiat animi aliquam labore officia in expedita amet ea asperiores, eaque eius aut quae minima debitis? Deserunt, adipisci doloremque. Voluptate.
Accusamus ea quas necessitatibus hic iste molestias labore cupiditate voluptates, totam incidunt accusantium eaque laborum voluptate ipsum similique. Magni doloremque consectetur mollitia, odit provident sunt. Recusandae laudantium ipsam consequuntur dicta.</p>
</div>
</body>
</html>
댓글남기기