<!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>
body {
margin: 0;
padding: 0;
height: 3000px;
}
header {
border-bottom: 2px solid gray;
position: fixed;
/* 주의사항 : position 속성을 사용하면 텍스트가 있는 곳 만큼 범위가 줄어든다. */
/* fixed는 부모 요소의 영향을 받지 않고 브라우저 전체의 영향을 받는다. */
width: 100%;
}
header h1 {
margin: 15px 20px 30px;
padding: 0;
float:left;
font-size: 40px;
}
header ul {
margin: 30px 0 0 ;
float:right;
padding: 0;
}
header ul li{
/* 목록의 동그라미 점 제거 */
list-style: none;
float: left;
margin-top: 10px;
margin-right: 30px;
font-size: 1.5em;
font-weight: 700;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<header class="clearfix">
<h1>MY Home</h1>
<ul class="clearfix">
<li>소개</li>
<li>커뮤니티</li>
<li>자료실</li>
<li>마이페이지</li>
</ul>
</header>
</body>
</html>
'CSS입문' 카테고리의 다른 글
| CSS_position(stack order_실습)_22.04.12(Tue) (0) | 2022.04.12 |
|---|---|
| CSS_position(stack order)_22.04.12(Tue) (0) | 2022.04.12 |
| CSS_position(실습1)_22.04.12(Tue) (0) | 2022.04.12 |
| CSS_position(absolute-02)_22.04.12(Tue) (0) | 2022.04.12 |
| CSS_position(absolute)_22.04.12(Tue) (0) | 2022.04.12 |