Don't Panic
in HTML·CSS ☕ 2분 읽기

[HTML·CSS] 부트스트랩 그리드 + Ajax·JSON 연동 실습

#HTML·CSS
목차

프론트에서 데이터 가져오기

  • 프론트 관통 프로젝트라 DB는 안 쓰지만, 프론트에서 정보를 가져오는 것이 중요해 보인다.
  • 관통 때는 XML 데이터를 가져와 파싱해서 써야 한다. (JSON + Ajax 같은 걸 쓴다고 함)
  • 또 하나는 JSON을 가지고 사용하는 것이다.

서버 단독 실행 화면

서버 동작 확인하기

  • 서버가 무엇을 하는지 모르겠으면 단독으로 실행해 보자.
  • 직접 파라미터를 ?로 주소창에 넣어 주면 결과가 나온다. → 서버 정상 확인.

파라미터로 서버 응답 확인

  • 이벤트는 word라는 곳에서 발생한다.
  • keyup 이벤트가 발생할 때 조건이 발동한다.

부트스트랩(Bootstrap)

  • 제이쿼리(jQuery)가 함수(function)들의 모음이라면, 부트스트랩은 CSS의 모음이자 클래스들의 모음이다.
  • 부트스트랩을 쓰려면 CDN 4개를 넣어 줘야 한다.

참고: https://www.w3schools.com/bootstrap4/bootstrap_containers.asp

컨테이너(Container)

  • 앞으로 부트스트랩을 쓸 때에는 컨테이너를 써야 한다. (담은 내용물들을 화면에 어떻게 배치할 것인가)
  • .container 또는 .container-fluid 둘 중 하나를 써야 한다. 그리고 내용물을 담을 때는 div를 사용한다.
  • 부트스트랩도 핸드폰, 패드, 노트북, 데스크톱 등 화면 크기에 따라 설정이 달라질 수 있다.

화면 크기에 따른 반응형 설정

그리드 시스템(Grid System)

  • 한 행에 12칸이 넘어가면 안 된다.
  • 전체 화면을 12개로 나눠서 쓰는 시스템을 그리드 시스템이라 한다.
  • 모바일도 12개로 나눠 쓰지만, 한 칸의 사이즈는 서로 다르다. (PC에서의 한 칸 사이즈와 모바일에서 12칸으로 나눈 사이즈는 서로 다름)

모바일과 PC의 칸 크기 차이

  • 그리드 시스템이라는 거 기억하자.
  • 사이트 하나 만들 때, 그냥 레이아웃만 그리드 시스템을 이용해서 구조만 만들어 보자. (전체를 나눠서 쓴다)

그리드 레이아웃 구성 예시

  • 부트스트랩 클래스를 다 사용해 보기는 그렇다. 실습 때도 그냥 바로 사용하는 것으로 넘어감.

실습 따라 해 보기

  1. https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp 에서 container example을 복사해 HTML을 만들어 본다.
  2. 채우기 텍스트(lorem ipsum 한글)는 http://guny.kr/stuff/klorem/ 로 가서 만든다.

로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트다.

그 밖에 사용해 볼 컴포넌트

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>

데이터 전송 (Forms)

전체 클래스 레퍼런스

정리

  • 부트스트랩이 다 되어 있으니까 비동기로 받아오자.
  • 사용자 스크립트 파일을 표시한다.

관련 글