HTML을 이용하여 똑같이 만들어보기

html html


index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>레이아웃1</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="wrap">
      <div id="header">
        <img src="images/logo.gif" alt="logo" />
        <h1>헤드 퍼스트 라운지 방문을 환영합니다.</h1>
      </div>
      <div id="discripsion">
        <p>
          헤드 퍼스트 라운지는 웹 마을에서 명실상부한 가장 큰 유행의
          선도자입니다. 잠깐 들어서 음료와 차, 커피의 맛을 음미하거나, 좀 더
          오래 머물면서<br />
          맛과 향, 신선하고 건강에 좋으며 화려한 색을 자랑하는 최상의 재료로
          구성된 세계 여러 나라의 전통적인 메뉴도 즐겨 보세요.
        </p>
        <p>
          라운지에 머무는 동안, 라운지 전체를 맴도는 부드럽게 어우러진 은은하고
          신비한 음악을 즐기면서 편안한 저녁시간을 보내게 될 것입니다.라운지<br />
          내에서는 무료 인터넷이 가능하니, 노트북도 가져오세요.
        </p>
        <p>
          보증서 : 우리 라운지는 손님 여러분께 매번 새로운 경험을 제공하고,
          최선을 다해 봉사하기 위해 노력하고 있습니다. 잠깐 들러 음료 한 잔
          하면서<br />
          이메일을 체크하든지 혹은 색다른 저녁식사를 위해 방문해 주세요. 세심한
          주의를 기울이며 최선을 다하는 종업원이 항상 대기하고 있습니다. 저희<br />
          서비스를 받고도 만족하지 못하신다면, 블루베리 블리스 한 잔을 대접해
          드리겠습니다.
        </p>
        <p>
          이게 전부가 아닙니다. 밤에 오시면, 전용 DJ가 선사하는 트랜스와 드럼,
          엠프, 베이스 비트가 울려퍼지는 널찍한 홀에서 라이브음악을 즐겨보세요.
        </p>
        <p>
          가상의 라운지를 경험해 봤으니, 실제 라운지도 경험해봐야겠죠? 저희
          가게는 웹 마을 중심가에 위치해 있습니다. 상세약도를 보시면 눈깜짝할
          사이<br />
          에 방문할 수 있습니다. 언제든지 방문해 주세요.
        </p>
      </div>
      <div id="main">
        <h2>주간 음료 스페셜</h2>
        <div id="menu-1">
          <h3>레몬 브리즈</h3>
          <p>
            <img src="images/yellow.gif" alt="레몬 브리즈" />
            허브, 미네랄, 부드러운 감결에 레몬을 섞은 비타민이 풍부한 최고의
            음료로 하루 종일 면역 계통을 최상의 상태로 유지할 수 있어요.
          </p>
        </div>
        <div id="menu-2">
          <h3>차가운 차이맛 음료</h3>
          <p>
            <img src="images/chai.gif" alt="차가운 차이맛 음료" />
            일반 차이티가 아닙니다. 이 음료는 마테차에 차이티 성분을 섞은 다음
            얼음에 카페인 맛이 나는 초콜릿을 살짝 넣은 음료입니다.
          </p>
        </div>
        <div id="menu-3">
          <h3>블랙 브레인 음료</h3>
          <p>
            <img src="images/black.gif" alt="블랙 브레인 음료" />
            기억력이 좋아지면 좋겠죠? 검은 우롱차와 에스프레소를 살짝 섞어 만든
            블랙 브레인 음료를 드셔 보세요. 머리가 좋아지는 음료입니다.
          </p>
        </div>
      </div>

      <p>
        저녁시간에 언제든지 방문해서 이 음료 뿐 아니라 다른 음료도 즐겨보세요.
      </p>

      <div id="music">
        <h2>라운지 제공 음악</h2>
        <p>
          라운지에서 어떤 음악을 들려주는지 자주 문의를 받고 있는데, 궁금해 할
          필요가 없습니다. 항상 최상의 음악을 제공하고 있습니다. 여러분을
          위한<br />
          노래 제목이 여기 있군요. 일주일에 한 번씩 갱신됩니다.
        </p>
        <ul>
          <li>Buddha Bar, Claude Challe</li>
          <li>When It Falls, Zero 7</li>
          <li>Earth 7, L.T.J. Bukem</li>
          <li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
          <li>Music for Airports, Brian Eno</li>
        </ul>
      </div>
      <div id="footer">
        <p>
          &copy; 2012,헤드 퍼스트 라운지<br />
          이 사이트의 모든 상표와 등록상표는 해당 소유자의 자산입니다.
        </p>
      </div>
    </div>
  </body>
</html>




style.css

#wrap {
  border: 1px solid black;
  width: 1075px;
  margin: 0 auto;
}

#header,
#discripsion,
#main,
#music,
#footer {
  margin-left: 10px;
}

p {
  margin-left: 10px;
}




결과

html

Leave a comment