Contact 페이지
- Contact 페이지는 웹사이트 방문자가 저에게 메세지를 보내는 기능을 하는 곳입니다.
- 직접적으로 E-mail을 보낼수 있지만, Contact 페이지를 통해서도 보낼 수 있습니다.
- 먼저 Contact 페이지의 구성을 살펴보겠습니다.
- Contact 페이지는 크게 제목 / 필요 정보 / 그리고 메세지를 보낼 수 있는 form 부분으로 나누어져 있습니ㅏㄷ.
- form 은 Name / E-mail / subject / Message로 나뉘어져 있습니다.
- 아래의 단계에 따라 먼저 Contact 페이지의 레이아웃을 구현해 보겠습니다.
단계
1. contact.html 태그 추가
2. div#contact 크기 및 위치 지정
3. div.contactinfo 크기및 위치 지정
4. div.contactform 크기및 위치지정
5. form 태그 크기및 위치지정
6. label / input 태그 크기와 위치 지정
1. contact.html 태그 추가
- contact.html 에 필요한 태그를 추가 해 주겠습니다.
- contact 페이지는 아래의 그림과 같이 크게 2부분으로 나뉩니다.
- div#contact 태그를 추가해 주고 각 부분에 해당하는 태그를 하위태그로 추가합니다.
- 좌측 부분은 div.contactinfo 로 우측부분을 div.contactform 으로 추가 해 줍니다.
- 좌측에 해당하는 div.contactinfo 에 들어가는 컨텐츠들을 살펴보겠습니다.
- div.contactinfo 에는 div.title 과 div.inquiries 2가지 태그가 필요합니다.
- 우측 부분인 div.contactform 부분은 메세지를 보내기위한 양식을 작성하는 부분입니다.
- form 태그와 label / input태그가 필요함으로 추가해줍니다.
{% extends 'layout.html' %}
{% block content %}
<div id="contact">
<div class="contactinfo">
<div class="title">
Title
</div>
<div class="inquiries">
Inquiries
</div>
</div>
<div class="contactform">
<form action="">
<label for="">Name</label>
<input type="text">
<label for="">E-mail</label>
<input type="text">
<label for="">Subject</label>
<input type="text">
<label for="">Message</label>
<input type="text">
</form>
</div>
</div>
{% endblock %}
2. div#contact 크기 및 위치 지정
- contact 페이지에 들어가는 컨텐츠들을 감싸고 있는 div#contact 페이지의 크기와 위치를 먼저 지정해 주겠습니다.
- 먼저 현재 div#contact의 크기와 위치를 살펴 보겠습니다.
- portfolio 를 만들때와 같이 div#contact 의 가로 크기가 1440px로 되어 있습니다.
- position 값으로 absolute / left 값으로 200px을 지정합니다.
- div#contact의 가로 크기를 1240px로 지정해 줍니다.
- height 값으로는 850px을 지정하겠습니다.
/* contact */
#contact{
position: absolute;
left: 200px;
width:1240px;
height: 900px;
border:1px solid red;
}
3. div.contactinfo 크기및 위치 지정
- 좌측에 위차한 div.contactinfo의 크기와 위치 스타일을 지정해주겠습니다.
- div.contactinfo의 계획을 한 이미지를 보면 사이드바와 간격이 50px만큼 있습니다.
- margin- left값으로 50px 만큼 지정합니다.
- 그리고 가로크기는 350px입니다.
- 높이를 보면 header 부분과 까지 침범해 900px 만큼 지정되어있습니다.
- 높이를 900px만큼 높이를 지정해주고, margin-top 값으로 -50px만큼 지정해 주겠습니다.
- background-color 값으로 색상코드 #eeeeee을 지정합니다.
#contact > .contactinfo{
margin-left:50px;
margin-top:-50px;
width: 350px;
height: 900px;
background-color: #eeeeee;
}
- div.contactform 부분이 div.contactinfo 부분 밑으로 정렬 되어있습니다.
- float 값으로 left를 지정해서 정렬 시켜 줍니다.
- 잘 적용된 모습입니다.
4. div.contactform 크기및 위치지정
- div.contactform의 위치와 크기를 지정해 주겠습니다.
- float 값으로 left를 지정해 주어서 정렬시켜 위치를 정해 줍니다.
- 가로 크기는 1240px에서 div.contactinfo의 크기 400px을 제외한 840px입니다.
- 높이는 850px을 지정해주고, 확인을 위해 background-color로 skyblue를 지정해 주겠습니다.
#contact > .contactform{
float: left;
width: 840px;
height: 850px;
background-color: skyblue;
}
5. form 태그 크기및 위치지정
- 이제 form 태그의 위치와 크기를 지정해 보겠습니다.
- form 태그는 좌측에 150px만큼 간격이 존재합니다. margin-left 값으로 150px; 만큼 지정합니다.
- 가로의 크기는 540px 입니다.
- 위치는 상단에서 100px만큼 떨어져 있습니다. margin-top값으로 100px; 만큼 지정해 줍니다.
- div.contactform 의 바탕색을 삭제하고 form 태그에 적용 시켜 확인해 보겠습니다.
- 위치를 Name 텍스트에 맞춰서 하지 않는 이유는 form 태그안에 위치한 label과 input 태그들이 각각 간격이 존재 하기 때문에 그 크기만큼을 생각해서 위치를 잡아 줬습니다.
- 높이는 따로 지정하지 않고 자식 태그들에 해당하는 컨텐츠들의 높이만큼 자동으로 조절 되도록 합니다.
6. label / input 태그 크기와 위치 지정
- form 태그 안에 있는 label / input 태그의 위치와 크기 스타일을 지정해 주겠습니다.
- label 의 display 값을 inline-block으로 지정합니다.
- label 의 가로 크기는 150px입니다. input 의 가로크기는 form 가로크기 540px 에서 label가로크기를 제외한 390px입니다. 하지만 input 태그는 border 값을 가지고 있으므로 390px보다 작게 설정하여 370px만큼 지정합니다.
- label 과 input 의 높이를 30px 만큼 지정합니다.
- input 태그의 border 값을 3px solid black으로 지정합니다.
- label 의 폰트 사이즈를 30px 로 지정하고 font-weight 를 300으로 지정합니다.
- label 의 vertical-align 값으로 top / margin-top 값으로 54 px을 지정해 lebel / input 태그사이에 간격을 맞추고 텍스트들을 input태그에 맞춰 정렬 시켜 줍니다.
- Message 부분의 input 태그의 높이를 지정하기위해 id를 msg로 지정해 주고 높이값으로 90px을 지정해 주겠습니다.
#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;
}
- 잘 적용 된 모습입니다.
- 진행해보면서 느끼는 거지만 디자인은 참 어려운것 같습니다.
- 다음 포스팅에서는 나머지 컨텐츠들을 완성시켜 contact페이지도 완료하겠습니다.
