해당 포스팅은 강의 복기용으로 키워드를 기록하는 용도의 포스팅입니다.
--------------------------------------------------------------------------------------------------
부트스트랩 샘플코드 실습)
부트스트랩 사이트 참고)
부트스트랩 사용하는 방법
1. css -> <head> 맨 위에 부트스트랩의 <link>를 붙여 넣어 부트스트랩의 css를 가장 먼저 불러온다.
2. js-> 부트스트랩 <script src> 를 붙여 넣는다.
3.HTML태그와 class 값 지정을 통하여 원하는 기능을 가져다 사용한다.
부트스트랩의 기본 전역 속성
1. HTML 5이다
2. 모바일 우선이다. 반응형 뷰포트메타태그가 필요할 수 있다.
3. 전역 box-sizing 값을 사용한다.
그리드 시스템
화면에 표를 그려놓고 화면 크기에 따라 div의 크기를 다르게 하는 기능을 실습함.
div 태그를 여러개 주욱 놓았을 때 부트스트랩을 사용하지 않으면 div의 특성대로
모두 쭉 세로로 배치됨.
부트스트랩은 태그에 클래스이름을 넣어주는 것만으로 원하는 기능을 적용할 수 있다는 점이 아주 편리함.
class = "col" -> 자식들이 열로 배치됨
class = "row" -> 자식들이 행으로 배치됨
부트스트랩에서는 한 행에 12개가 들어가도록 기준이 정해져 있다.
<div class="col-1"> </div> 라고 하면 한 행을 1/12로 쪼갰을 때 한 칸을 차지하는 사이즈로 설정이 된다.
여기서 화면사이즈가 특정 사이즈 이상일 경우에만 div의 사이즈를 줄여주어 가로배치가 되게 함.
- Extra small (xs) <576px
- Small (sm) >=576px
- Medium (md) >=768px
- Large (lg) >=992px
- Extra large (xl) >=1200px
- Extra extra large (xxl) >=1400px
6가지 접두어를 이용하면 된다.
원래가 애초에 한 줄을 다 차지하여 세로배치가 되는 div태그인데 특정 사이즈 이상에서는 div의 사이즈를 설정하여 (n/12 사이즈로) 배가로배치가 되도록 해줄 수 있는 것임.
class = "col-sm-1 col-md-3 col-lg-6"
처럼 중첩해서 사용할 수도 있다. 이렇게 할 경우 화면 사이즈에 따라 단계별로 적용됨.
부트스트랩을 이용한 기능구현)
반응형 웹 화면 만들기.
1. 토글을 이용하여 토글버튼을 눌렀을 경우 화면에 출력되도록 하는 기능
+
2. 그리드시스템을 이용한 반응형 화면 구성
버튼태그에 data-target = "#타겟태그아이디" 를 넣고
data-toggle="collapse" 로 속성을 설정하면 된다.
버튼을 누르면 토글 기능으로 collapse됐다가 풀렸다가 함.
최초에 collapse상태로 두기 위하여 타겟태그의 class속성에
class = "collapse" 로 collapse키워드를 추가해줌.
class = "" 따옴표 속에 띄어쓰기로 구분하여 부트스트랩의 클래스 키워드를
기입하고 저장해보면 키워드 하나하나에 따라 바로 화면에 적용되는 것을 볼 수 있음.
매우 신기하고 편리함.
W3C : www컨소시엄
웹 표준
시맨틱 태그
div태그의 id에 header footer 등을 다는 것의 문제점.
-> 다들 제각각으로 씀. 검색엔진에서 잘 안먹힘 등
-> 아예 해당 기능으로 쓸 수 있는 시맨틱 태그를 만듦.
시맨틱 태그의 종류들
<header>
<nav>
<aside>
<article>
<section>
<footer>
등등
그러나 예전 코드를 사용하는 사이트들을 검사해보면 여전히 div 태그를 많이 사용한다.
ex)네이버
css)
가운데 정렬하는 방법 2가지
1) text-align:center;
2) margin: 0 auto;
부트스트랩 그리드 기능 참고.
그리드 시스템
강력한 모바일 우선 flexbox 그리드를 사용하여 12개의 열 시스템, 6개의 기본 반응형 계층, Sass 변수 및 믹스인, 수십 개의 사전 정의된 클래스 덕분에 모든 모양과 크기의 레이아웃을 빌드할 수 있
getbootstrap.kr
'개발 > KH국비지원과정' 카테고리의 다른 글
| [KH국비지원 웹개발자 과정] Day_53 키워드, 프레임워크, 마이바티스, (0) | 2022.08.29 |
|---|---|
| [KH국비지원 웹개발자 과정] Day_52 시험 대비 키워드 프론트엔드 복습 (0) | 2022.08.25 |
| [KH국비지원 웹개발자 과정] Day_50 키워드 JS정규표현식,부트스트랩,반응형웹 (1) | 2022.08.22 |
| [KH국비지원 웹개발자 과정] Day_49 키워드, jQuery 이벤트 (0) | 2022.08.19 |
| [KH국비지원 웹개발자 과정] Day_48 키워드, jQuery (0) | 2022.08.19 |