[내일배움캠프] 2022-11-15 TIL

팀 프로젝트 진행

각자의 개인 소개 페이지를 먼저 만들어보기로 하였다. 각자 필수내용 및 자신이 넣고 싶은 내용을 넣어 개성있게 만들면서 색(스파르타 페이지의 시그니처 색), max-width, 전체적인 틀은 동일하게 하였다.

 

만드는 과정에서 백엔드 부분은 기존에 배운 것 이상의 내용은 필요하지 않았으며, 오히려 프론트 엔드 부분에 대한 공부가 필요했다. 특히 요소들을 배치하는 과정이 생각보다 어려웠으며, 이를 위해 부트스트랩의 그리드 시스템과 미디어 쿼리에 대해 공부했다.

 

Clipboard API

클립보드와 상호작용하기 위해 기존에는 execCommand 메서드가 사용되었으나 신기능으로 인해 점차 사용되지 않고 있다. 그 신기능은 바로 Clipboard API이다. 

Clipboard API - Web API | MDN

Clipboard API는 클립보드와 관련된 다양한 기능을 가지고 있고, 그 중 아래의 함수를 통해 데이터를 클립보드에 복사할 수 있다.

navigator.clipboard.writeText("복사할 데이터")

 

부트스트랩 그리드 시스템

부트스트랩의 그리드 시스템에서는 컨테이너(container), 행(row), 열(col)을 이용하여 레이아웃을 만들 수 있으며, 반응형이라는 특징이있다. 즉, 모바일에도 최적화된 레이아웃을 쉽게 만들 수 있는 것이다.

기본적인 형태는 아래와 같고, 하나의 row 당 12개의 col을 사용할 수 있다. col-1 ~ col-12와 같은 형태로 비율을 지정해 줄 수 있으며, xs, sm, md, lg, xl, xxl 등 화면 크기에 따른 그리드 옵션을 사용할 수도 있다.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

 

미디어 쿼리

미디어 쿼리는 CSS에서 사용되며 마치 프로그래밍 언어들의 조건문처럼 작동한다.

@media (조건) {
  스타일
}

 

따라서 화면의 크기를 조건으로 하여 특정 요소가 사라지게하거나 나타나게 하는 등 다양한 형태로 활용 가능하다.

 

 

오늘의 결과물

데스크탑 화면 예시

모바일 화면 예시