더북(TheBook)

왼쪽부터 스타일을 적용해 봅시다. 왼쪽 영역은 같은 구조의 HTML 코드라서 card 클래스를 가지고 있는 div 태그의 그룹만 꾸미면 모두 같은 스타일이 적용됩니다. 다음 코드처럼 display 속성값을 flex로 적용해 수평 방향으로 나란히 배치합니다. 테두리, 내부 여백, 간격도 지정합니다.

card 클래스 하위에는 크게 icon 클래스와 info-text 클래스를 가지고 있는 div 태그가 있는데, 두 태그는 display 속성에 의해 가로 한 줄로 배치됩니다. 그리고 수직 방향으로 중앙에 위치하도록 align-items 속성을 지정합니다.

13/end/css/contact_with_me.css - Contact With Me 영역 본문 왼쪽

section.contact .contact-me .left .card{
  border:1px solid #ccc;
  padding:1rem;
  display:flex;
  align-items:center;
  margin-bottom:1.25rem;
}
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.