728x90
Footer
- Footer부분은 웹사이트의 가장 하단에 위치하고 있습니다.
- 웹사이트의 중요하고 우선순위가 높은 컨텐츠들은 보통 상단이나 사이드에 위치해 있습니다.
- 그만큼 Footer부분은 작은 폰트사이즈로 링크만 제공되어 왔습니다.
- 하지만 이제는 웹사이트의 디자인이나 레이아웃에 맞게 끔 footer에도 많은 정보가 담기기도 하고, 기능이 변화하고 있습니다.
- 또 하지만, 제가 원하는 디장인에서 Footer부분은 아주 작은 영역에 불과 하기 때문에 그리 중요하지는 않습니다.
- 아주 간단한 텍스트만 추가 하면 됩니다.
텍스트 추가 및 크기/ 위치 지정
- footer에 들어갈 컨텐츠들이 많다면 footer페이지를 따로 분리하면 좋겠지만, 텍스트만 들어가므로 layout.html 페이지에서 바로 진행합니다.
- footer태그 안에 ©2020 Hiio. All rights Reserved. 라는 텍스트를 span에 감싸서 추가해 줍니다.
<footer>
<span>
©2020 Hiio. All rights Reserved.
</span>
</footer>
- footer 의 스타일을 지정해 주겠습니다.
- text-align center / line-heght 50px 지정해 줍니다.
- 그리고 thin10선택자를 만들어 font-size 10px / font-weight 100으로 지정해준후 footer 안의 span class를 thin10으로 지정해 줍니다.
문제 와 해결
- 사실 위 과정 되로 진행 하게 되면 문제가 발생합니다.
- main 안에 있는 컨텐츠들의 높이가 반영되지 않아 main 높이값으로 지정해 준 height 100%만 반영되고, 그 밑에 footer가 오게 되어 height 100%를 넘어가는 높이는 footer에 겹쳐서 보여지게 됩니다.
- 이를 해결하기 위해 #about 태그를 추가해 about 컨텐츠들을 감싸줍니다.
- #about / #portfolio / #sidebar / #contact 의 값들을 아래의 코드처럼 수정해 줍니다.
- 이 후 각 컨텐츠들에게 지정해준 left / top 값을 수정하고 float left 와 margin 값을 통해서 위치를 조정해 줍니다.
- 아래의 코드는 위의 내용을 반영한 코드입니다.
html,
body {
font-family: 'Noto Sans KR', sans-serif;
height: 100%;
}
header {
width: 100%;
height: 50px;
}
footer {
float: left;
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
}
#main {
margin: 0 auto;
position: relative;
width: 1440px;
}
#sidebar {
position: relative;
float: left;
width: 200px;
margin-top: 150px;
}
nav {
width: 200px;
top: 175px;
}
ul {
list-style: none;
padding-left: 0px;
}
#sidebarul {
padding-left: 65px;
}
li {
font-size: 20px;
width: 135px;
height: 20px;
padding-top: 30px;
padding-bottom: 30px;
font-weight: 100;
}
#maintext {
position: absolute;
top: 345px;
left: 470px;
font-size: 60px;
color: #f41f56;
font-weight: 700;
z-index: 2;
}
#mainsubtext {
position: absolute;
top: 460px;
left: 470px;
width: 230px;
}
#mainsubtext > p:nth-child(1) {
font-size: 30px;
}
#mainsubtext > p:nth-child(2) {
font-size: 15px;
}
#mainimg {
width: 600px;
height: 526px;
position: absolute;
top: 112px;
left: 840px;
z-index: 1;
}
#mainimg > img {
max-width: 100%;
}
/* about page*/
#about {
position: relative;
float: left;
width: 1240px;
}
#aboutimg {
float: left;
margin-left: 60px;
width: 375px;
height: 500px;
}
#aboutimg > img {
max-width: 100%;
}
#myname {
width: 380px;
height: 60px;
}
#myname > span {
font-size: 30px;
font-weight: 500;
}
#moto {
float: left;
margin-left: 100px;
left: 730px;
width: 600px;
height: 205px;
font-size: 50px;
}
#moto > .moto-left-text {
display: inline-block;
width: 270px;
}
#moto > .moto-right-text {
display: inline-block;
font-weight: 700;
width: 310px;
}
#moto > .margin {
margin-top: 25px;
margin-bottom: 25px;
}
#introduce {
float: left;
margin-left: 100px;
margin-top: 80px;
width: 600px;
height: 210px;
}
#introduce > span {
font-size: 30px;
font-weight: 700;
}
#introduce > p {
font-size: 20px;
letter-spacing: 1px;
line-height: 35px;
margin-top: 50px;
}
#myskills {
float: left;
margin-left: 100px;
margin-top: 80px;
width: 600px;
height: 540px;
}
#myskills > .title {
display: inline-block;
font-size: 30px;
font-weight: 500;
margin-bottom: 40px;
}
#myskills > .skill {
float: left;
width: 600px;
margin-bottom: 10px;
}
#myskills > .skill:nth-last-child(1) {
margin-bottom: 0;
}
#myskills > .skill > .skillname {
display: inline-block;
width: 300px;
font-size: 20px;
font-weight: 500;
margin-bottom: 10px;
}
#myskills > .skill > .progressbar {
display: inline-block;
width: 520px;
height: 21px;
background-color: #d6d3d3;
border-radius: 10px;
}
#myskills > .skill > .progressbar > .gauge {
display: inline-block;
width: 10%;
height: 21px;
background-color: #3abff7;
border-radius: 10px;
transition: 1s linear;
}
#myskills > .skill > .skillper {
display: inline-block;
width: 60px;
height: 21px;
text-align: center;
font-size: 15px;
font-weight: 100;
}
/* portfolio */
#portfolio {
position: relative;
float: left;
width: 1240px;
}
#portfolio > .title {
font-size: 60px;
font-weight: 900;
text-align: center;
}
#portfolio > .content {
float: left;
margin-top: 50px;
width: 1240px;
}
#portfolio > .content > .image {
float: left;
width: 500px;
margin-left: 60px;
}
#portfolio > .content > .image > img {
max-width: 100%;
}
#portfolio > .content > .textcontent {
float: left;
width: 680px;
}
#portfolio > .content > .textcontent > .subtitle {
font-size: 35px;
font-weight: 400;
text-align: center;
}
#portfolio > .content > .textcontent > .subtitle > span {
padding: 10px;
color: white;
background-color: black;
display: inline-block;
}
#portfolio > .content > .textcontent > .subdescription {
font-size: 20px;
font-weight: 100;
margin-top: 40px;
text-align: center;
}
#portfolio > .content > .textcontent > .subdescription > span {
display: inline-block;
width: 500px;
text-align: left;
}
#portfolio > .content > .textcontent > .sublink {
font-size: 25px;
font-weight: 300;
margin-top: 30px;
text-align: center;
}
#portfolio > .content > .textcontent > .sublink > span {
display: inline-block;
width: 500px;
text-align: left;
}
/* contact */
#contact {
position: relative;
float: left;
width: 1240px;
}
#contact > .contactinfo {
float: left;
margin-left: 50px;
margin-top: -50px;
width: 350px;
height: 900px;
background-color: #eeeeee;
}
#contact > .contactinfo > .title {
font-size: 60px;
font-weight: 900;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
#contact > .contactinfo > span {
display: inline-block;
width: 100%;
height: 10px;
background-color: white;
}
#contact > .contactinfo > .inquiries > span {
display: inline-block;
width: 320px;
margin-top: 50px;
margin-left: 30px;
}
#contact > .contactform {
float: left;
width: 840px;
height: 850px;
}
#contact > .contactform > form {
width: 540px;
margin-left: 150px;
margin-top: 100px;
}
#contact > .contactform > form > label {
display: inline-block;
width: 150px;
height: 30px;
font-size: 30px;
font-weight: 300;
vertical-align: top;
margin-top: 54px;
}
#contact > .contactform > form > input {
width: 370px;
height: 30px;
margin-top: 50px;
border: 3px solid black;
}
#contact > .contactform > form > #msg {
height: 90px;
}
/*font-style*/
.subtitle {
font-size: 30px;
font-weight: 400;
}
.thin10{
font-size: 10px;
font-weight: 100;
}
.thin20 {
font-size: 20px;
font-weight: 100;
}
- 처음 계획을 하면서 이부분을 신경 쓰지 않는다면 진행 과정중에서 수정을 해야할 일들이 생기게 됩니다.
- 다음 포스팅에서는 jQuery를 통해 기능들을 추가해 보면서 , 디자인을 하나씩 수정해 나가는 과정을 진행해 보겠습니다.
728x90
