css를 그림판처럼 자유롭게 이용하려면 꼭꼭꼭 필요한 css_position!
아직도 헷갈리는 부분은 있지만 아는 만큼만 우선 정리해보기로
📕웹페이지에서 태그들의 위치를 지정할 때 사용 한다.
.box1{
position: static;
background-color: green;
color:white;
width: 100px;
height: 100px;
}
.box2{
position:relative;
left: 40px;
top: 30px;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
🎈결과
❗box2 원래 자기가 있어야할 자리를 기준으로 left로 40px, top에서 30px 떨어져 있다.
.box2{
position:relative;
left: 40px;
top: 30px;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
.box3 {
position:absolute;
left: 100px;
top: 100px;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
🎈결과
❗box3는 box2를 기준으로 왼쪽으로 100px, 위로 100px 이동했다.
div {
position: fixed;
width:100%;
height: 60px;
padding-left: 20px;
font-family: 'Nanum Pen Script', cursive;
font-size: 50px;
font-weight: 700;
color: #ffffff;
background-color: #D9958F;
}
</style>
🎈결과
❗ 스크롤을 내려도 menu은 화면 저위치 그대로 붙어 있다.
section {
height: 1000px;
border: 3px solid black;
}
h2 {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: greenyellow;
}
🎈결과
❗ 스크롤를 내려도 화면 저 위치에 고정되어 있다. 그런데 다음 형제 요소가 나오면 다음 형제요소로 바뀌어서 고정된다.
여기서 바로 저 더보기 가 position: absolute로 사용 됐다.
👩🎓
이를 읽을 때 우선 기사 내용을 알고, 더보기가 진행 되어야 논리적으로 이루어 질 수 있기 때문에 논리적 마크업을 위해 absolute를 이용했다.
Css는 마크업에는 아무 영향을 주지 않기 때문에,CSS의 position을 이용해서 시각적으로도 찾기 쉽고,논리적 순서를 쌓기 위해서는 position을 이용했다.
position을 이용해서 CSS로 나만의 캐릭터를 만드는 실습을 했다.
개린이로써, 화이팅 했다 :)
귀여운 귤이🧡💛💚💙💛
https://github.com/yoojin-park19/Frontend/blob/main/design/character.html
주말동안 평일에 하지 못했던 정리 좀하고, 이해 안가던 부분들도 파봐야 할것 같다. 그래도 해피 금요일!!!