분류 전체보기
-
Javascript innerWidth, innerHeight, outerWidth, outerHeightDEV/javascript 2022. 6. 4. 17:27
Javascript로 브라우저 가로, 세로(높이, 넓이) 값 구하는 방법 // window 대신 parent, self 등 사용 가능 (뷰포트 또는 프레임 접근) const innerW = window.innerWidth; const innerH = window.innerHeight; const outerW = window.outerWidth; const outerH = window.outerHeight;
-
Bootstrap 부트스트랩 Grid 사용하기 3 : 반응형 Grid 구성DEV/javascript 2022. 5. 3. 21:14
부트 스트랩을 이용하여 화면 분할 방법 (Container 및 Grid를 이용하여 반응형으로 화면을 만들어보자) 3. Grid (반응형) 간단한 col, row 응용과 반응형 화면을 구성해 보았다. 코드를 보면 충분히 쉽게 이해가 가능하다. 첫 번째 row 와 두 번째 row는 숫자와 실제 화면 위치를 잘 생각해 보자. 1 2 3 4 5 6 7 8 1, 2, 3번 DIV 위치와 코드를 잘 생각해 보면 감이 올 것이다. 세 번째 row와 네 번째 row는 조금 다름을 알 수 있다. 반응형 구성을 위해 .col 뒤에 -sm을 추가 하였다. (물론 .col-sm-4 와 같은 방식도 사용이 가능하다.) sm 옵션에 대한 설명은 bootstrap 페이지에 잘 서술되어 있다. sm은 컨테이너가 576px(width..
-
Bootstrap 부트스트랩 Grid 사용하기 2 : Grid (Row, Col)DEV/javascript 2022. 5. 3. 20:53
부트 스트랩을 이용하여 화면 분할 방법 (Container 및 Grid를 이용하여 반응형으로 화면을 만들어보자) 2. Grid (Row, Col) Bootstrap에서는 편리한 화면 구성을 위해 그리드 시스템을 제공한다. Boostrap은 총 12 분할을 기준으로 화면 구성을 지원한다. 하단 코드와 그림을 보면 한 번에 이해가 가능할 것이다. (container는 container-fluid를 사용했다.) Bootstrap 에서는 (col-4) 12칸 분할을 기준으로 (col-4) 합니다. (col-4) 총 너비인 12칸을 (col-3) 넘는 경우에는 (col-6) 다음 줄로 넘어갑니다. (col-3) 다음과 같이 (col-2) 사용 또한 (col, 남는 자리 자동 할당) 가능합니다.. (col-3) ...
-
Bootstrap 부트스트랩 Grid 사용하기 1 : ContainerDEV/javascript 2022. 5. 3. 20:31
부트 스트랩을 이용하여 화면 분할 방법 (Container 및 Grid를 이용하여 반응형으로 화면을 만들어보자) 1. Container 우선 화면의 콘텐츠를 분할을 하기 전에 해당 콘텐츠를 담을 Container에 대해 간단하게 알아보자. 우선 높이 250px의 두 가지 div를 생성했다. 제 노트북 기준으로 1320x250 사이즈의 녹색 Div 하나, 1440x250 사이즈의 회색 Div 하나 총 두 가지 Div가 생성되었다. 나는 width 값을 지정하지 않았지만 위와 같은 값이 지정되었다. 그 이유는 무엇일까? 나의 노트북 해상도(브라우저의 크기) 기준 container는 1320px(width) 고정 값 생성 후 중단 고정, container-fluid는 화면의 100%를 사용한다. 가변적으로 변..