Hiio.com

  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를 통해 기능들을 추가해 보면서 , 디자인을 하나씩 수정해 나가는 과정을 진행해 보겠습니다.