[HTML5&CSS3] Content 상관없이 aside, footer 고정시키기
<aside>, <footer> 고정 시키기
position: fixed- aside의 경우
right: 0로 고정,bottom: ?px으로 띄우기 - footer의 경우
bottom: 0으로 고정
코드
aside {
position: fixed;
right: 0;
bottom: 500px;
z-index: 1000;
}
footer {
background-color: #f1f1f1;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}
문제 상황
왜 제 위치로 가지 않는가??
⇒ 제 위치로 간 것이다.
- Contents의 길이가 짧기 때문에 페이지가 짧아진거지 제 위치에 있다.
- Content에 상관없이 고정시키려면 어떻게 해야할까??
⇒ CSS 를 사용해야 한다!!
추가 HTML5, CSS3 공부
HTML에 외부 CSS 적용법
<head> 안에 아래 코드를 넣는다.
<link rel="stylesheet" href="style.css">
Flexbox 또는 Grid로 섹션 위치 크기 조정
.edu-item {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.profile {
flex: 1;
...
}
.info {
flex: 1.3;
...
}