분류 전체보기
-
1. 다른 사이트 레이아웃 따라 그리기공부 2019. 12. 3. 05:58
내가 자주 이용하는 유머사이트 개드립.net 레이아웃을 따라 그려봐야겠다. 일단 눈에 보이는 것들 1. navbar 2. 플렉스 항목으로 구성된 게시판 글들 3. footer에 적힌 내용들 반응형 1. 1290px에 한번 1컬럼으로 변하는데 별 필요없어보임 2. 1050px에 2컬럼 navbar에 메뉴가 사라짐 3. 950px에 다시 1컬럼 4. 640px에 나브바 브랜드 이미지가 줄어듬 5. footer에는 메뉴가 인라인으로 되어있어 줄줄이 소세지처럼 움직임 대강 비슷하게는 만들었는데 생각보다 부트스트랩에 있는걸 수정하면서 쓰려니 불편했다. 부트스트랩을 사용하려면 제공하는 컴포넌트와 유틸리티를 그대로 사용하는 방향으로 제작해야겠다. 그리고 애니메이션 같은 움직임은 나중에 js를 배워서 해야겠다
-
부트스트랩.css 알아보기공부 2019. 12. 2. 03:39
부트스트랩은 HTML, CSS, JS 프레임워크로 주어진 제작자가 만든 틀에 맞추어 사용자가 사용해야 된다. 즉 라이브러리보다 자유도 낮은 게임이라도 생각하면 되겠다. CSS속성을 class="부트스트랩속성명"으로 사용하면 된다. 만약 수정하고 싶은 부분이 있다면 따로 기존 부트스트랩 css파일보다 밑에 링크에 사용하면 된다. 부트스트랩이 제공하는 css파일은 총 3종류로 grid, bootstrap, reboot이 있다. 플렉서블 박스 레이아웃을 제공하는 grid 모든 css를 제공하는 bootstrap content에서 태그 선택자만 사용한 css를 제공하는 reboot이 있다. 모든 bootstrap css파일 Layout, Content, Components, Utilities 4가지를 제공한다...
-
3. 부트스트랩 grid system공부 2019. 12. 1. 20:22
부트스트랩은 모바일 우선 플렉서블박스 그리드를 사용한다. (mobile-first flexbox) wrap인 .container 내부에 마치 테이블을 만들듯이 사용한다. .container를 table로 생각하고 .container 내부에 .row로 만들고 .row 내부에 .col을 만들면 된다. 아주 쉽다. .col도 .container와 마찬가지로 미디어커리를 사용해 breakpoint를 만들어놨다. .container는 breakpoint를 만나면 픽셀에 맞춰 커지지만 .col은 최대 너비가 제한된다. 강제로 하나의 row에서 줄바꿈 .w-100 한 줄에는 총 12개의 플렉스 항목이 들어갈수 있다. .col-1~12까지 설정가능하고 1이면 한줄에 1/12 자리만큼 차지한다. auto도 가능한데 co..
-
2. 부트스트랩 Layout 공부하기공부 2019. 12. 1. 17:12
default grid .container 고정된 너비의 컨테이너 .container-fluid 꽉찬 너비의 컨테이너 .container-{breakpoint} fluid와 꽉채우는 건 비슷하지만 breakpoint를 최대너비로 함 미디어쿼리를 이용해 조절 sm 576px md 768px lg 992px xl 1200px 미디어쿼리 @media (min-width: 540px) and (max-width: 719.98px) {...} Z-index $zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; $zindex-modal-backdrop: 1040 !default; $zindex-moda..
-
1. 부트스트랩 Navbar 구경하기공부 2019. 12. 1. 01:32
https://getbootstrap.com/docs/4.4/examples/navbars/ Navbar Template · Bootstrap Navbar examples This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a .container. For positioning of navbars, checkout the top and fixed top examples getbootstrap.com Never expand navbar를 따라 만들어보자. 일단 css를 쭉 살펴봐..
-
아두이노 보드 전압계로 쓰기공부 2019. 11. 28. 17:21
건전지 전압을 알아내자 아두이노 보드는 0~5볼트까지 전압을 측정할 수 있다. 주의! 5볼트 넘어가면 고장날 수도 있음 준비물 : 아두이노 보드+usb케이블, 스케치 프로그램, 케이블 2가닥, 측정할 건전지 1. 준비 하기 스케치 프로그램을 설치 https://www.arduino.cc/en/Main/Software Arduino - Software By downloading the software from this page, you agree to the specified terms. THE ARDUINO SOFTWARE IS PROVIDED TO YOU "AS IS" AND WE MAKE NO EXPRESS OR IMPLIED WARRANTIES WHATSOEVER WITH RESPECT TO ITS..