[220923-220930] 4차 세미나 - 결과가 쉽게 눈에 보이는 웹 프론트 구현하기

웹과 VSCode

• 웹 개괄
  
  
  • 웹은 Word Wide Web의 줄임말이며 웹 사이트는 url을 통해 보이는 웹 페이지들의 의미 있는 묶음
    
  • 크게 웹 프론트엔드와 웹 백엔드로 나뉘며,
    프론트엔드는 HTML(뼈대 역할), CSS(꾸미기 역할), JavaScript(동적 역할)로 구성
• VSCode와 Extensions
  
  
  • 비주얼 스튜디오 코드는 개발을 도와주는 다양한 extensions으로 인해 확장성이 큼
• 유용한 Extensions
  
  
  • Auto Rename Tag : HTML 태그를 조정
  • Bracket Pair Colorizer 2 : 괄호 짝의 색을 맞춰줌
  • Code Spell Checker : 변수의 오타 체크
    
  • React/Redux/GraphQL/React-Native snippets : 특정 용어로 코드를 자동 완성
  • gitignore : gitignore에 등록된 파일을 회색으로 바꿔줌
  • GitLens : 협업시 누가 코드를 언제 바꾸었는지 커밋을 알려줌
  • indent-rainbow : 들여쓰기를 색상으로 표현
  • Live Server : 자동으로 페이지를 새로고침해주어 실행 결과를 바로 확인 가능
  • Prettier : 코드 형식을 관리
  • TODO Highlight : 나중에 해야할 부분을 하이라이트로 체크해둘 수 있음

Bootstrap 개론

• Boostrap의 탄생 배경과 정의
  
  
  • 서로 다른 인터페이스를 사용한 여러 개발자들의 공동작업에서 일관성 유지를 위해
    각종 레이아웃, 버튼 등의 디자인은 CSS와 Javascript로 만들어 놓은 것
  • 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 프레임워크로 
    미리 정의된 HTML, CSS, JS를 모아둔 것으로 프론트엔드 개발을 빠르고 쉽게 할 수 있음
• Boostrap의 장단점
  
  
  • 장점
    1) 클래스 이름만 알고 있다면 빠르고 쉽게 여러 형태의 웹 페에지를 제작 가능
    2) 클래스 한 줄로 CSS, JS 여러 줄 처리가 가능
    3) 대부분 각 해상도 대응에 대한 처리도 되어있어 반응형 구현 용이
    4) 퀄리티가 나쁘지 않아 많은 기업들이 사용하는 프레임워크
  • 단점
    1) 미리 짜여진 스타일을 이용하기 때문에 디자인과 기능이 다소 정형화되어 있음
    2) 페이지 로딩 속도를 비교해보면 다른 프레임워크에 비해 굉장히 무거움
    3) 부트스트랩에 익숙해지기 전까지 작업속도가 오래 걸림

Bootstrap 설치 방법

• CDN과 설치 방법
  
  
  • CDN이란 Contents Delivery Network의 약자로
    필요한 데이터를 여러 개의 서버에 두고 수요가 있을 때 사용자에게 전달하는 네트워크로
    하나의 서버에 모든 데이터를 저장해두지 않아 속도 측면에서 유리
    
  • 부트스트랩은 CDN을 지원해 웹사이트의 불필요한 자원 소모를 줄이고
    필요한 기능을 서버에서 분리하여 가지고 있어 효율적인 데이터 교환이 가능함

• 기본 세팅하기
  
  
  • ! + tab 버튼을 이용해 기본 세팅을 한 후, CDN 설치하고 Javascript는 나중에 되도록 body의 마지막 부분에 넣어줌

실습 및 과제

• Boostrap 클래스 기본 설명
  
  
  • 색
    .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info,
    .bg-light, .bg-dark, .bg-white, .bg-transparent가 존재
  • margin, padding
    m-0 : margin
    ml-0 : margin-left
    mr-0 : margin-right
    mb-0 : margin-bottom
    mt-0 : margin-top
    추가적으로 mx의 경우 x축에 해당하므로 left와 right에 해당하는 margin을 한 번에 지정하고
    my의 경우 y축에 해당하므로 top과 bottom에 해당하는 maring을 한 번에 지정
    0부터 5까지 가능하고 Padding(p-0 ˙˙˙)도 마찬가지
    
  • Grid
    행과 열로 이루어진 시스템을 사용하여 레이아웃을 구성하며
    부트스트랩으로는 container 안에 row, row 안에 col을 원하는 개수만큼 배치해 반응형 그리드를 쉽게 만들 수 있음
    정말 작은 사이즈인 Extra small, 모바일 사이즈인 Small, 테블릿 사이즈인 Medium, 컴퓨터 사이즈인 Large, Extra large
  • Modal
    팝업창으로 a 태그가 적용된 곳 혹은 버튼을 클릭하면 팝업 창이 뜨게 하며 Button trigger modal, Modal으로 구성

색

Grid

부트스트랩의 Grid는 12칸을 기준으로 정의됨

Modal의 id 이용

• Button
  1) Bootsrap Buttons 
  2) Bootstrap를 가지고 기본적인 클래스를 지정한 후, css를 혼용하여 커스터마이징 디자인할 수 있음
  3) p, m을 통해 마진과 패딩을 조절하고, lg, sm을 가지고 버튼의 크기를 조정할 수 있음
  3) a 태그를 가지고도 버튼을 만들 수 있음

• Grid
  1) Bootstrap Grid system
  2) 컨테이너 안에서 col은 알아서 균등 분할됨
  3) 반응형 그리드에 맞춰 차지하는 사이즈를 정의할 수 있으며 12를 넘어갈 경우 줄바꿈이 됨
  4) 컬럼에 각각 일일이 적용하거나 로우에 일괄 적용할 수 있음

col-sm-3, row-cols-3

col-sm-3, row-cols-sm-4

col-md-4, row-cols-md-3

col-lg-6, row-cols-lg-2

col-xl-12, row-cols-x1-1

• Modal
  1) Bootstrap Modal
  2) Button trigger modal, Modal으로 구성
  3) 모달 안의 컨테이너에 대한 자동 완성 기능이 존재
      > : 자식 요소
      * : 여러 개를 한 번에 만들기
      + : 같은 라인에 여러 개 만들기 (형제 요소)
      . : 클래스 속성
      # : id 속성

• 기타 유용한 클래스
  1) 더미 텍스트 사용하기 : Lorem을 입력
  2) Boostrap Site (v4.6)
  3) Bootstrap Navbar
  4) Boostrap Card
  5) Boostrap Pagination
  6) Boostrap Tooltip

더미 텍스트

• 과제

 

 

bootstrapPractice.html

0.01MB

Bootstrap_KimGagyeong_1915279.html

0.01MB