728x90
[목표]
: 웹페이지의 기본인 헤더에 있는 회원가입, 로그인 등 버튼 정렬을 실습해보자
알아야할 개념은 다음과 같다.
1. position => relative, absolute
2. ul
실습1 ) relative와 absolute의 관계(1)
absolute는 절대값이라고 보면 된다.
예를 들어
position:absolute;
bottom:0px, right: 0px; 일 때
오른쪽 아래에 딱 붙어서 보여준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<ul>
<li>회원가입</li>
<li>로그인</li>
<li>장바구니</li>
<li>주문배송</li>
<li>고객센터</li>
<li>매장안내</li>
<li>Global</li>
</ul>
</div>
</body>
<style>
body {
width: 800px;
}
.parent {
position:relative;
width: 100%;
height: 100px;
border: 1px solid black;
}
ul {
position:absolute;
list-style:none;
bottom: 0px;
right: 0px;
}
li {
float: left;
padding: 2px 5px 0px 2px;
}
</style>
</html>
실습2 ) relative와 absolute의 관계(2)
그런데 부모요소가 relative라면
부모 기준으로 오른쪽 아래에 붙는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<ul>
<li>회원가입</li>
<li>로그인</li>
<li>장바구니</li>
<li>주문배송</li>
<li>고객센터</li>
<li>매장안내</li>
<li>Global</li>
</ul>
</div>
</body>
<style>
body {
width: 800px;
}
.parent {
position:relative;
width: 100%;
height: 300px;
border: 1px solid black;
}
ul {
position:absolute;
list-style:none;
bottom: 0px;
right: 0px;
}
li {
float: left;
padding: 2px 5px 0px 2px;
}
</style>
</html>
요약 )
상단에 회원가입, 로그인 헤더 요소는
배치할 때 알아야할 점은 딱 2가지다
1. postion relative와 absolute간의 관계
2. 배치할 위치를 위해 width 설정하기
예) body 태그 width에 따라 회원가입,로그인 버튼 위치가 달라짐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<ul>
<li>회원가입</li>
<li>로그인</li>
<li>장바구니</li>
<li>주문배송</li>
<li>고객센터</li>
<li>매장안내</li>
<li>Global</li>
</ul>
</div>
</body>
<style>
🎈🎈🎈 width 800px보다 넓히면 더 오른쪽으로 보낼 수 있다.
body {
width: 800px;
}
.parent {
position:relative;
width: 100%;
height: 100px;
border: 1px solid black;
}
ul {
position:absolute;
list-style:none;
bottom: 0px;
right: 0px;
}
li {
float: left;
padding: 2px 5px 0px 2px;
}
</style>
</html>
'CSS' 카테고리의 다른 글
| flex를 이용한 정렬(justify-content, align-items, align-content) (0) | 2023.09.02 |
|---|---|
| flex를 이용한 간단한 반응형 (0) | 2023.09.02 |
