[Web]포트폴리오 웹사이트 제작 - 15. 웹 페이지 디자인 - Portfolio 페이지 / 레이아웃(layout)(1)
Portfolio 페이지
- 이제 Portfolio 페이지를 완성할 차례입니다.
- Portfolio 페이지는 그동안 제가 해온 작업물들에 대한 소개와 이미지 그리고 링크 등이 들어 갑니다.
- 기본적인 레이아웃 작업을 우선적으로 진행하고, 이후에 JavaScript를 통해 기능을 추가해 보겠습니다.
- Portfolio 레이아웃 구성을 위한 작업물등중 3가지를 선택했습니다.
- 이 작업물들을 통해서 레이아웃을 구성했습니다.
- Portfolio 페이지의 타이틀이 가장 상단에 들어갑니다.
- 그 밑으로 이미지가 좌측에 텍스트들이 우측에 배치 됩니다.
- 텍스트는 작업물 제목 / 소개 / 링크로 구성되어있습니다.
- 이제 아래의 단계에 따라 기본적인 레이아웃을 구성해 보겠습니다.
단계
1. portfolio.html 태그 추가
2. portfolio 크기 및 위치 지정
3.portfolio title 위치와 크기 지정
4. content 크기와 위치 지정
5. image와 textcontent 크기와 위치 지정
6. textcontent 태그 추가 및 위치 크기 지정
1. portfolio.html 태그 추가
- portfolio.html에 필요한 태그들을 추가 해주겠습니다.
- 먼저 id 가 portfolio 인 div태그를 추가해 줍니다.
{% extends 'layout.html' %}
{% block content %}
<div id="portfolio">
</div>
{% endblock %}- 이 태그안에 컨텐츠들을 추가 해 주겠습니다.
- 먼저 #portfolio > .title을 추가 해 주겠습니다.
{% extends 'layout.html' %}
{% block content %}
<div id="portfolio">
<div class="title">
portfolio
</div>
</div>
{% endblock %}- div.title 하단에 이미지와 텍스트들이 들어갈 클래스가 content인 div 태그를 우선 1개 추가 해 줍니다.
{% extends 'layout.html' %}
{% block content %}
<div id="portfolio">
<div class="title">
portfolio
</div>
<div class="content">
content
</div>
</div>
{% endblock %}- div.content안에 이미지가 들어갈 div.image와 div.textcontent 태그를 추가해 주겠습니다.
{% extends 'layout.html' %}
{% block content %}
<div id="portfolio">
<div class="title">
portfolio
</div>
<div class="content">
content
<div class="image">
img
</div>
<div class="textcontent">
text
</div>
</div>
</div>
{% endblock %}- 기본적인 태그들을 추가해 주었습니다.
- 다음 단계를 진행하면서 필요한 태그들을 추가해 주겠습니다.
2. portfolio크기 및 위치 지정
- 먼저 div#portfolio 의 크기와 위치를 지정해 주겠습니다.
- div#portfolio에 border 값을 주어서 지금 지정된 위치와 크기를 확인합니다.
#portfolio{
border:1px solid red;
}
- 현재 main의 가로 크기 만큼 div#portfolio 가로크기가 지정되어있고, 높이는 폰트 사이즈의 높이 합 만큼 지정되어있습니다.
- 가로 크기를 main가로크기 - 사이드바 가로크기 / 1440px - 200px = 1240px
- 이제 position 값으로 absolute를 지정해 주고 left값으로 200px을 지정해 줍니다.
#portfolio{
position: absolute;
left: 200px;
width: 1240px;
height: auto;
border:1px solid red;
}
3.portfolio title 위치와 크기 지정
- Portfolio페이지의 제목에 해당하는 div.title의 위치와 크기를 지정해 주겠습니다.
- div.titile에 border 값을 지정해 주어서 정확한 위치와 크기를 확인해 보겠습니다.
- width 값으로 100%를 지정합니다.
- div.title안에는 Portfolio 라는 폰트가 지정되어 들어 갑니다.
- 폰트 사이즈와 폰트 스타일을 적용 시켜 주겠습니다.
- 폰트 사이즈는 60px / 스타일은 black font-weight은 900을 지정해 줍니다.
- Text-align 값으로 center를 지정해 줘서 가운데 정렬 시켜 줍니다.
#portfolio > .title{
font-size: 60px;
font-weight: 900;
text-align: center;
border: 1px solid red;
}
4. content 크기와 위치 지정
- div.content의 지금 크기와 위치를 확인합니다.
-
- 계획 레이아웃을 보면 title과 content , content들 사이에 간격이 50px만큼 존재랍니다.
- div.content에 margin-top 값으로 50px만큼 지정해 줍니다.
- width 값으로는 div.portfolio와 같은 값이 1240px을 지정해 줍니다.
#portfolio > .content{
margin-top: 50px;
width: 1240px;
border: 1px solid red;
}
- 간격이 생겼습니다.
5. image와 textcontent 크기와 위치 지정
- 이제 content 안에 들어가있는 div.image 와 div.textcontent를 진행해 보겠습니다.
- content에 들어가는 이미지와 텍스트의 크기는 각 포트폴리오 작업물마다 상이합니다.
- 그래서 이미지의 가로의 크기를 고정 시켜주고 text가 들어갈 곳의 가로크기를 고정시켜 줍니다.
- float값을 left로 지정합니다.
#portfolio > .content > .image {
float: left;
width: 500px;
border: 1px solid red;
}
#portfolio > .content > .textcontent {
float: left;
width: 730px;
border: 1px solid red;
}
- 우선은 border 크기가 있어 textcontent 의 가로 크기를 730px 로 지정해 주었습니다. 후에 740px로 변경합니다.
6. textcontent 태그 추가 및 위치 크기 지정
- 이제 textcontent 안에 들어갈 subcontents 들의 태그들을 추가 해 주겠습니다.
- 안에 들어갈 subcontents들은 작업물의 제목 - subtitle / 소개내용 -subdescription / 링크 주소 - sublink 입니다.
- div.textcontent 안에 추가 해 주겠습니다.
<div class="textcontent">
<div class="subtitle">
subtitle
</div>
<div class="subdesciption">
subdescription
</div>
<div class="sublink">
sublink
</div>
</div>- 먼저 div.subtitle의 크기와 위치를 지정해 주겠습니다.
- 폰트 사이즈는 35px / 폰트 스타일은 regular 400 입니다.
- 그리고 가운데 정렬 시켜 줍니다.
#portfolio > .content > .textcontent > .subtitle {
font-size: 35px;
font-weight: 400;
text-align: center;
border: 1px solid red;
}
- subtitle들을 보면 모두 검은색 바탕에 흰색 글자색을 가지고 있고 상하좌우 여백을 가지고 있습니다.
- subtile문구를 span으로 감싸주고 display값으로 inline-block으로 지정합니다.
-padding 값으로 10px을 지정하고 color 값을 white / background-color 값을 black으로 지정합니다.
<div class="subtitle">
<span>
subtitle
</span>
</div>#portfolio > .content > .textcontent > .subtitle>span{
padding: 10px;
color: white;
background-color: black;
display: inline-block;
border: 1px solid blue;
}
- 다음으로 subdescription 부분을 진행해 보겠습니다.
- 먼저 폰트에대한 정보를 확인합니다.
- 폰트 사이즈는 20px / 폰트 스타일은 thin 100 입니다.
#portfolio > .content > .textcontent > .subdescription {
font-size: 20px;
font-weight: 100;
border: 1px solid red;
}
- subtitle 과 subdescription 사이에 간견이 40px만큼 존재합니다. margin-top 값으로 40px를 지정해 주겠습니다.
#portfolio > .content > .textcontent > .subdescription {
font-size: 20px;
font-weight: 100;
margin-top: 40px;
border: 1px solid red;
}
- 다시 subdecription을 가운데 정렬 시키고, span으로 감싸줍니다.
#portfolio > .content > .textcontent > .subdescription {
font-size: 20px;
font-weight: 100;
margin-top: 40px;
text-align: center;
border: 1px solid red;
}
- 마지막으로 sublink를 진행해 주겠습니다.
- 폰트 사이즈는 25px 스타일은 Light 300 입니다.
- 폰트에 대한 값들을 지정해 주고 가운데 정렬 시킨후 span값으로 감싸줍니다.
#portfolio > .content > .textcontent > .sublink {
font-size: 25px;
font-weight: 300;
margin-top: 30px;
text-align: center;
border: 1px solid red;
}
- subdescription 과 sublink의 span을 display : inline-block으로 지정한후 width 값으로 500px을 지정합니다.
- text-aligh을 left 시켜서 두곳을 정렬 시켜 줍니다.
#portfolio > .content > .textcontent > .subdescription > span {
display: inline-block;
width: 500px;
text-align: left;
border: 1px solid blue;
}
#portfolio > .content > .textcontent > .sublink > span {
display: inline-block;
width: 500px;
text-align: left;
border: 1px solid blue;
}
- 다음에는 contents들에 해당하는 이미지와 텍스트들을 삽입해 보겠습니다.