Hiio.com

  이미지 / 텍스트 추가  

- 이번 포스팅에서는 저번 포스팅에서 추가 한 about 페이지에 추가한 div 태그들안에 컨텐츠들을 채워넣어보겠습니다.

- 이미지 추가는 img 태그를 사용하고, 텍스트는 span 또는 p 태그를 이용해 보겠습니다.

- 아래의 단계에 따라 진행해 보겠습니다.

 

  단계  

1. about 페이지 - aboutimg 추가 

2. myname 텍스트 추가

3. moto 텍스트 추가

4. introduce 텍스트 추가

5. myskills 텍스트 추가

 

  1. about 페이지 - aboutimg 추가  

- about 페이지에 이미지를 추가해 보겠습니다.

- 사용할 이미지는 아래의 이미지입니다.

- 먼저 div #aboutimg 안에 img 태그를 추가하고, 이미지 경로를 지정해 줍니다.

- 이미지 경로는 static -> img -> about 디렉토리 안에 있습니다.

- 대체 문자로는 'aboutimg'를 입력해 주겠습니다.

<div id="aboutimg">aboutimg
    <img src="../static/img/about/Aboutimg.jpg" alt="aboutimg">
</div>

- 범위를 벗어 났네요.

- css 에서 자식 선택자로 img 를 선택한 후 max_width 를 100%로 지정해 줍니다.

#aboutimg > img {
    max-width: 100%;
}

- 잘 들어 갔네요!!

 

  2. myname 텍스트 추가  

- 이제 이미지 아래에 이름을 넣어줘야합니다.

- div #myname 태그 안에 span 태그를 추가하고 텍스트로 'Hun Chang Cho'를 입려합니다.

<div id="myname">
    <span>Hun Chang Cho</span>    
</div>

- 이제 span을 선택해서 css를 적용시킵니다.

- 우선, 폰트 크기와 스타일을 확인합니다.

- 폰트 사이트는 30px, 스타일은 Medium 입니다.

- Medium의 font-weight 값은 500 입니다.

#myname > span {
    font-size: 30px;
    font-weight: 500;
}

  3. moto 텍스트 추가  

- moto부분은 어떻게 구성되어있는지 확인해 보겠습니다.

- 총 6개의 단어가 들어가 있고, 폰트사이즈는 모두 똑같지만 왼쪽과 오른쪽 단어들의 스타일이 다릅니다.

- 왼쪽 오른쪽으로 그룹핑을 하거나 , 가로의 2단어들을 그룹핑 할 수 있습니다.

- 스타일이 다르게 지정되는 것을 생각하면 왼쪽 오른쪽으로 그룹핑을 하는게 좋아보입니다.

- 왼쪽 오른쪽 그룹핑을 하면 2개의 태그만 추가해서 사용할 수 있을 것 같지만, 저는 각 단어들을 span 태그로 감싼후 왼쪽 단어들의 class 를 .moto-left-text / 오른쪽 단어들의 class를 .moto-right-text로 지정해 주어 div #moto안에 태그들을 추가한 후 텍스트를 입력하겠습니다.

 

<div id="moto">
    <span class="moto-left-text">
        Ingenious
    </span>
    <span class="moto-right-text">
        Creativity
    </span>
    <span class="moto-left-text">
        Fast
    </span>
    <span class="moto-right-text">
        Adaptability
    </span>
    <span class="moto-left-text">
        Future
    </span>
    <span class="moto-right-text">
        Possibilities
    </span>
</div>

-이제 각 텍스트들의 css를 적용시켜 주겠습니다.

- 먼저 div #moto에 폰트 사이즈 값을 주어서 모든 span 텍스트들에게 적용시킵니다.

- 폰트 사이즈는 50px입니다.

#moto {
    position: absolute;
    top: 150px;
    left: 730px;
    width: 600px;
    height: 205px;
    font-size: 50px;
    border: 2px solid red;
}

- 이제 스타일을 지정해 줍니다.

- 왼쪽 텍스트 그룹은 Regular입니다. 따로 수정할 필요가 없습니다.

- 오른쪽 텍스트 그룹은 Bold 입니다. Bold의 font-weight 값은 700입니다.

- 자식 선택자로 .moto-right-text 를 선택해 값을 적용합니다.

#moto > .moto-right-text {
    font-weight: 700
}

- 잘 적용 되었네요. 

- 이제 span에 width 값들을 주어 각 텍스트들을 위치 시킵니다.

- 우선 span에 border값을 줘서 확인해 보겠습니다.

- 각 span의 크기를 얼마를 지정해야 할지 확인해 봅니다.

- 왼쪽 텍스트 그룹의 크기가 280px입니다. 

- div #moto 의 가로의 크기가 600px이므로 오른쪽 텍스트 그룹의 크기는 600px -280px = 320px입니다.

- div #moto 안에 위의 이미지 처럼 정렬하기 위해 각 그룹의 크기를 10px만큼 감소시킨 270px / 310px 로 지정합니다.

- span 에 가로와 높이 값을 주기위해 display 값을 inline-block로 지정합니다.

 

#moto > .moto-left-text {
    display: inline-block;
    width: 270px;
    border: 2px solid blue;    
}
#moto > .moto-right-text {
    display: inline-block;
    font-weight: 700;
    width: 310px;
    border: 2px solid blue; 
}

 

- 각 텍스트들의 상하 간격을 주어야 합니다.

- 가운데 Fast 와 Adaptability에만 상하 margin 값을 top과 bottom 에 주면 됩니다.

- Fast 와 Adaptability span 태그에 margin class를 추가 합니다.

	<span class="moto-left-text margin">
        Fast
    </span>
    <span class="moto-right-text margin">
        Adaptability
    </span>

- css에서 자식 선택자로 margin 클래스를 선택해 margin 값을 top 과 bottom 에 각각 25px을 지정합니다.

#moto > .margin{
    margin-top:25px;
    margin-bottom:25px;
}

- 간격이 알맞게 들어 갔네요.

 

  4. introduce 텍스트 추가  

- introduce는 저에 대한 간단한 소개가 들어 갑니다.

 

- 소개 제목 부분과 소개 내용이 들어 갑니다.

- div #introduce 안에 소개 제목 텍스트가 들어갈 span 태그와 소개내용이 들어갈 p태그를 추가하고, 텍스트를 입력해 주겠습니다.

<div id="introduce">
    <span>Still Growing</span>
    <p>-My name is Hun Chang Cho, who dreams of becoming a full-stack developer and is growing.
        I am working on projects related to Python and ML / DL, and I am also working on projects and learning related to Web.</p>
</div>

- 소개 제목 부분의 폰트 사이즈와 스타일을 확인해 css에 적용합니다.

- 폰트 사이즈는 30px / 스타일은 Bold , font-weight 700 입니다.

#introduce > span{
    font-size: 30px;
    font-weight: 700;    
}

- 소개 내용 부분의 폰트 사이즈와 스타일을 확인해 css에 적용합니다.

- 폰트 사이즈는 20px / 스타일은 Regular 입니다.

#introduce > p{
    font-size: 20px;
}

- 소개 내용 부분의 글자들의 간격이 너무 좁아 보입니다. 

- letter-spacing 값으로 1px을 지정합니다.

- line-height 값으로 35px을 지정합니다.

#introduce > p {
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 35px;
}

- 다음으로는 소개 제목과 소개내용에 간격을 줍니다.

#introduce > p {
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 35px;
    margin-top: 50px;
}

  5. myskills 텍스트 추가  

- 마지막으로 myskills 부분에 텍스트를 추가해 보겠습니다.

- My Skills 라는 제목과 각 skill에 해당하는 텍스트들 그리고 숙련정도를 나타내는 텍스트가 있습니다.

- 그리고 프로그레그바는 div태그를 이용해서 만들어 보겠습니다.

- 추가해야할 태그는 제목이 들어가는 span .title 태그 / skill 이름이 들어가는 span .skillname 태그 / 숙련정도가 들어가는 span .skillper 태그 / 프로그레스바를 만들 span.progressbar 태그 입니다. 

- span.skillname / span.skillper / span.progressbar 태그들을 div .skill 태그로 감싸주겠습니다.

- 위 태그들을 div #myskills 태그 안에 추가 하고 텍스트들을 입력합니다.

- 스킬종류가 6개이므로 div .skill이 6개 필요합니다.

- 우선은 , 1개추가해 스타일까지 지정하고 나머지를 추가하겠습니다.

 

<div id="myskills">
    <span class="title">My Skills</span>
    <div class="skill">
        <span class="skillname">Python</span>
        <span class="progressbar">progressbar</span>
        <span class="skillper">skillper</span>
    </div>
</div>

- 제목 부분부터 css를 적용 스켜 줍니다.

- 폰트 사이즈는 30px / 스타일은 Medium font-weight 값은 500 입니다.

- span display값을 inline-block으로 바꿔 줍니다.

- span.title이 span.title 하단에 40px만큼 간격을 가지고 떨어져 있습니다.

- span.title에 margin-bottom 값을 지정해 줍니다.

#myskills > .title{
    display: inline-block;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 40px;
    border:3px solid blue;
}

 

 

- 간격을 span.title margin 을 통해서 지정한 이유는 div.skill은 여러개를 추가해 반복적으로 사용됩니다. 이 태그에 margin값을 주게되면 모두 적용 되므로 편리함을 위해 span.title에 지정해 주었습니다.

- 다음으로는 div .skill 태그의 크기와 위치를 지정해 줍니다.

- 가로 크기는 div. myskills 크기와 동일한 600px입니다.

 

#myskills > .skill{
    width: 600px;
    border:3px solid blue;
}

- span.skillname의 폰트크기를 지정해주고 display 를 inline-block으로 만들어 줍니다.

- 폰트 사이즈는 20px / 스타일은 Medium 입니다.

- span.skillname 하단으로 span.progressbar 와 span.skillper가 10px 간격으로 위치합니다.

- margin-bottom 10px값을 적용합니다.

- 가로 크기를 300px 만큼 지정해 줍니다.

 

#myskills > .skill > .skillname{
    display: inline-block;
    width: 300px;
    font-size: 20px;
    font-weight: 500;
    margin-bottom:10px;
    border:3px solid blue;
}

- span.progressbar의 크기와 위치를 지정해 주겠습니다.

- 크기는 가로 520px , 높이 21px 로 지정해 줍니다.

 

#myskills > .skill > .progressbar {
    display: inline-block;
    width: 520px;
    height: 21px;
    border: 3px solid blue;
}

- span.skillper 의 폰트 사이즈와 크기를 지정해 주겠습니다.

- 우선 display inline block으로 지정하고, font-size 15px / 스타일은 Thin font-weight 100 입니다.

- 크기는 가로 60px 높이 21px 로 지정해 주겠습니다.

- text-align 으로 텍스트를 center로 정렬합니다.

#myskills > .skill > .skillper {
    display: inline-block;
    width: 60px;
    height: 21px;
    text-align: center;
    font-size: 15px;
    font-weight: 100;
    border: 3px solid blue;
}

 

 

- 어느정도 위치가 잡힌것 같습니다.

- 이제 div.skill을 5개 추가해 줍니다.

- 그리고 span.skillname 과 span.skillper 텍스트를 수정해 주겠습니다.

<div id="myskills">
    <span class="title">My Skills</span>
    <div class="skill">
        <span class="skillname">Python</span>
        <span class="progressbar">progressbar</span>
        <span class="skillper">95%</span>
    </div>
    
    <div class="skill">
        <span class="skillname">ML</span>
        <span class="progressbar">progressbar</span>
        <span class="skillper">80%</span>
    </div>
    
    <div class="skill">
        <span class="skillname">DL</span>
        <span class="progressbar">progressbar</span>
        <span class="skillper">70%</span>
    </div>
    
    <div class="skill">
        <span class="skillname">HTML</span>
        <span class="progressbar">progressbar</span>
        <span class="skillper">90%</span>
    </div>
    
    <div class="skill">
        <span class="skillname">CSS</span>
        <span class="progressbar">progressbar</span>
        <span class="skillper">80%</span>
    </div>
    
    <div class="skill">
        <span class="skillname">JavaScript</span>
        <span class="progressbar">progressbar</span>
        <span class="skillper">55%</span>
    </div>
</div>

- div.skill 들 마다 간격을 줍니다.

- margin-bottom을 추가해 값으로 10px을 지정합니다.

- 마지막 div.skill은 margin-bottom 값이 필요하지 않으므로 :nth-last-child()로 margin-bottom 값을 없애 줍니다.

#myskills > .skill {
    float: left;
    width: 600px;
    margin-bottom: 10px;
    border: 3px solid blue;
}
#myskills > .skill:nth-last-child(1){
    margin-bottom: 0;
}

- 마지막으로 span.progressbar를 제외하고 border를 삭제 후 확인해 보겠습니다.

- 잘 되었네요!!!

 

- 다음에는 progress bar를 만들고 animation을 적용 시켜 보겠습니다.

  웹 페이지   

- 웹사이트에서 초기 Home 화면과 메뉴에 있는 버튼이나 텍스트를 클릭하면 이동하여 나타나는 웹페이지들등 다양한 컨텐츠 들이 있습니다.

- 현재 제작하고 있는 포트폴리오 웹사이트의 경우 Home / About / Portfolio / Blog / Contact 카테고리가 있습니다.

- Blog는 hiio.tistory.com 블로그로 링크가 걸려 있습니다.

- 나머지 카테고리에 해당하는 웹페이지를 제작해 줘야합니다.

- 이번 포스팅에서는 About 페이지 제작을 시작해 보겠습니다.

 

  About 페이지 레이아웃 구성  

- About 페이지는 layout.html 을 상속받아 제작됩니다.

- main 태그 안에 about 페이지의 구성 내용들이 들어가게 됩니다.

- 먼저, About 페이지를 어떻게 구성할지 생각 해 보고 , 레이아웃을 구성해봅니다.

- 저는 아래의 이미지 처럼 구성할 계획입니다.

 

 

 

- 제 사진과 함께 좌우명 / 간단한 소개글 / 제 스킬에 대한 프로그레스 바가 들어 갑니다. 

- 각 컨텐츠들이 들어갈 태그들을 추가 하고 크기와 위치를 먼저 지정해 보겠습니다.

- 아래의 단계에 따라 진행해 보겠습니다.

 

  단계  

1. 태그 추가

2. 컨텐츠 크기와 위치 지정

3. aboutimg 크기와 위치

4. myname크기와 위치

5. moto크기와 위치

6. introduce크기와 위치

7. myskills크기와 위치

8. 문제 해결 - css값 수정

 

1. 태그 추가

- 어떤 태그와 선택자를 사용 해야할지 레이아웃 구성을 통해 확인해 보겠습니다.

1. 사진 이미지가 들어가는 img 태그 => div #aboutimg

2. 이름이 들어가는 div 태그 => div #myname

3. 좌우명이 들어가는 div 태그 => div #moto

4. 간단한 소개들이 들어가는 div 태그 => div #introduce

5. 내가 사용가능한 스킬 프로그레스 바 div 태그 => dic #myskill

 

- 이제 about.html 에 각 태그들을 추가해 줍니다.

{% extends 'layout.html' %}
{% block content %}
<div id="aboutimg">aboutimg</div>
<div id="myname">myname</div>
<div id="moto">moto</div>
<div id="introduce">introduce</div>
<div id="myskills">myskills</div>
{% endblock %}

  2. 컨텐츠 크기와 위치 지정  

- 앞선 포스팅에서 했던 방법과 같이 먼저 각 태그들의 css에 border 값을 주겠습니다.

/* about page*/

#aboutimg{
    border:2px solid red;
}
#myname{
    border:2px solid red;
}
#moto{
    border:2px solid red;
}
#introduce{
    border:2px solid red;
}
#myskills{
    border:2px solid red;
}

- 이제 aboutimg 부터 myskill 까지 크기와 위치를 지정해 주겠습니다.

- 그전에 각 태그들의 css position 속성값을 absolute로 지정해 주겠습니다.

#aboutimg{
    position : absolute;
    border:2px solid red;
}
#myname{
    position : absolute;
    border:2px solid red;
}
#moto{
    position : absolute;
    border:2px solid red;
}
#introduce{
    position : absolute;
    border:2px solid red;
}
#myskills{
    position : absolute;
    border:2px solid red;
}

  3. aboutimg 크기와 위치  

- aboutimg 크기와 위치를 먼저 지정해 주겠습니다.

- 레이아웃 구성 계획에서 어디에 위치하고 어느정도 크기를 가지고 있는지 확인해 보겠습니다.

 

- 위치는 top 150px / left 260px 에 위치해 있습니다.

- 위 값을 적용합니다.

 

#aboutimg {
    position: absolute;
    top: 150px;
    left: 260px;
    border: 2px solid red;
}

- 크기를 확인해 보겠습니다.

- 크기는 width 375px / height 500px 입니다.

- 위 값을 적용 시킵니다.

 

#aboutimg {
    position: absolute;
    top: 150px;
    left: 260px;
    width: 375px;
    height: 500px;
    border: 2px solid red;
}

  4. myname 크기와 위치  

- 위 방법과 마찬가지로 크기와 위치를 확인 후 css 값을 적용 시켜 보겠습니다.

- 위치는 top 680px / left 260px 입니다.

- 크기는 width 380px / height 60px 입니다.

 

#myname {
    position: absolute;
    top:680px;
    left: 260px;
    width: 380px;
    height: 60px;
    border: 2px solid red;
}

  5. moto 크기와 위치  

- moto 크기와 위치를 확인합니다.

 

- 위치는 top 150px / left 730px 입니다.

- 크기는 width 600px / height 205px 입니다.

 

#moto {
    position: absolute;
    top: 150px;
    left: 730px;
    width: 600px;
    height: 205px;
    border: 2px solid red;
}

  6. introduce 크기와 위치  

- introduce 크기와 위치를 확인합니다.

- 위치는 top 440px / left 730px 입니다.

- 크기는 width 600px / height 210px 입니다.

#introduce {
    position: absolute;
    top: 440px;
    left:730px;
    width: 600px;
    height: 210px;
    border: 2px solid red;
}

 

  7. myskills 크기와 위치  

- myskills 크기와 위치를 확인합니다.

 

- 위치는 top 740px / left 730px 입니다.

- 크기는 width 600px / height 540px 입니다.

 

#myskills {
    position: absolute;
    top:740px;
    left:730px;
    width: 600px;
    height: 540px;
    border: 2px solid red;
}

 

- 각 컨테츠들을 모두 크기를 지정해 주고 위치 시켰습니다.

- 하지만 문제가 하나 생겼습니다.

- 무슨 문제 일까요?

- footer에 boreder 값을 주고 about 페이지를 다시 살펴보겠습니다.

- myskills 하단으로 footer가 오지 않고, myskills가 footer를 벗어나 버렸습니다.

- 왜 그럴까요?

- footer 는 main 하단으로 오게끔 지정되어 있습니다.

- main 의 높이는 850px로 고정해놨습니다.

- about 페이지에 필요한 높이가 850px을 넘어서 버려서 문제가 발생했습니다.

- 그럼 이 문제를 해결해야 겠습니다.

 

  8. 문제 해결 - css값 수정  

- 위 문제를 해결하기위해 main 의 높이 값을 900px로 고정 시키지 않고, 컨텐츠들의 값들에 따라 동적으로 높이가 지정되게 하면 좋을거 같습니다.

- height 값으로 아무런 값을 주지 않아 보겠습니다.

#main {
    margin: 0 auto;
    position: relative;
    width: 1440px;
}

- main에 높이 값이 없어 그 하단에 붙어 있는 footer가 header밑으로 와버렸습니다.

- 이 방법은 아닌것 같습니다.

- 이번에는 height 값으로 100%를 줘보겠습니다.

- height 값 100% 로 지정하기 위해서는 html 과 body height 값에 100% 지정되있어야 합니다.

html,body{
	height: 100%;
}


#main {
    margin : 0 auto;
    position: relative;
    width: 1440px;
    height: 100%;
}

-footer 부분이 밑으로 내려갔습니다.

- 다른 방법으로는 main안에 컨텐츠들을 감싸는 div 를 추가 하고 px로 높이를 고정시킨후 main의 높이 값으로 auto를 지정하는 방법이 있습니다.

- 다양한 방법들이 있지만, 제가 계획한 레이아웃에서는 footer부분이 크게 중요하지 않으므로 100%를 지정하는 방법을 사용하겠습니다.

- 추후 문제 발생시 수정 해 보겠습니다.

- 다음 포스팅에서는 각 태그들 안에 이미지와 텍스트들을 추가 해 보겠습니다.