마지막 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
'개발' 카테고리의 다른 글
📖자바스크립트 Array 배운것들 정리 (0) | 2020.08.02 |
---|---|
파이썬 오락실 게임 만들기 프로젝트 (캐릭터 이동) (0) | 2020.07.28 |
👊파이썬 오락실 게임 만들기 프로젝트 #Intro👊 (0) | 2020.07.27 |
💻정적 웹사이트 클론 코딩 프로젝트 #2💻 (0) | 2020.07.24 |
💻정적 웹사이트 클론 코딩 프로젝트!! #1💻 (0) | 2020.07.23 |