부트스트랩란?
기본틀
무언가를 개발함에 있어서 공통적인 틀 등을 제공한다.
그 중에서도 css 프레임워크이다.
css와 관련된 틀을 제공한다.
프레임워크는 하나만 사용하는 것이 원칙이다.
css가 아닌 js, 서버 등에는 다른 프레임워크를 쓸 수 있다.
ex. 안방(css)에는 한가지의 프레임워크 사용, 거실(js) 한가지 프레임워크 사용 가능
의미없는 코드 넣지말기
오류가 생길 것임
예전에는 자원이었지만 2022년 신입 개발자의 필요역량: 속도가 먼저 다음에 소통역량
빠르게 개발하는 능력, 다른 사람들과의 협업능력
상대방 입장을 고려할 수 있음을 의미
10줄 짤 거 2줄로 짜는 것
고차원 언어 html (인간친화)
C는 저차원 언어(기계친화)
API = 카카오맵, 유튜브 링크 등
안에 있는 코드를 몰라도 그 기능을 사용할 수 있도록 한 것
갖다 쓸 수 있는 거
라이브러리: 특정기능을 모아놓은 고유명사
파일명에 .min을 넣으면
파일 용량을 줄이기 위해 엔터들이 사라진다.
부트스트랩 link 파일에서 min file인 걸 .min을 넣으면 사람이 읽기 쉽게 변한다.
부트스트랩에 있는 클래스와
내가 적어놓은 클래스 명이 똑같다면 둘이 충돌이 일어나서 부트스트랩의 css만 적용될 수 있다.
CSS 프레임워크임에도 불구하고 자주 사용하는 modal 같은 경우 js로 동작할 수 있기때문에 이 기능도 가능하게 해주려고 js link도 불러와야한다.
프레임워크는 순수 Js 언어와 순수 CSS로 만들어놓은 모형에 불과하다.
프레임워크의 장점: 빠르다
프레임워크의 단점: 커스텀마이징을 하기 쉽지 않다.
주는대로 그냥 쓰라.. 1년 정도는 해야 수정가넝한...
reboot 패치노트처럼 이전 버전에서 변경된 부분을 설명
Uyiliyies
Colors
<div class = "text-warning bg-primary">display
Layout
분기점
breakpoint 반응형 구현하는 것
기준으로 삼고 신경써야하는 포인트를 5개로 나눠놓았다.
Grid와 breakpoint 사용할 줄 알아야.. 부트스트랩 좀 한다 할 수 있다..
breakpoint 상위 class infix를 쓰면 그 이전 크기가 씹히고 지정한 것으로 지정된다.
display 뿐만 아니라 다른 곳에서도 계속 쓰인다.
carousel =회전목마
사진 슬라이드
이미지 크기를 맞추는게 낫다..
세로정렬 flex로 써서 한다.
flex는 자식을 inline-block으로 만든다.
자식의 자식이 아니라.
스스로가 inline이 되는게 아니라 자식을!
그렇게 flex 안에서 inline block이 된 자식 택느느 마음껏 정렬할 수 있게 된다.
무언가를 정렬하고자 한다면 걔한테 flex를 주는게 아니라 걔의 부모한테 flex를 준다.
flex는 스스로를 정렬하는게 아니라 직계자식만 inline-block으로 만들기 때문에
flex의 후손을 정렬하진 못한다.
후손을 정렬하고 싶으면 첫번재 자식한테 또 flex를 주면 된다.
div가 됐떤 span이 됐던 부모가 flex를 가지면 자유자재로 자식들인 div나 span을 정렬시켜버린다. div나 span은 뭄력
태그의 변형까지도 일으키고 기존의 Html의 정의를 상실한다.
bootstrap에서 d-flex를 줘서 맘대로 정렬할건데 justify가 접두사로 붙으면 좌우 정렬을 한다.
세로 정렬은 align을 접두사로 붙는다. 그 뒤로 end center 등등을 쓰면 된다.
가운데 정렬 한번에 구현하는 것이 bootstrap으로 가능하다.
부모 혹은 body에다가 줘도 된다. 원하는 div 만들고
body의 직계자식인 div를 Justify 를 주는 순간 화면 안에서 가운데 정렬이 된다.
추가적으로 align을 가지고 있으면 세로정렬까지 하면서
사이즈가 자유자재로 조절돼도 계속 가운데 정렬이 된다.
flex는 모든 자식의 속성을 죽여버린다.
부모가 아니라 자식한테 align-self를 준다.
특정한 자식한테만 주는 것
그 자식한테만 변경이된다.
Grow shrink는 여러가지 라인에서
한쪽만 줄어드는 것을 보여주는 것
Position
클래스 이용
spacing 간격
padding과 margin을 쓰지 않고
mt-1 위에 마진이1로 생겨요.
px-4 패딩이 좌우로 4생겨요.
ml-4 pr-3 왼쪽마진 4 패딩오른쪽3
0부터 5까지만 된다. 5는 많이임 : 모바일과 데스크탑의 크기는 다르지만 알아서 bootstrap이 계산해서 그 화면의 많이를 띄워준다.
