transparent3 페이지 footer 영역 마무리, 최종 완성 전 시간에는 footer영역을 하다가 끝났었습니다. 오늘은 footer의 나머지 영역을 끝내고, 이 페이지를 완성하도록 하겠습니다. 왼쪽에 붙어 있는 텍스트 먼저 css를 하도록 하겠습니다. footer .top > div ul li {float:left;} footer .top > div ul li a {color:#fff;font-size: 13px 0;line-height: 45px;} 앞서 ul에도 float left를 줬었지만 텍스트들도 리스트의 형태가 아닌 가로로 쭉 정렬되어 있어야 하기에 ul li에도 float left값을 줬습니다. 그리고 텍스트 설정과 세로 가운데 정렬을 위해 line-height값을 세로 크기값으로 주게 되면 이렇게 됩니다. footer .top > div ul l.. 2021. 12. 15. 페이지 컨텐츠 베너 영역 마무리&공지, 뉴스 영역 제작(1) 오늘은 전 글에 이어 컨텐츠영역의 베너 부분의 마무리와, 아래 공지 부분도 시작하겠습니다. (전 글에서 다뤘던 개념들은 간략한 설명만 하고 넘어가도록 하겠습니다.) 지난번에는 이 상태까지 했었습니다. 그리고 이게 오늘 할 부분의 원본 홈페이지입니다. 이어서 검색하기 버튼의 css를 하겠습니다. .notice > div .top > div a {display: block;height: 45px; line-height: 45px;text-align: center; color: white;background: #2d5b79;font-size: 15px;} 원본의 버튼 디자인을 보면 위의 입력칸이나 select 태그 부분과 width 값이 같고, 글씨는 흰색에 세로 가운데 정렬이 되어 있습니다.(height, .. 2021. 12. 14. 사전 준비&페이지 header 제작(1) 이번에는 어떤 홈페이지와 유사한 페이지를 비슷하게 만들어 보는 작업을 시작하겠습니다. (이번에는 코드 전체가 아닌 설명 중간중간 꼭 필요한 부분만 코드와 같이 쓰겠습니다.) (현재는 해당 홈페이지의 디자인이 바뀌어 있어 해당 포스팅의 내용과의 디자인이 다릅니다.) - 소개 & 사전 준비 먼저 어떤 것을 하는지에 대해 소개해 드리겠습니다. 이 페이지와 비슷한 페이지를 만드는 작업을 하겠습니다. 시작하기 전에 사전 준비로 페이지에 있는 이미지들이 필요한데, 먼저 크롬 웹스토어에서 두 가지를 다운받아 줍니다. 1. Full page screen capture 먼저 저 페이지는 지금 스크롤로 아래까지 내용이 있는 상태이기에 스크롤과 상관 없이 전체 페이지의 모습을 찍어주는 확장 프로그램을 설치합니다. (.. 2021. 12. 7. 이전 1 다음
