여러분도 이제 웹사이트를 만들 수 있습니다 - footer편

이번시간에는 footer를 만들어 보겠습니다.

뼈대 만들기

이번 푸터는 태그가 몇 개 안 들어갑니다.

 

...
	</main>
  	<footer>
    	<div class="footer-style">
      		<ul>
        		<li>
        		  Copyright 2024 by 엉뚱한 J All rights reserved.
        		</li>
       			<li>
       			  test@gmail.com
       			</li>
        	</ul>
    	</div>
  	</footer>
 </body>
 </html>

 

너무 간단하죠?

html만 작성 했을시 모습

꾸미기

css로 꾸며볼까요?

html코드가 적어서 css도 적습니다.

 

.footer-style{
  height: 5.625rem;
  width: 100%;
  color: #fefefe;
  background-color: #4d4d4d;
}

.footer-style ul{
  width: 50rem;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

 

여기서 align-items와 justify-content를 이야기 해볼까요??

이 두개는 flex와 grid 레이아웃에 쓰입니다.

display: flex 는 기본으로 row방향을 갖습니다.

 

justify-content는 flex 방향의 주축을 담당합니다.

주축으로 아이템들의 공간을 조정합니다.

 

align-items는 flex 방향의 교차축을 담당합니다.

교차축 아이템 정렬을 합니다.

 

이상입니다.

 

다음 시간에는 javascript포함하는 웹사이트를 만들어봅시다.

 

헤더 부분을 다시 보고 싶으시다면 아래의 버튼을눌러주세요

 

 

 

메인 부분을 다시 보고 싶으시다면 아래의 버튼을눌러주세요