●index.css
* {
margin: 0;
padding: 0;
}
.container {
background-color: cadetblue;
display: flex;
/* 가로로 무조건 출력 */
/* justify-content: center; */
align-items: center;
/*중간 정렬이 된다.*/
flex-direction: column;
/*이렇게 넣으면 세로로 출력된다.*/
}
.header {
position: relative;
background-color: yellow;
height: 200px;
width: 1000px;
/* margin: 0 auto; 겉의 여백 자동 */
}
.header .rtnav {
position: absolute;
top: 0;
right: 0;
}
.header .rtnav ul {
list-style: none;
display: flex;
}
.header .rtnav ul li {
border: 1px solid black;
}
.header .rtnav ul li:nth-child(1) {
border-radius: 20px 0 0 10px;
}
.header .rtnav ul li:nth-child(4) {
border-radius: 0 20px 10px 0;
}
.header .rtnav ul li a {
display: inline-block;
font-size: 1.5rem;
padding: 2rem;
}
.header .rtnav ul li a:hover {
background-color: red;
color: white;
}
.header .lbnav {
position: absolute;
bottom: 0;
left: 0;
}
.content {
width: 1200px;
background-color: red;
height: 500px;
}
.footer {
background-color: green;
height: 200px;
}
class ="클래스 명 "에 대한 스타일 을 입힌다.