Hiio.com

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

안녕하세요. 

이번 포스팅에서는 저번에 만들었던 사이드바 메뉴를 css와 checkbox를 이용해서 slide시켜 나타났다 사라지게 하는 것을 만들어 보겠습니다.

1. input & label

먼저 html에 input과 label 태그를 작성해 줍니다.

<input type="checkbox" id="sidebtn">

        <label for="sidebtn" class="sidebtn"> button

        </label>

input에서 type은 checkbox로 설정해 주시고, label 태그 안에 for에는 input의 id속성값을 넣어서 연결 시켜 줍니다.

그러면 아래와 같이 만들어 집니다.

여기서 input과 label을 연결시켜주면 checkbox를 클릭하지 않아도, label을 클릭하면 똑같은 효과가 나타납니다.

그래서 저에게 필요한 것은 label 만 있으면 되므로 input태그는 css에서 display:none;으로 없애줍니다.

#sidebtn{
	display:none;
}

이제 label에 width값과 height값을 주고 그안에 span을 넣어서 Burger button을 만들어 줍니다.

-HTML

<label for="sidebtn" class="sidebtn"> button
            <span></span>
            <span></span>
            <span></span>
        </label>

-CSS

.sidebtn {
    width: 50px;
    height: 50px;
}



.sidebtn span {
    display: block;
    width: 100%;
    height: 5px;
    background-color: black;
    border-radius: 10px;
    position: absolute;
    transition: all 0.25s;
}

.sidebtn span:nth-child(1) {
    top: 10%;
}

.sidebtn span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.sidebtn span:nth-child(3) {
    bottom: 10%;
}

label 안에 span 태그를 이용합니다. 3개 정도 만들어줍니다.

css에서는 nth-child를 통해서 각 span의 위치를 잡아줍니다.

이제 checkbox가 checked됐을때 효과를 이용하여 sidebar가 슬라이드 되어 나올수 있도록 해줍니다.

css에서 checkbox가 checked됐다는 코드는

input뒤에 :checked를 써서 알려줍니다.

이제 이 코드를 이용하여 체크시 사이드바가 출현하게끔 하기위해서 css선택자들 중 +를 통해서 각 태그들을 선택하여 

left값을 조절하여 나타나고 사라지게 한다음,

transition을 통해서 시간차를 주어 천천히 사라지고 나타나게끔합니다.

See the Pen pooBRZY by hongsam (@hongsamhc) on CodePen.

완성된 코드 입니다.

이것을 저번에 만들었던 페이지에 적용 시켜 줍니다.

기본적으로 저는 사이드바가 왼쪽에서 슬라이드 되어 나오는 것으로 했습니다.

기본 페이지에서는 사라져있다가 버튼을 클릭하면 아래 그림처럼 나오게 됩니다.

완성된 화면입니다.

transition 값을 조절하여 버튼와 사이드바 이동시간을 조절하여 마은에 드는 슬라이드형 사이드바를 만들면 좋을것 같습니다.

다음에는 메인이미지를 적용 시켜 보겠습니다.