지지나

몇 차례의 포스팅에 걸쳐 css position에 대해 공부했다. 사실 아직도 낯설고, 머리로 잘 그려지지 않지만 계속 꾸준히 하고 있음ㅋㅋㅋ 초등학교 영어시간에 한참 입에 붙지 않았던 수동태, 현제시제 등이 지금은 자연스럽게 어디서 어떻게 써야할 지 알듯, 컴퓨터 언어라고 다르지는 않는거 같다. 그래서 오늘은 CSS 포지션에 대해서 몇 가지 코딩을 짜보면서 복습하려고 한다. 이렇게 코딩을 해보고, 이전 포스팅에서 absolute 사용시 그 태그의 부모요소에 relative 포지션을 주어 기준을 부모로 만들어준다고 했었다. 혹시 지금 이게 무슨 뜻인지 잘 이해가 가지 않으면 아래 포스팅을 참고하세용! https://gygyna.tistory.com/176 CSS - position 2. absolute ..

전 포스팅까지 css position static, absolute, relative에 대해 다뤘었고, 이번에는 마지막 남은 포지션인 fixed에 대해서 알아보려고 한다. 먼저 예제를 아래와 같이 만들어 보았다. me의 포지션은 absolute에 left:0, top:0의 값을 가지고 large의 높이가 1만 픽셀이기 때문에 부피가 커져서 브라우저에 스크롤이 생겼다. 이 스크롤을 따라서 내리면 초록색 large만 남게 된다. 그런데 여기서 me의 포지션을 fixed로 하면 어떻게 될까? 예상했듯, 스크롤을 내려도 내려도 me는 left:0, top:0에 고정이다. 그렇다면 응용해서 me를 하단 전체를 잡고 가운데 정렬을 하려면 어떻게 하면 될까? bottom에 기본값을 두고 width 100%로 화면 전..

앞 보스팅에서 css 포지션 기본값인 static(정적) position과 relative(상대적) 포지션에 대해 공부했다. 이번에는 relative랑도 협력하여 자주 쓴다는 absolute 포지션에 대해서 알아보자. *생활코딩 강좌와 함께합니다. 2. Position: Absolute 자 일단, 아래처럼 예제를 만들어보았다. 이전 단계에서 me태그에 상대적 포지션 적용하고 이 태그를 우측 하단으로 100px만큼 옮겼었다. 이 위치이동은 parent 태그에 대해서 상대적으로 옮긴 이동이다. 그런데 경우에 따라서는 이 me태그를 html 요소, 이 웹페이지의 좌측상단 가장자리를 기준으로 해서 옮길 필요가 있을 것이다. 그럴 때 필요한 포지션 설정이 absolute 이다. me 태그에 절대적 포지션을 주고,..