6. 기본적인 페이지 만들기 (footer)

안녕하세요!

오늘은 기본적인 페이지 만들기의 마지막인 

footer를 만들어 볼꺼에요.

footer에는 저번에 말씀 드린데로 로고나 SNS 연동 부분이 들어가면 된다고 설명 드렸는데요.

지금부터 한번 만들어 보도록 할께요.

<footer>
    <div class="foo_div">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTvR4xtDJflOk_62U8WriJaDb7LR7RXRWVtsK6r77VWvXvzcxRm">
    </div>
    <div class="foo_div1">
        <span>(주)별을쏘다</span> <span>  |  </span>
        <span>대표 : 달꼬미</span> <span>  |  </span>
        <span>사업자등록번호 : 000-00-00000</span> <span>  |  </span>
        <p>주소 : 대한민국 어디엔가 사는 달꼬미네 집!</p>
        <p>STAR CAFE</p>
        <img src="https://t1.daumcdn.net/cfile/tistory/2764774853DBB4C927">
        <img src="http://www.newscj.com/news/photo/201610/380601_341606_5826.jpg">
        <img src="https://lh5.ggpht.com/yVfPv-yLjIuBjpKj41NLkLXmuVv8XzH0m2hf-_sz9lQDv9WB9SX0McB8Jn4bQe4w5Q=w300">
        <img src="https://media.rocketpunch.com/cache/2e/d5/2ed5970e32545f0b1d74beac75914e7b.jpg">
    </div>
</footer>

우선은 기본적으로 footer 부분이니 푸터 안쪽으로 작성을 해주시면 되구요.

전에도 말씀 드렸듯이 부모와 자식 관계에 대해서 잘 알아주셨으면 합니다.

가장 중요한 부분이니 까먹지 마시구요!!

소스가 한줄 길어지더라도 유지보수가 잘 되게 하려면 이렇게 해야하겠죠??

이런식으로 코드 작성을 하셨다면 이제 결과를 한번 보겠습니다!

이런식으로 다른 사이트에서 많이 보신 푸터 부분을 이렇게 쉽게 꾸미실 수 있습니다.

아! 이렇게 되기 위해선 스타일 부분도 아셔야겠죠??

        footer {
            background-color: #3c3935;
        }
        
        footer img {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            margin-top: 7px;
        }
        
        .foo_div {
            float: left;
        }
        
        .foo_div1 {
            text-align: center;
        }
        
        .foo_div1 span {
            font-size: 15px;
            color: white;
        }
        
        .foo_div1 p {
            margin-top: 5px;
            color: white;
        }
        
        .foo_div1 img {
            width: 25px;
            height: 25px;
            margin-top: 10px;
        }

이 스타일을 적용해 주시면 저와 같은 결과가 나오게 됩니다.

하지만 매번 말씀드리는 부분이지만 무조건 복붙을 하시지 마시고

직접 작성해 보시고 모르시는 부분을 댓글로 남겨주세요!!

이렇게 기본적인 페이지 만들기가 끝났네요!!

다음은 상세 페이지 꾸미기로 넘어가 볼께요!!

기능 추가는 스크립트 부분이나 java에서 처리하도록 할께요!!

감사합니다!!