Home화면 구성하기

이번에는 Home 화면 구성을 만들어 보려고 합니다.

저는 부트스트랩에 있는 썸네일 예제를 가져와서 구성하고자 합니다.

부트스트랩에서 해당 부분을 찾아 들어가 복사 후 하단에 추가해 줍니다.

그러면 아래처럼 나오는데 이미지 이는 이미지 경로가 제대로 추가 되어 있지 않아서 발생하는 문제입니다.

img src 안에  http://placehold.it/190x200을 넣어주면 주어진 크기로 이미지가 들어가게 됩니다.

alt의 경우 이미지를 로드하지 못했을 경우 대체하는 텍스트로 저는 삭제하였습니다.

아래 소스를 참고 하세요.^^

<div class="row">

        <div class="col-sm-6 col-md-4">

          <div class="thumbnail">

            <img src="http://placehold.it/190x200">

            <div class="caption">

              <h3>Thumbnail label</h3>

              <p>...</p>

              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

            </div>

          </div>

        </div>

      </div>

이미지가 들어갔음에도 불구하고 예제처럼 화면이 나오지 않네요. 이유는 내용을 포함하고 있는 div의 크기가 동적으로 지정이 되어 있기 때문입니다.

div에 style을 넣고 max-width값을 지정해 주면 크기를 조절할 수 있습니다.

style을 지정하면서 저는 이미지 크기도 변경을 하였습니다.

<div class="row">

        <div class="col-sm-6 col-md-4" style="max-width:250px;">

          <div class="thumbnail">

            <img src="http://placehold.it/240x200">

            <div class="caption">

              <h3>Thumbnail label</h3>

              <p>...</p>

              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

            </div>

          </div>

        </div>

      </div>

하지만 해당 방법은 동적 사이트를 만들기에는 해상도가 높은 모니터에서 보면 배열이 맞지 않기 때문에 부트스트랩의 클래스 값을 변경해주는 방법으로 변경해 주는 것이 좋을 것 같아  class 값을 변경했습니다.

부트스트랩을 보시면  col-sm과 col-md에 대한 설명이 나와 있습니다.

부트스트랩은 12개의 칸으로 구성되어 있으며 뒤에 나오는 숫자는 차지하고 있는 공간을 의미합니다.

저는 작은 기기에서는 6칸을 차지하고 중간 기기에서는 3칸을 차지하게 만들고자 합니다.

그러면 아래 사진처럼 나옵니다. 화면을 줄였다 키웠다가 하면 크기가 변동 되는 것을 볼 수 있습니다.

아래 소스를 참고 하세요.

<div class="row">

        <div class="col-sm-6 col-md-3">

          <div class="thumbnail">

            <img src="http://placehold.it/240x200">

            <div class="caption">

              <h3>Thumbnail label</h3>

              <p>...</p>

              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

            </div>

          </div>

        </div>

나중에 삭제하겠지만 화면이 허전하니 해당 소스를 동일하게 복사하여 4개를 채우면 아래처럼 나옵니다.

주의 하실 점은  class 값이 row로 되어 있는 항목 아래부터 복사를 해서 넣으셔야 합니다.

부트스트랩에서 class row 값은 다음줄을 의미하기 때문에 row까지 복사하면 일렬로 4개가 생기는 것을 보실 수 있습니다.

나중에 해당 부분은 DB와 연동하여 반복문으로 만들어 줄 것이기 때문에 많이 만들어 놓으실 필요는 없습니다.

오늘은 이만 마치도록 하겠습니다.