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부분을 진행해 보겠습니다.