💻정적 웹사이트 클론 코딩 프로젝트 #3(마무리)💻

마지막 footer영역에 대해 살펴보자!

딱히 어렵다 할 부분은 없는데

나는 글자 위에 가운데 경계선을 어떻게 해야 할지 잘 몰랐다.

 

border로 하자니 footer위 전체가 선으로 표시되니까 이 방법은 쓸 수 없었다.

 

그래서 코드를 참고해보니 ::before을 이용해서 구현하였다

 

footer {
    margin-top: 2rem;
    margin-bottom: 10rem;    
}
/* 경계선 만들기 */
footer:before {
    content: "";
    border-top: 1px solid rgba(255,255,255, 0.3);
    display: block;
    width: 10em;
    margin: 5rem auto;
    
}
/* 경계선 만들기 */

footer p {
    text-align: center;
    color: rgba(255,255,255, 0.75);
    font-size: 1em; 
}

 

content: "" 로 텍스트 공간을 만들고 그위에 border을 그리는 방식을 사용하였다.

margin: (상,하) (좌, 우)를 설정하는 것을 알고 있자 

(좌, 우) auto를 사용하면 자동적으로 가운데로 이동해준다.

 

 

 

이렇게 3개의 포스트에 이어서 웹페이지를 클론 코딩해보았다~!👏

웹페이지를 만들 때는 처음에 구획 나누기를 얼마나 잘하느냐에 따라 진행하기가 수월해질 수도 있고 엉킬 수도 있다는 것을 다시 한번 느끼게 되었다

 

전체 소스코드는 

HTML 🌴

https://github.com/Changha-dev/self-Templated/blob/master/Web/selfTemplated/index.html

CSS 🌴

https://github.com/Changha-dev/self-Templated/blob/master/Web/selfTemplated/style.css