[10주차 3일] CSS - div태그로 테이블 만들

 #tableContainer {
display: table;
border-spacing: 10px;
}

#tableRow {
display: table-row;
}

#drinks {
display: table-cell;
background-color: #efe5d0;
width: 20%;
padding: 15px;
vertical-align: top;
}

#main {
display: table-cell;
background:       #efe5d0 url(images/background.gif) top left;
font-size:        105%;
padding:          15px;
vertical-align: top;
}

#sidebar {
display: table-cell;
  background:       #efe5d0 url(images/background.gif) bottom right;
    font-size:        105%;
  padding:          15px;
  vertical-align: top;
}








<div id="tableContainer">
<div id="tableRow">
<div id="drinks">
<h1>커피</h1>
<p>하우스 블랜드, $1.49</p>
<p>모카 카페 라떼, $2.35</p>
<p>카푸치노, $1.89</p>
<p>차이티, $1.85</p>
<h1>음료</h1>
<p>
헤드퍼스트 라운지에서 자랑스럽게 출시한 건강에 좋은 음료입니다.
</p>
<p>시원한 녹차, $2.99</p>
<p>차가운 산딸기 농축과즙, $2.99</p>
<p>블루베리 블리스, $2.99</p>
<p>노화방지용 크렌베리 블래스트, $2.99</p>
<p>차가운 차이맛 음료, $2.99</p>
<p>블랙 브레인 음료, $2.99</p>
</div>
    <div id="main">
      <h1>좋은 품질의 커피와 카페인</h1>
      <p>
        스타버즈 커피에서는 좋은 품질의 커피와 차를 통해 여러분에게 필요한 카페인을 채우는데
        심혈을 기울이고 있습니다. 물론, 여러분이 맛있는 커피 한 잔과 그 맛의 추억을 깊이 간직하길 바라고
        있습니다. 카페인 수치를 지속적으로 관리하고 최적화하는 회사는 저희 회사가 유일합니다.
        잠깐 들러 커피한잔 하시거나, 새롭게 선보이고 있는 빈 머신 페이지를 통해 온라인으로 주문해서,
         표준 카페인 섭취량을 채워줄 품질 좋은 스타버즈 커피를 맛보세요.
      </p>
      <p>
        저희가 <em>카페인</em> 이라고 말했나요?
      저희 회사는 흥미로운 연구를 수행하고 있는 <a href="http://buzz.wickedlysmart.com"
      title="버즈에서 카페인에 대한 모든 내용을 읽어보세요">카페인 버즈</a>를 후원하고 있습니다.
        최신 커피와 카페인 제품이 필요하시면 잠깐 들러 관련 제품을 구입하세요.
      </p>
      <h1>회사연혁</h1>
      <p>
        "사람, 계획, 커피 빈!" 멋스러운 사훈은 아니지만, 정말 좋은 커피를 만들었습니다.
      스타버즈 CEO도 평범한 사람이며, 여러분도 이미 그의 계획을 알고 있을 것입니다. .
      바로 구석구석에 스타버즈 매장을 세우는 것입니다.
      </p>
      <p>불과 몇 년만에 그는 자신의 계획을 실행에 옮겨, 오늘날 여러분은 어느 곳에서나 스타버즈 커피를 즐길 수 있습니다.
      물론 올해의 가장 큰 뉴스는 스타버즈가 헤드퍼스트 독자들과 힘을 합쳐 스타버즈 웹 시연회를 개최한 것이죠.
      이 시연회는 급속도로 성장하고 있고 새 고객들의 카페인 필요량을 충족시키는데 도움을 주고 있습니다.  
      </p>
      <h1>스타버즈 커피 음료</h1>
      <p>
         저희 스타버즈에서 카페인이 함유된 다양한 음료를 즐길 수 있습니다.
        <a href="beverages.html#house" title="하우스 블랜드">하우스 블랜드</a>,
        <a href="beverages.html#mocha" title="모카 카페 라떼">모카 카페 라떼</a>,
        <a href="beverages.html#cappuccino" title="카푸치노">카푸치노</a>,
        그리고 저희 고객들이 선호하는,
        <a href="beverages.html#chai" title="차이티">차이티</a>.
      </p>
      <p>
        또한 집에서 사용할 수 있도록 다양한 종류의 커피 빈도 제공하고 있습니다.
      <a href="form.html">커피공장</a>을 통해 지금 바로 온라인으로 주문해서,
      집에서도 스타버즈 커피를 즐겨보세요.
      </p>
    </div>

    <div id="sidebar">
      <p class="beanheading">
        <img src="images/bag.gif" alt="Bean Machine bag">
        <br>
        온라인으로 주문하세요
        <a href="form.html">커피공장</a>
        <br>
        <span class="slogan">
            빠르고 <br>
            신선하게 <br>
            여러분의 집으로 직접 배송해 드립니다 <br>
        </span>
      </p>
      <p>
        무엇을 망설이고 있나요? 저희가 마련한 최신 자동주문 시스템인 커피공장을 통해
      온라인으로 지금 바로 품질좋은 커피를 주문할 수 있습니다. 어떻게 주문하냐고요?
      커피공장 링크를 클릭해서 주문서를 작성하면, 무대 뒤에서 커피를 준비하고,
      포장해서 여러분 집 앞으로 바로 배달해 드립니다.
      </p>
    </div> <!-- sidebar -->
</div> <!-- tableRow -->
</div> <!-- tableContainer -->