CSS/Bootstrap8 Bootstrap] Media-quary / 폰 화면에 반응형으로 만들기 Media query란 무엇인가? 특정 상황이 됐을 때 적용되는 css 코딩 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp https://www.w3schools.com/css/css3_mediaqueries_ex.asp 자주 쓰이는 Media query 타입 Media print h1 {color: red;} 이라하면 화면에서 h1색을 빨간색으로 바꾸라는 것이지만 @media print { h1 {color: red;} } @media print로 감싸면 print할 때만 빨간색으로 하라는 의미가 된다. Media screen break point 사용 화면을 점점 줄였을 때 어느 지점에서 설정된 화면으로 전환할 지 설정 Media (max-widt.. 2021. 7. 22. Bootstrap, Bootsnipp] 부트스트랩 탬플릿 사용하는 법 탬플릿을 제공하는 사이트 1. Bootsnipp.com https://bootsnipp.com/ 2. Bootstrap Examples Bootstrap Example에서 원하는 템플랫을 선택할 수 있다. https://getbootstrap.com/docs/5.0/examples/ 탬플릿 코드 복사해 오는 법 원하는 탬플릿을 클릭해 해당 페이지에 들어간 후 빈 공간에 오른쪽 버튼 눌러 맨 마지막 inspect를 클릭한다. 가져오고 싶은 태그를 선택한 후 copy -> Copy element 를 눌러 복사한 후 붙여넣기 하여 사용한다. 2021. 7. 20. Bootstrap] 슬라이드 (Carousel) 만들기 Bootstrap에서 Carousel(슬라이드) 찾는 법 Docs -> Components -> Carousel (카러즐) https://getbootstrap.com/docs/5.0/components/carousel/ 부트스트랩에서 코딩 복사해서 붙이기 carousel 기타 옵션 슬라이드 자동 재생 스피드 조절 interval: 5000ms(5초)로 기본 설정. 5초 후에 다음 슬라이드 자동으로 보여진다. 3초 후로 바꿔보기 data-bs-interval="3000" 마우스 올렸을 때 슬라이드 자동실행 멈춤 data-bs-pause="hover" 슬라이드로 안하고 싶을 때 slide를 클래스에서 삭제한다. 자동 재생 멈추고 싶을 때 ride를 false로 설정해 준다. control button 살펴.. 2021. 7. 20. Bootstrap] 버튼 만들기 부트스트랩 버튼 만들기 클래스에서 btn을 입력하면 부트스트랩 버튼을 불러온다. 부트스트랩 버튼 색지정 부트스트랩 위 색깔 표를 보면 각 색마다 이름이 정해져 있다. btn-primary 클래스를 추가하면 이미 설정된 파란색이 나온다. Primary 파랑색 Secondary 회색 Success 녹색 Danger 빨강색 Warning 노랑색 Info 하늘색 Light 흰색 Dark 검은색 Link 링크 밑줄 원하는 색이 없을 때 사용자 색 지정 1. 새로운 클래스(card-btn)를 하나 만들고 css에서 따로 설정해 준다. 2. 그 전에 html head에서 css 링크가 bootstrap 링크보다 아래 위치해 있어야 css가 적용된다. 3. css에서 원하는 색 지정한다. 4. 결과물 보더로만 버튼 만.. 2021. 7. 18. Bootstrap] container/ container-fluid container 반응형으로 설정된 박스 화면 사이즈 바뀌면 알아서 반응형으로 박스 사이즈도 변형해 준다. 여유 공간도 알아서 바뀌는데 이게 싫을 수 있다. 화면을 꽉차게 해서 내가 원하는 만큼 padding을 주는 것이 더 편리하다. 전체가 꽉차게 하려면 container-fluid를 사용해야 한다. padding은 css에서 준다. container-fluid 화면의 사이즈 변경할 때 마진 없이 꽉참. 항상 width가 100% css에서 여유 공간을 따로 설정할 수 있어 통제가 가능하다. 전체 화면에서 여유 공간주기 내용물들을 큰 박스에 담아 container-fluid를 먼저 주고 나서 css에서 여백 크기를 조절하면 전체 여유 공간 조절하기에 편하다. css에서 위아래, 양옆으로 패딩주기 Boo.. 2021. 7. 11. Bootstrap] 반응형 만들기 Grid Layout system 반응형이란? 데스크탑-> 태블릿-> 모바일 화면 사이즈가 바뀔 때 화면 배열도 바뀌는 것을 말한다. Bootstrap은 반응형을 만들기 쉽다. 반응형 예시 데스크탑 화면 - 사진 4개 나옴 태블릿 화면 - 사진 3개 나옴 폰 화면 - 사진 2개 나옴 코딩하기 html head에 bootstrap을 연결해준다. bootstrap 홈페이지에 들어가 Get Startd에 들어가면 나오는 아래 내용을 html head에 넣는다. 클래스를 col로만 주었을 때 element 넣은 갯수 만큼 알아서 균등하게 자리를 차지한다. 화면을 줄여도 사이즈는 변하지만 아래줄로 떨어지는 것 없이 그대로 같이 붙어 있는다. 화면을 줄였을 때 클래스를 col-숫자로 주었을 때 클래스를 col-6, col-4, col-3,, 등 c.. 2021. 7. 9. Bootstrap] 메뉴바 만들기 (네비게이션바) 메뉴바로 가기 부트스트랩에서 docs -> components -> navbar 들어가기 쭉 보면서 마음에 드는 메뉴바 선택한다. navbar(메뉴바) 만들기 navbar -> nav 선택 nav-item : 기본적으로 vertical로 설정되어 있음 navbar-expand : nav-item이 기본적으로 vertical로 설정되어있는 것을 가로로 바꿔줌. navbar-expand-lg : large 데스크탑 사이즈로 볼 때 메뉴가 가로로 다 보이고 화면 접으면 메뉴 햄버거 버튼으로 들어감. navbar-expand-md: medium 태블릿 사이즈까지 메뉴가 가로로 다 보이고 화면 접으면 메뉴 햄버거 버튼으로 들어감. navbar-expand-sm: small 폰 화면 사이즈까지 가로로 메뉴가 다보임.. 2021. 7. 8. Bootstrap 시작 Bootstrap 트위터에서 무료로 배포한 프리, 오픈 소스 Github에서 두번째로 많은 별을 받은 repository이다. Responsive 기기에 따라 보여 지는 화면 사이즈가 다르다. 그 화면 사이즈에 맞게 레이아웃이 변하는 것을 말한다. adaptable layout Pre-styled Elements 미리 만들어진 것을 복사 붙여넣기 해서 사용한다. Bootstrap 다운로드 https://getbootstrap.com/docs/5.0/getting-started/download/ 다운로드 받으면 dist 파일이 뜨고, 그 안에 보면 css, js 파일이 있다. css 파일에 들어가서 bootstrap.css를 vscode로 열면 이미 정해놓은 css 효과들을 볼 수 있다. 거기에 있는 클래.. 2021. 7. 6. 이전 1 다음
