Hiio.com

  Contact 페이지 컨텐츠 추가   

- 이전 포스팅에서 contact 페이지의 레이아웃을 구성하고 form 태그 안의 label 태그와 input 태그의 스타일과 크기,위치를 지정해줬습니다.

- 이번 포스팅에서는 div.contactinfo의 title과 iquirise 부분을 추가 하여 contact 페이지를 완성 시켜 보겠습니다.

  단계  

1. div.title 크기 위치 지정

2. span 추가 및 구분선 만들기

3. div.inquiries 크기 위치 지정

1. div.title 크기 위치 지정  

- div.title의 크기와 위치 / 폰트 크기와 스타일을 지정해 주겠습니다.

- div. title의 폰트 크기와 스타일은 font-size : 60px , font-weight : 900 입니다.

- div.contactinfo가 상단으로 50px 만큼 올라가 있기 때문에 div.title을 50px만큼 내려줘야합니다.

- margin-top 값으로 50px만큼 지정합니다.

- 가운데 정렬 시키기 위해 text-align 값으로 center를 지정하고 , 아래쪽에 간격을 주기위해 margin-bottom 값으로 50px 만큼 지정합니다.

#contact > .contactinfo > .title {
    font-size: 60px;
    font-weight: 900;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
    background-color: skyblue;
}

- 타이틀 완성 !!

  2 span 추가 및 구분선 만들기

- div.title밑으로 흰색 구분선이 있습니다.

- div.title의 border-bottom 값을 주어서 만들수도 있지만, span태그를 추가 해서 만들어 보겠습니다.

- div.title 과 div.inquiries 사이에 span태그를 추가해 줍니다.

	<div class="title">
            Contact
        </div>
        <span></span>
        <div class="inquiries">
            Inquiries
        </div>

- span을 display: inline-block으로 만들고 width 값으로 100% , height 값으로 10px , background-color값을 white로 지정합니다.

#contact > .contactinfo > span{
    display: inline-block;
    width: 100%;
    height: 10px;
    background-color: white;
}

- 구분선이 생겼습니다.!!

  3. div.inquiries 크기 위치 지정  

- 이제 마지막으로 div.inquiries의 크기와 위치를 지정해주고 텍스트를 추가해 준 뒤 스타일을 지정해 보겠습니다.

- div.inquiries의 크기를 우선 지정해 주겠습니다.

- 가로 크기값으로 100%를 지정하고 background-color값으로 skyblue를 줘서 확인해 보겠습니다.

- Inquiries에 들어갈 컨텐츠들을 확인해 보고 div.inquiries 안에 태그들과 텍스트들을 추가해 주겠습니다.

- 들어가는 컨텐츠들은 3부분으로 나뉩니다. 

- 각각 텍스트가 들어갈 span태그를 3개 추가해주고 텍스트들을 넣어 주겠습니다.

- 첫번째에 들어가는 텍스트인 Inquiries의 스타일만 다르고 나머지는 똑같습니다.

- span들 사이에 간격을 주기 위해 margin-top 값으로 50px을 margin-left 값으로 30px만큼줍니다.

- span을 display : inline-block으로 만들고 가로크기 값으로 320px을 지정한뒤 font-size : 20px / font-weight : 100을 지정해 줍니다.

#contact > .contactinfo > .inquiries> span{
    display: inline-block;
    width: 320px;
    font-size: 20px;
    font-weight: 100;
    margin-top:50px;
    margin-left: 30px;
}

- css에서 첫번째 span만 nth-child를 이용해 스타일을 변경할 수 있지만, 항상 텍스트들을 추가할때마나 span값을 지정하는 방법은 너무 귀찮아 질 수도 있습니다. font스타일에 해당하는 값들을 지정해놓은 css스타일을 미리 만들어두고 , class를 지정하여 사용하면 편리할 것 같습니다.

- div.contactinfo > span의 css값들중 font에 해당하는 부분들을 우선 삭제 처리합니다.

- css에 .subtitle이라는 선택자를 만들어 font-size : 30px, font-weight: 400을 지정하고 첫번째 span에 class값으로 subtitle을 지정합니다

- 다음으로 .thin20이라는 선택자를 만들고 font-size:20px;, font-weight:100을 지정하여 2번째 , 3번째 span에 class 값으로 thin20을 지정합니다.

#contact > .contactinfo > .inquiries>span{
    display: inline-block;
    width: 320px;
    margin-top:50px;
    margin-left: 30px;
}


/*font-style*/

.subtitle{
    font-size: 30px;
    font-weight: 400;
}

.thin20{
    font-size: 20px;
    font-weight: 100;
}

- 잘 적용 된 모습입니다.

- 전체적인 페이지의 모습을 확인해 보겠습니다.

- 완성!!

- 이로서 contact 페이지도 완성 되었습니다.

- 다음 포스팅에서는 footer부분을 진행해 보겠습니다.

  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페이지도 완료하겠습니다.