[수업기록] Web : Bootstrap

240821

1.부트스트랩

1) 개념 :

-CSS 프론트엔드 프레임워크 tool kit

-반응형 웹 디자인 손쉽게 구현 가능, 크로스 브라우징 지원

2) 사용법 :

-공식문서 참고 필요! 'DOC' 바 누르면 나옴, 핵심은 다음 두줄이 필요하다(==css, js 링크!)

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

3)CDN(Content Delivery Network) : 많은 장소에 걸쳐 분산된 서버들의 그룹

-지리적 졔약 없이 빠르고 안전하게 콘텐츠를 전송할 수 있는 전송 기술

-부트스트랩 서버는 미국에 있다

-세계 각지에 CDN 서버를 제공하는 업체들이 있음

-서버와 사용자 사이의 물리적 거리를 줄여 콘텐츠 로딩 소요 시간을 최소화(웹 페이지 로드 속도를 높임)

-부트스트랩에서 제공하는 bootstrap.css, bootstrap.js 파일 참고

4) 부트스트랩 기본 사용법

-모든 스타일을 class로 만들어둠

-부트스트랩에서 만든 클래스 이름이 덮히지 않고 쓰일 수 있게 클래스 선언시 !important를 선언해둠

-부트스트랩에는 특정한 규칙이 있는 클래스 이름으로 스타일 및 레이아웃이 미리 작성되어 있음 -> 늘 공식 doc 검색 필요

사이즈 단위 rem : px의 단점 보완(모니터마다 크고 작고의 기준이 다름, 모니터의 픽셀 갯수라서 반응형 사이트 대응이 안됨, 디바이스마다 기준(root) size는 다름. rem을 쓰면 디바이스에 맞게 변경됨)

ex. mx-auto -> 마진 좌우 가운데 정렬

2. Reset CSS

1) 개념

- 모든 브라우저는 각자의 user agent stylesheet를 가지고 있다(웹사이트를 보다 읽기 편하게 하기 위해

-모든 브라우저에서 웹사이트에서 동일하게 보이게 만들어야하는 건 개발자에게 골치 아픈 일!

-모두 똑같은 상태로 만들고 스타일 개발을 시작하자는 것에서 등장함('리셋')

2) Normalize CSS

-웹 표준 기준으로 브라우저 중 하나가 불일치 하다면 차이가 있는 브라우저를 수정

-경우에 따라 IE 또는 EDGE 브라우저는 표준기술이 없어 표준에 따라 수정할 수 없는 경우도 있어서 이땐 IE나 EDGE 스타일을 나머지 브라우저에 적용

-부트스트랩은 bootstrap-reboot.css라는 파일명으로 normalize.css를 자체적으로 커스텀해서 사용하고 있다

3. 부트스트랩 활용

-typography

-inline text elements

-list style

-text colors

주의점 : blue라고 검색하면 파란색이 안나온다. 부트스트랩이 정한 색 명칭들이 있음

-backgroud colors

    <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    
    # p-3 : padding, 방향없음, size 3

-carousel를 비롯한...

여러개 쓸 때 주의! 
carousel은 id 속성 값과 각 버튼의 data-bs-target 속성값이 각각 일치하는지 확인 필요
data-bs-target="#carouselExample2"

# : 아이디를 의미

-modal 주의사항

1.button과 modal 본체가 꼭 함께 다닐 필요는 없다.

2. MODAL 본체는 버튼을 눌러야만 활성화되는 코드이기에 코드 최하단에 모아두는 것을 권장
(화면 뒤로 밀려나감, 클릭했을 때 modal 창이 안꺼지는 것을 말함)

3. 여러개 쓸 때, MODAL ID 속성 값과 각 버튼의 DATA-BS-TARGET 속성값이 올바르게 일치하는지 확인

등등 doc 참고하기! https://getbootstrap.com/docs/5.3/content/typography/

실습) 아래를 만들어라

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <style>
    .box {
      width: 200px;
      height: 200px;
    }

  </style>
</head>

<body>
   <!--css 안쓰고 클래스만으로 가능!  -->
  <div class="box border border-5 border-dark bg-info"></div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>

4. Semantic Web

-웹 데이터를 의미론적으로 (역할, 의미) 구조화된 형태로 표현하는 방식

-> '의미를 부여한다'

-왜 필요할까? 검색엔진 및 개발자가 웹 페이지 콘텐츠를 이해하기 쉽도록

대표적인 semantic element 목록

header
nav
main
article
section
aside
footer

전부 다 div와 완전 똑같은 기능
그러나 의미는 다른 것 !
즉 저 위를 다 div로 하면 구분이 어렵다.

검색엔진 해석 결과 예시(검색엔진이 semantic element 덕에 해석을 함)

HTML 시멘틱 태그

HTML5에서 도입된 시맨틱 태그는 문서의 구조와 의미를 더 명확하게 설계

시멘틱 태그 종류
1. <header>:
제목, 로고, 내비게이션 링크, 검색 폼 등과 같은 헤더(머릿말) 정보
2. <nav>:
네비게이션 링크를 그룹화합니다.
3. <main>:
문서의 주요 콘텐츠를 나타냅니다.
4. <section>:
특정 주제나 콘텐츠를 그룹화하는 데 사용됩니다. 이 태그는 일반적으로 독립적인 섹션으로 나뉠 수 있는 콘텐츠 블록을 정의할 때 쓰입니다. 섹션 내에는 보통 제목(<h1>부터 <h6>), 문단(<p>), 이미지, 표, 리스트 등의 요소들이 들어갈 수 있습니다.
5.<article>:
독립적으로 구분되거나 재사용 가능한 콘텐츠 블록을 정의합니다. 뉴스 기사, 블로그 게시물 등이 예시입니다.
6.<aside>:
웹 페이지에서 본문과는 독립적으로 정보를 제공하는 콘텐츠. 주로 부가적인 콘텐츠나 사이드바, 광고, 채팅 위젯, 관련 링크 등
7.<footer>:
웹 페이지나 섹션의 끝 부분에 위치하며, 그 안에는 저작권 정보, 연락처 정보, 사이트 링크, 작성자 정보 등과 같은 푸터(바닥글) 정보를 담음
8.<figure>:
이미지, 동영상, 차트, 그래프 등과 같은 콘텐츠를 담을 때 사용됩니다. 주로 해당 콘텐츠와 관련된 캡션(<figcaption>)과 함께 사용되어 콘텐츠와 설명을 그룹화하고 의미론적인 구조를 제공
9.<figcaption>:
<figure> 요소의 캡션을 정의합니다.

5. CSS 방법론 : 코드 유지 보수를 위한 가이드라인

1) OOCSS(Object Oriented) : 객체 지향적 접근법을 적용하여 CSS를 구성하는 방법론

OOCSS 기본원칙

1. 구조와 스킨을 분리
2. 컨테이너와 콘텐츠를 분리

컨테이너와 콘텐츠 분리
1. 객체를 직접 사용하는 대신 객체를 둘러싸는 컨테이너에 스타일 적용
2. 콘텐츠를 다른 컨테이너로 이동시키거나 재배치할 때 스타일 깨짐 방지

'SSAFY' 카테고리의 다른 글

[관통 프로젝트] 3주차 : Web (0)	2024.08.23
[수업기록] Web : Reponsive Web (0)	2024.08.22
[수업기록] Web : CSS Box Model, CSS position, CSS Flexbox (0)	2024.08.20
[수업기록] Web : HTML & CSS 기초 개념 (0)	2024.08.19
[swea 파이썬] 10761. 신뢰 (0)	2024.08.18

주니코니코드

[수업기록] Web : Bootstrap

1.부트스트랩

2. Reset CSS

5. CSS 방법론 : 코드 유지 보수를 위한 가이드라인

'SSAFY' 카테고리의 다른 글

티스토리툴바

[수업기록] Web : Bootstrap

1.부트스트랩

2. Reset CSS

5. CSS 방법론 : 코드 유지 보수를 위한 가이드라인

'SSAFY' 카테고리의 다른 글

관련글

티스토리툴바