vw, vh 속성
-
vw : viewpoint width
-
vh : viewpoint height
현재 보고 있는 스크린의 크기에 맞게 크기를 보여줌.
전체 화면의 기준은 100vw, 100vh
태그로 예를 들면,
a {
width : 100vw;
height : 100vh;
}position tag
-
배치, 정렬 관련 태그
postion : static
-
요소를 현재 상태로 보여줌. 즉 문서 흐름에 맞게 보여줌.(기본값)
position : relative
-
요소를 static 기준으로 상,하,좌,우에서 얼마나 떨어질지 결정.
-
위치를 이동하며 다른 요소에 영향을 주지 않음.
position : fixed
-
현재 위치(view port 기준)에 요소를 고정시켜줌.
-
스크롤을 내려도 현재 위치로 요소를 표시함.
.alphabet { width: 400px; height: 400px; background-color: red; position: relative; } .b { width: 100px; height: 100px; background-color: green; position: fixed;위와 같이 부모태그가 400400, 자식 태그가 100100이고 fixed로 포지션 태그 적용된 경우,
자식태그 요소를 중앙으로 이동시키려면 위아래로 150만큼 이동시켜야 함.
fixed로 고정된 요소는 위쪽 가장 왼쪽 꼭지점을 기준으로 이동하기 때문! 헷갈릴 수 있으니 기억하기!position : absolute
-
부모 태그에 position 지정이 있으면 부모 태그 기준으로 지정된 값 만큼 이동
(조상 태그에 position 지정이 있으면 조상 태그 기준으로 이동함) -
부모 태그에 position 지정이 없으면 body 태그 기준으로 이동.
그마저도 없으면 viewport(현재 위치)기준으로 이동함..alphabet { width: 400px; height: 400px; background-color: red; position: relative; margin: 0 auto; } .a { width: 100px; height: 100px; background-color: blue; } .b { width: 100px; height: 100px; background-color: green; position: absolute; top: 100px; left: 100px; }
***display : flex 속성
<body>
<div class="container">
<div class="item">item1</div>
<div class="item_2">item2</div>
</div>
</body>
***부모 요소인 컨테이너를 flex container라고 하고,
자식 요소인 아이템을 flex item이라고 함. 클래스명 지정할 때 참고 할 것.
***컨테이너 안에 아이템들을 넣는다 라고 생각하면 쉬움.
***컨테이너 width, height 값을 지정하면 아이템은 그 값만큼 자리를 차지함.
***즉 컨테이너 크기대로 아이템도 움직인다는 것!
.container {
display: flex;
background-color: red;
width: 300px;
height: 500px;
display: flex;
}
.item_1{
background-color: blue;
}
.item_2 {
background-color: green;
}
***아이템_1과 아이템_2는 width 값 300px, height 값 500px을 갖게 되는것!
레이아웃 만들 때 많이 쓰임.
병아리 개발준비생 🐥
https://youtu.be/_uYY1oB8yec?si=D7NhEoxYeEMOkXs4
https://youtu.be/GkqQEMnZ1b8?si=7XmDqzyrh77By1E8
https://youtu.be/nDmZq4lE10M?si=cAN00eoz92s3VLwZ
이거 한번 보시면 더 잘 이해되실 거에요
처음에 동영상 인트로 때 사운드가 크니까 귀갱 조심하세요~