본문 바로가기

CSS, Javascript, jQuery/information

(23)
부트스트랩4를 이용한 실제예제 /*4.캐로셀 안의 이미지 사이즈를 동일하게 맞추기 위해서 img태그를 삭제하고 .carousl-item에 이미지를 css로 넣고 코딩으로 사이즈를 맞춤*/ /*6.캐로셀 안에 캡션대신 넣은 이미지 위치 맞추기*/ /*7.캐로셀의 컨텐츠의 가시성을 돋보이도록 캐로셀 배경 이미지를 어둡게 처리*/ /*9.캐로셀의 prev, next버튼을 처음에는 안보이다가 캐로셀 컨텐츠에 마우스를 올리면 나타나도록 설정*/ /* 10.캐로셀의 prev, next의 위치가 화면 밖으로 조정되면서 overflow되어 스크롤이 생기는 현상을 없애기 위해 설정*/ /*11.캐로셀의 prev, next버튼 호버시 색상 바꾸기*/ /*12.캐로셀 하단 인디케이터 버튼 활성화시 스타일 변경*/ /*16.loading img위치 잡기*..
bootstrap4 부트스트랩3에서 부트스트랩4로 버전업이 되면서 바뀐 변화 1)스크린 사이즈가 재정의 2)Flexbox 사용가능 3)그리드 단위가 px->em(포토샵 소스 작업시 유의), 미디어쿼리도 px->em, 폰트단위도 rem을 사용 4)글리피콘 미지원->open source인 SVG를 icons으로 활용 5)일부 클래스명의 변화(.panel, .well 없어지고 .cards 새로생김, .table-condensed->.table-sm으로 변경 등..) 6)Tooltip 및 popovers의 기능향상(자동배치) 그리드 시스템은 한 요소가 차지할 크기를 해상도별로 따로 지정해줄 수 있는데 부트스트랩4에서 사용하는 그리드 시스템의 클래스명은 col-xl-*, col-lg-*, col-md-*, col-sm-*, col이..
scrollspy, tooltip, affix scrollspy 스크롤스파이는 스크롤이 긴 페이지에서 유저가 길을 잃지 않게 도와주는 역할을 한다. 기본 사용방법 네비게이션의 a태그의 href속성값으로 #id명 을 주고 각 해당하는 영역의 div에 id=“id명”을 추가한다. 데이터속성을 활용하여 scrollspy구현하는 방법 body의 스타일로 position:relative를 주고 body태그에 data-spy=“scroll”을 추가하고 data-target의 속성값으로 .nav요소의 부모 id명 혹은 클래스명을 추가한다. 자바스크립트를 활용하여 scrollspy구현하는 방법 body의 스타일로 position:relative를 주고 자바스크립트 코드로 $('body').scrollspy({ target: '.nav요소의 부모 id명 혹은 클래스..
bootstrap 여러가지 속성들 tabs tabs는 tab형과 pills형(알약형)이 있다 ul태그 li안의 a태그가 가지고 있는 #id명과 div.tab-pane요소의 id명을 일치시키면 서로 연결되어 동작한다. 양쪽으로 정렬된 tabs를 만들려면 ul 클래스에 nav-justified클래스를 추가하면 된다. 수직형 tabs를 만들려면 ul클래스에 nav-stacke클래스를 추가하면 된다. navbar container-fulid클래스명을 container로 변경해서 nav안의 컨텐츠 좌우로 여백을 줄 수 있다. navbar를 navbar-fixed-top을 주어 상단에 고정시켰을 때에는 상단의 navbar 다음의 컨텐츠가 밑에 내려가서 보이지 않으므로 body태그에 padding-top을 넣어서 컨텐츠의 위치를 아래쪽으로 내려준다...
bootstrap 다양한 스타일 다양한 테이블 스타일과 폼태그 스타일 1)부트스트랩에서는 다양한 테이블 스타일을 지원하는데 태그에 약간의 패딩과 수평 구분선이 있는 기본 스타일을 만들려면 .table클래스를 추가한다. 2)반응형 테이블을 만들려면 table태그를 div로 감싸고 .table-responsive클래스를 추가한다. 3)입력창에 스타일을 주려면 form-group클래스명에 has-스타일이름 클래스명을 넣어준다. 4)레이블태그에 class="control-label"을 부여하면 form-group이 가지고 있는 스타일을 따라간다. 5)인라인 형식의 폼 스타일을 만들기 위해서는 form태그에 .form-inline클래스명을 추가해준다. 다양한 버튼 스타일 버튼을 생성하는 태그로는 a, button, input태그가 있다. 버튼의..
부트스트랩 그리드시스템 부트스트랩 웹 프론트엔드 개발 프레임워크 "트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 css의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리이다" 장점 -자주 사용하는 내용들을 간편하고 손쉽게 사용가능 -틀이 규격화되어 있어 다른 사람과 디자인 공유가 쉬움 단점 -이미 정의해놓은 정형화된 틀에 맞추어서 작업해야 하므로 복잡하게 꾸미거나 수정하기 힘듬 -다른 css와 중복되거나 클래스가 꼬일 수 있으므로 주의해야함 -부트스트랩만 믿고 디자인에 소홀해지거나 나태해 질 수 있음 핵심 요소 CSS / GRID SYSTEM / 컴포넌트 / JAVASCRIPT PLUGIN GRID SYSTEM 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템 (총 12분할) -한요소가 차지할 크기를 ..
구글맵 활용, draggable, droppable 구글맵의 활용 center: { lat: 48.85, lng: 2.35 }, //latitude: 위도, longitude: 경도 //구글맵에서 내가 원하는 위치를 검색후 url에서 3d옆의 값이 위도, 4d옆의 값이 경도 zoom: 12 //확대크기 버튼 누른 횟수 /*mapTypeId: 'satellite'//위성뷰*/ /*mapTypeId: 'terrain'//지형정보+로드맵*/ /*mapTypeId: 'hybrid'//위성뷰+로드맵*/ mapTypeId: 'roadmap'//기본도로지도:기본값 draggable 마우스를 사용하여 요소를 이동할 수 있다. Auto-scroll 드래그 가능 항목이 뷰포트 밖으로 이동할 때 문서를 자동으로 스크롤 한다. 자동 스크롤을 활성화하려면 옵션을 true로 설정..
accordion, tooltip, autocomplete 위젯에서 위치를 제어하려면 position 매개변수를 활용 position my(top, bottom, left, right, center) - 자신의 위치 at(top, bottom, left, right, center) - 기점이 되는 요소 상의 위치 of - 기점이 되는 요소(셀럭터식, jquey요소) collision - 화면에서 넘치는 경우의 처리 daialog : 간단한 대화상자 구현 window.open 메소드 활용법 Url부분이 생략되면 빈화면이 뜨고, 이름 부분이 생략되면 계속 새 창으로 뜨ㅜㄴ다. 속성부분에는 width, height, top, left등의 속성값이 들어간다. 부모창안에서 url로 이동하고 싶다면 _self를 사용한다. Default값은 _blank이다. 해당 윈도우 창..