Section 18 - 티스토리 반응형 스킨 만들기 - Footer

이번 섹션은 레이아웃의 완성을 위하여 하단(푸터 / Footer) 부분을 완성하겠습니다.

블로그 하단에는 사이트나 블로그의 기본정보(주소, 저작권, 통신판매시 통신판매업 / 사업자등록번호 등)을 기재하는데 일부 블로그에는 공지사항, 최신글, 최신 댓글 등과 블로그 네비게이션을 넣기도 합니다.
우리는 간단하게 네비게이션과 저작권 정보만을 기재하도록 하겠습니다.

STEP 1. skin.html Footer 코드 추가

	

        

            태그
            방명록
            관리자
        
        
Blog is powered by kakao / Designed by noo9ya
	
 

• 지난 섹션에서 미리 작업해둔 <div id="footer">영역의 코드를 위와 같이 수정/추가합니다.
• 태그 / 방명록의 치환자는 상단(header) 작업에서 이미지 숙지하셨습니다.
• https://noo9ya.tistory.com/manage : 관리자 화면으로 이동하는 링크입니다. (우리는 새창에서 열리도록 했습니다.)

※ 너무 간단해서 코드 구조 이미지는 생략합니다.

STEP 2. style.css Footer 스타일 추가 및 수정

/* footer */
.footer-nav {margin-bottom:5px; font:0.75em normal dotum, sans-serif; text-align:center}
.footer-nav a {display:inline-block; margin:0 3px}
.copyright {color:#999; text-align:center; font:0.688em normal verdana, tahoma, sans-serif; letter-spacing:1px}
.copyright a {color:#ff8149}
.copyright a:hover, .copyright a:active, .copyright a:focus {text-decoration:underline}

• 기존 CSS /* header */ 아래부분에 위의 Footer 스타일을 추가합니다.
• #footer 아이디를 찾으셔서 padding값을 padding:20px으로 수정합니다.

STEP 3. Footer 결과 확인

footer 결과 확인