더북(TheBook)

13.8.2 CSS 코드 작성하기

Contact With Me 영역의 CSS 코드를 작성해 보겠습니다. 이전처럼 제목은 별도로 CSS 코드를 적용하지 않아도 이미 스타일이 적용되어 있습니다. 그래서 본문만 작성하면 됩니다. 본문은 영역 왼쪽과 오른쪽이 수평 방향으로 나란히 배치되어야 하므로 다음과 같이 CSS 코드를 작성합니다. 이 코드에서도 역시 float 속성을 사용하므로 clear 속성으로 해제해야 합니다. 그리고 너비는 왼쪽이 30%, 오른쪽이 65%가 되도록 지정합니다. 이때 남은 5%는 오른쪽에 margin-left 속성값으로 지정합니다.

13/end/css/contact_with_me.css - Contact With Me 영역 본문 레이아웃

section.contact .contact-me::after{
  content:"";
  display:block;
  clear:both;
}
section.contact .contact-me .left{
  width:30%;
  float:left;
}
section.contact .contact-me .right{
  float:left;
  width:65%;
  margin-left:5%;
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.