Amarans
0218 CSS| Position | text_align | 본문
<!DOCTYPE html>
<html>
<head>
<style>
body{
padding-top:30px;
}
#parent, #other{
border:5px solid tomato;
}
#large{
height:10000px;
background-color: tomato;
}
#me{
background-color: black;
color:white;
position: fixed;
left:0;
top:0;
width: 100%;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
<div id="large">large</div>
</body>
</html> position: relative; 이녀석이 있어야지 밑에 레프트와 탑이 기능 작동을 한다. //
absolute 로 해서 left 0 top 0 하면 html 페이지 맨 위 왼쪽 을 기준 relative는 부모기준
fixed = 스크롤 바와 무관하게 자기 자리를 고정 시킴
left:100px; 왼쪽으로부터 100px 만큼
top:100px; 위에서부터 100px 만큼
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: justify;
}
h2{
text-align: right;
}
h3{
text-align: center;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum reiciendis itaque vitae ullam placeat eveniet repellendus nemo delectus doloremque facere repellat laborum exercitationem veritatis consequuntur non, corrupti est natus perferendis beatae asperiores fuga aliquam voluptas quas quam. Molestiae ratione deserunt autem sequi perferendis tempora maxime odit exercitationem nihil nostrum? Asperiores nobis ullam debitis ut ab eveniet provident accusamus quam voluptates, maxime ipsam at nihil magnam, dolores a dolore delectus totam laborum natus enim esse voluptatem impedit ipsum. Repudiandae nihil ipsa magni? Earum laudantium maiores adipisci dignissimos ratione, nesciunt, quae modi harum impedit tempore deserunt vero culpa quidem, delectus natus ea debitis voluptatum. Placeat ad, reiciendis pariatur molestias doloremque nobis. Voluptatibus soluta eligendi sit atque aspernatur, mollitia saepe recusandae voluptatum ut corporis natus culpa aliquam totam repudiandae eos autem vel odio eveniet accusamus velit, magnam provident? Officia facilis sit laudantium necessitatibus fugiat veritatis consequatur asperiores expedita unde, tempore earum quaerat ex a. Vero ab animi est repudiandae quibusdam cupiditate! Amet obcaecati exercitationem esse distinctio voluptatibus, non atque repellendus, temporibus illum eum perferendis minima ducimus voluptate. Porro, voluptatum? Magni itaque vel quam. Eos sapiente ea consequuntur a nostrum, cum maxime laborum obcaecati cumque neque assumenda ipsum accusantium quasi voluptate ullam. Quis, nesciunt cumque dolorem error quasi nihil eum, vitae reiciendis labore minus officiis laborum quam odio voluptatem, odit maiores ab at rerum magnam eius tempore impedit doloremque? Dignissimos repellendus aut obcaecati rerum recusandae sequi consequuntur est pariatur enim quas repudiandae fuga rem porro iste optio, eum vitae deserunt. Enim numquam alias itaque nihil dolores, sint nam amet incidunt ipsam aspernatur, quis eaque commodi quos reiciendis tenetur assumenda modi facere? Hic, maiores. Facere corporis, iure ullam non consequuntur distinctio ratione impedit, ab eum, magnam maiores rem saepe animi! Quidem sit error odit ad alias laborum quas, tempora dicta eaque aut modi delectus eos sunt aliquam? Totam nobis excepturi, quam quisquam perspiciatis aliquam? Quod ipsum quos corrupti voluptatum porro! Laudantium in, impedit error nisi, adipisci suscipit molestias nemo unde illo ducimus repellat id pariatur quis harum deleniti facilis omnis delectus ipsa nam modi vel rerum labore laboriosam officia. Placeat earum adipisci vel quisquam consectetur deserunt quibusdam! Incidunt aperiam rerum veniam ipsam dolore ullam! Excepturi quisquam magni ipsa eaque consequatur voluptas necessitatibus culpa corrupti nulla totam itaque sed quam quos, rem saepe ullam non, deleniti exercitationem libero laudantium nam, adipisci sit debitis temporibus. Dolor culpa est molestias harum inventore voluptatem debitis, velit sed molestiae assumenda ea quam consequuntur nulla recusandae dicta expedita perferendis consectetur facere obcaecati repellendus ipsum non. Dolores blanditiis minima deserunt quam sequi. Recusandae error quidem accusantium iusto eaque ratione ipsam molestiae numquam architecto et quos voluptate facilis minus sit accusamus blanditiis incidunt, perferendis, dicta libero dolores rerum fugiat quisquam possimus nesciunt! Repellat autem impedit iure nesciunt ratione fugit tempore quisquam iusto sapiente corrupti temporibus, quasi officia mollitia molestias harum tempora nisi assumenda. Veniam, quo! Consectetur minus distinctio totam cupiditate ullam doloribus neque, reiciendis perspiciatis modi nemo porro sequi debitis ratione molestiae. Laborum porro minima ab temporibus possimus labore. Ipsum voluptatem porro eligendi.
</p>
<h2>안녕하세요</h2>
<h3>amarans입니다</h3>
</body>
</html>
'CSS' 카테고리의 다른 글
| 0219 | Column | Background | (0) | 2020.02.19 |
|---|---|
| 0219 Flot | holy_grail_layout (0) | 2020.02.19 |
| 0219 Flex | grow&shrink | holy_grail_layout (0) | 2020.02.19 |
| 0218 CSS - | Box | Color | Font | (0) | 2020.02.19 |
| 0217_CSS | Parent_child_selector | tag (0) | 2020.02.19 |
'CSS' Related Articles
more
Comments