CSS, Javascript, jQuery (135) 썸네일형 리스트형 부트스트랩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이.. flex-box 자식요소에게 지정하는 속성들 flex-box 부모요소에게 지정하는 속성 em과 rem의 차이점 css에서 변수의 활용 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 carousel 이전 1 2 3 4 ··· 17 다음
