이미지 / 텍스트 추가 - 이번 포스팅에서는 저번 포스팅에서 추가 한 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을 적용 시켜 보겠습니다.
