디자인 검색 결과
2 개의 검색 결과가 있습니다.
CSS

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

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

2021. 8. 30. 08:00
CSS

CSS로 table을 예쁘게 꾸미는 6가지 방법

CSS로 table 예쁘게 꾸미기 개요 HTML만으로 만들면 못생기고 밋밋한 table을 CSS를 이용하여 좀 더 예쁘고 세련되게 꾸며보겠습니다. 아래 이미지는 샘플용으로 간단하게 만들어본 예시 이미지입니다. 이 글에서는 table을 꾸밀 수 있는 방법을 대표적으로 6가지 정도 소개해볼 테니 적절하게 섞어서 사용하시면 무수히 많은 table디자인이 나오게 될 것입니다. CSS로 table을 꾸미는 6가지 방법 1. 테두리 border 속성은 기본적으로 상속되지 않습니다. 따라서 table, tr, th, td 중 어디에 테두리를 만들지 전략을 짜고 각 태그에 테두리를 달리 적용해보세요. table 태그에 border-collapse: collapse 속성값을 추가해주는 것이 많은 도움이 될 수 있습니다...

2020. 10. 20. 08:00