레이아웃 검색 결과
5 개의 검색 결과가 있습니다.
CSS

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

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

2021. 8. 30. 08:00
CSS

[반응형 웹개발] 모바일 우선 개발법

모바일 우선 개발과 데스크탑 우선 개발 반응형 웹 개발을 할 때, 모바일 우선 개발은 모바일 레이아웃 코드를 먼저 만들고, 데스크탑 레이아웃 코드를 나중에 만드는 개발 방법이고, 데스크탑 우선 개발은 데스크탑 레이아웃 코드를 먼저 만들고, 모바일 레이아웃 코드를 나중에 만드는 개발 방법입니다. 반응형 웹 개발을 하면서 여러 디바이스를 고려할 때에는 모바일 우선 개발을 할지, 데스크탑 우선 개발을 할지를 고려해야 합니다. 모바일 우선 개발이 왜 더 효율적인가? 통상적으로는 모바일 우선 개발법이 데스크탑 우선 개발법보다 더 효율적인 작업방법입니다. 더 작은 화면을 가진 모바일에서는 같은 UI에 대해 더 작은 단위로 행을 쪼개어 보여줘야 하기 때문에 더 작은 원자들로 레이아웃을 구성할 수 있기 때문입니다. 더..

2021. 8. 23. 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
CSS

[CSS 레이아웃 기본] offset과 position 속성에 대하여 정리

offset의 개념원리 offset은 상대 주소(relative address)의 개념입니다. 상대주소이기 때문에 offset값을 지정해줄 element와 기준이 되어줄 element가 필요합니다. 기준이 되어줄 element는 html태그일 수도 있고, body태그일 수도 있고, 부모 태그일 수도 있고, 상황에 따라 (작성한 코드에 따라) 다를 것입니다. offset값으로는 top, bottom, left, right이 있습니다. 기준이 되는 element가 있다고 할 때, 그 기준 element의 가장 윗 지점이 top이 0이 되는 지점입니다. 가장 아랫 지점은 bottom이 0이 되는 지점입니다. 가장 왼쪽 지점은 left가 0, 가장 오른쪽 지점은 right가 0이 되는 지점입니다. 여기서 ele..

2021. 2. 26. 08:00
CSS

[CSS 레이아웃 기본] display 속성의 개념과 사용법

태그들이 자신만의 부피를 차지하는 방식 각 태그 요소들은 화면에서 자기가 차지하는 부피가 있습니다. 물론 부유하는 형태도 있지만 이 글에서는 배제하도록 합시다. 어떤 태그는 화면에서 줄 전체를 차지하는 태그도 있고 (줄 바꿈이 자동으로 되는) 화면에서 자기가 실질적으로 차지하는 자리만큼만 있는 태그도 있습니다. (줄 바꿈이 자동으로 안 되는) 전자는 block element라고 하고 후자는 inline element라고 합니다. 각 태그마다 block인지 inline인지 default 값이 있습니다. 가령 div태그는 block, span태그는 inline이 default입니다. * 예시 코드 하지만 CSS를 이용하면 이 값을 바꿔줄 수 있습니다. block element로 바꿔주고 싶으면 display..

2021. 2. 22. 08:00