지지나

CSS의 중요한 내용인 박스모델, 포지션에 대해서 자세히 알아봤으므로 이번에는 재미난 것을 해보려고 한다. 바로 네이버 메인화면에 있는 언론사 퍼즐 만들기ㅋㅋㅋ 우선 24개의 언론사 로고를 한번에 하면 내가 당황스러우니, 딱 4개만 한줄에 나열해보도록 하자. 참고로 저 로고들은 화면캡쳐해서 프로그래밍 한 것과 같은 파일 위치에 저장했는데, 자세한 내용은 이전 포스팅에서 다뤘던 내용을 참고하면 됩니당! https://gygyna.tistory.com/168 포토샵 - 이미지 하나를 여러개로 잘라서 저장하기 안녕하세요 지지나입니다! 주말마다 html/css 수업을 듣는데, 웹퍼블리셔 과정이다 보니 포토샵능력을 요구할 때가 간혹 있네요ㅎㅎ 저는 개발을 배우고 싶다는 첫 방향으로 정한 길인데, 점점 더 gygy..

몇 차례의 포스팅에 걸쳐 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%로 화면 전..