푸터 검색 결과
2 개의 검색 결과가 있습니다.
CSS

[CSS 레이아웃] 푸터 (footer) 만들기

(이 포스팅은 20년 05월쯤 썼던 글의 복원입니다.) 푸터(footer) 만들기 개요 이번에 혼자 하고 있는 토이 프로젝트에서 만든 진짜 간단한 푸터가 있는데 기록으로 남겨봅니다. 이렇게 생겼습니다. 반응형이라 데스크탑 모드에서는 왼쪽에 사이드바가 생겨서 다음과 같이 됩니다. 어떻게 만들었는지 천천히 살펴보겠습니다. footer(푸터)의 태그 구조 우선 저는 시맨틱 태그를 무척 사랑하는 '웹 표준 지킴이'기 때문에 div를 사용하지 않고 footer 태그를 사용합니다. address태그도 쓰면 좋겠지만 css귀차니즘이 발동해서 안 썼습니다. 하지만 푸터에 있는 링크들은 역시 시맨틱 태그인 nav태그로 그 링크들을 감싸줍니다. 그리고 쓰고 싶은 내용을 p태그로 감싸주면 푸터 태그의 구조는 완성입니다. *..

2021. 8. 30. 08:00
CSS

[CSS 레이아웃] 헤더나 푸터 화면에 고정시키기

스크롤을 움직여도 고정되어있는 헤더와 푸터 레이아웃 만들기 사용자가 스크롤을 움직여도 고정되어 움직이지 않는 헤더(header)와 푸터(footer)를 만들어보려고 합니다. 헤더나 푸터나 고정시키는 원리는 똑같기 때문에 같은 방법으로 고정시킵니다. 밑에 코드의 결과를 한번 테스트해보세요. 테스트는 스크롤을 움직여보면 됩니다. 그리고 소스코드를 하나하나 뜯어서 구현원리를 살펴보도록 하겠습니다. * 소스코드 및 결과 See the Pen https://codepen.io/cocoder16/pen/wvaYqbg"> wvaYqbg by cocoder16 (https://codepen.io/cocoder16">@cocoder16) on https://codepen.io">CodePen. 기본적으로 화면에 고정시키..

2021. 5. 24. 08:00