position?
스터디
스터디 2일차!
구역을 나누고, 그걸 width, height 값을 줘서
정사각형, 직사각형을 만들고, 겹쳐서 만드는 실습을 했다.
일단 div로 구역을 나누고..
구역끼리 겹치게 하는 부분에서 많이 고민했다.
딱 가운데에 겹치게 하고 싶은데
뭘 해도 잘 안 돼서 고민했다.
열심히 구글링 하니까
position을 바꿔주라고 했다.
position은 태그들의 위치를 정하는 것
1. static
일단 기본적으로 모든 태그는 이 상태이다.
span 태그는 오른쪽으로
div 태그는 아래로 쌓이는 형태.
position: static;
2. fixed
이건 스크롤을 내려도 계속 있는 메뉴같은 상태이다.
계속 그 자리에 고정!
position: fixed;
3. relative
원래 자기의 자리에 대해서 상대적이다.
position: relative;
4. absolute
내가 구현하고자 하는 화면은 이 absolute를 써야했다.
상대적이지 않고, 왼쪽 제일 위가 기준이다.
position: absolute;
사실 아직도 position은 조금 헷갈린다.
이 부분은 수업 때도 배울 예정이지만,
그 전에 미리 여러가지 시도해보며 좀 익숙해져야겠다.
(수정) div로 나누지 않는 습관 들이기!
2021.11~