부트스트랩140 [Bootstrap] 부트스트랩으로 만든 Adsense 광고가 포함된 퀴즈/문제 템플릿 예제 샘플 See the Pen responsible quiz/question template with adsense by Woojin Choi (@woojin-choi) on CodePen. 부트스트랩과 CSS로 만든... 광고를 포함한 퀴즈/문제(4문항) 템플릿입니다.개인적으로 사용할데가 있어서 만들어 봤습니다. 2018. 12. 18. [Bootstrap] 부트스트랩 토글 버튼 - 클릭시 서로 색상이 바뀌는 예제 샘플 See the Pen bootstrap toggle button - color change by Woojin Choi (@woojin-choi) on CodePen. 클릭시 버튼 색상이 서로 바뀌는 예제입니다. 단순히 active 클래스만 변경되는 게 아님. 2018. 12. 17. [Bootstrap] 부트스트랩과 CSS로 이미지 위에 글자 보여주고 overlay되게 하기 See the Pen Bootstrap/CSS transparent text on image by Woojin Choi (@woojin-choi) on CodePen. 부트스트랩과 CSS 이용해서 브라우저 크기 조절하면 이미지가 브라우저 크기에 맞게 바뀝니다. 이미지 위에 반투명으로 글자가 보이고 마우스를 이미지 위에 올리면 글자가 이미지 전체에 overlay 됩니다. 2018. 12. 17. [Bootstrap] CSS만 사용해서 하단(footer) 고정 레이어 샘플 예제 (부트스트랩용 샘플) See the Pen bottom fix footer - bootstrap by Woojin Choi (@woojin-choi) on CodePen. 하단 고정 레이어 여러가지 방법이 있는데요. 부트스트랩으로 템플릿을 만들어야해서 부트스트랩 class를 사용해서 만들어 봐야겠습니다. 부트스트랩의 기능으로 하단을 고정시킨 건 아닙니다. CSS로만 화면 하단에 고정시켰습니다. 2018. 12. 13. [bootstrap] 부트스트랩 사이드바 픽셀(px)로 고정된 반응형 레이아웃 그리드 보통 부트스트랩 반응형 그리드는 브라우저 창 너비가 줄어들면 사이드바도 같이 줄어드는데 사이드바는 줄어들지 않고 정해진 px로 고정돼 있으면서 내용 부분만 줄어드는 반응형 그리드 예제입니다. 참고로, 부트스트랩 3.0 이상에서만 동작한다고 합니다. 2018. 5. 26. [bootstrap] 부트스트랩 – 100%(full-width) 내비게이션 메뉴바 [냅바(navbar)] 100% 내비게이션 메뉴바 샘플 소스입니다. 기존의 부트스트랩 navbar는 100%는 아녔죠. 디자인도 좀 입혔습니다. [새창으로 보기] 클릭해서 확인해 보세요~ 2018. 5. 19. [bootstrap] 부트스트랩 – 내비게이션 메뉴바 [냅바(navbar)] – 전체 너비로 확장 body { min-height: 2000px; padding-top: 70px; } 부트스트랩 기본 내비게이션 메뉴바에 위 css 소스만 추가하면 됩니다. [새창으로 보기] 클릭해서 확인해 보세요. 2018. 5. 19. [bootstrap] 부트스트랩 – 전체 너비 내비게이션 메뉴바 [냅바(navbar)] & 검색입력창(searchbox) 부트스트랩 전체너비 내비게이션 메뉴바입니다. 그리고, 검색입력창(searchbox)가 들어 있는 샘플입니다. [Edit in jsfiddle] 클릭해서 확인하세요. 2018. 5. 11. [bootstrap] 부트스트랩 – 전체 너비 내비게이션 메뉴바 [냅바(navbar)] & 검색입력창(searchbox) [검은색 테마] 부트스트랩 전체 너비 내비게이션 메뉴바 검은색 테마입니다. 2018. 5. 11. [bootstrap] 부트스트랩 – 어픽스(Affix) 웹페이지에서 스크롤함에 따라 어떤 요소를 고정 요소로 전환하는 기능을 하는 플러그인입니다. 스크롤에 따라 메뉴가 하이라이트 되는 스크롤스파이(Scrollspy)와 비슷한 기능을 하지만 스크롤스파이는 보다 작은 규모의 콘텐츠에 사용되고 자체적으로 스크롤바가 나타납니다. 두 가지를 병합해 사용할 수도 있습니다. 이 기능을 추가하면 사이트 상단과 하단을 기준으로 일정한 거리만큼 스크롤 했을 때 지정된 요소의 위치를 고정(fixed)시키거나 원래의 위치로 복구하는 역할을 합니다. Learn more » a 태그에 데이터 속성으로 data-spy=”affix”와 data-offset-top=”300″, data-offset-bottom=”600″을 추가합니다. data-spy=”affix”는 어픽스 기능을 활성화.. 2016. 2. 8. [bootstrap] 부트스트랩 – 이미지 슬라이딩 [캐러젤(Carousel)] 부트스트랩의 캐러젤은 이미지 슬라이드 기능을 하는 플러그인입니다. 슬라이드 애니메이션을 위해 CSS3의 규칙을 사용하므로 IE9 버전 이하에서는 애니메이션 효과가 없습니다. 가장 바깥쪽의 div에는 id를 추가합니다. 이 아이디는 .carousel-indicators 내부에 있는 li 태그와 슬라이드 내비게이션 버튼의 타겟이 됩니다. 따라서 여러 개의 캐러젤을 만들려면 이 아이디를 다르게 해야 합니다. 스타일과 슬라이드를 위해 .carousel, .slide 선택자가 추가돼 있습니다. 자바스크리브로 작동하므로 data-ride=”carousel”이 있어야 합니다. ol 태그의 캐러젤 인디케이터는 슬라이더 하단의 불릿으로 클릭하면 해당 순서의 슬라이드가 나타나는 내비게이션 역할도 합니다. data-slid.. 2016. 2. 8. [bootstrap] 부트스트랩 – 간단한 콜랩스(Collapse) 어코디언이나 내비게이션에 같은 구성요소를 만들 수 있습니다. 우선 간단한 콜랩스를 만들어 보겠습니다. button 태그에 data-toggle=”collapse”가 포함돼 있고 타겟으로 demo가 있으며 이것은 콘텐츠 영역에 있는 div의 id와 일치합니다. .in을 제거하면 처음으로 닫힌 상태가 됩니다. 버튼뿐만 아니라 a 태그를 사용할수도 있습니다. Simple collapsible Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla.. 2016. 2. 8. [bootstrap] 부트스트랩 – 여러 개의 콜랩스(Collapse) 여러 개의 콜랩스가 서로 연동되게 만들려면 구성요소의 패널을 사용하며 가장 바깥쪽의 div에 .panel-group 선택자와 id를 추가합니다. 이 아이디(accordion)는 .panel-heading에 있는 a 태그의 data-parent 속성 값과 연결되며 이 링크를 클릭하면 패널의 콘텐츠가 닫히거나 열리고, 닫힌 곳을 클릭하면 이미 열린 곳은 닫히는 토글 기능이 기본으로 돼 있습니다. 다시 각 a 태그에 있는 href 속성 값은 콘텐츠 영역에 있는 id와 연결됩니다. 콘텐츠 영역의 개폐는 자바스크립트를 사용하므로 data-toggle=”collapse” 속성이 포함돼 있습니다. 콘텐츠 영역의 클래스 선택자로 .collapse가 있는데 .in이 포함되면 열린 상태가 됩니다. 여기서는 첫번째 콘텐츠 .. 2016. 2. 8. [bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 클릭해서 버튼명 변경하기 data 속성을 data-complete-text=”Complete!”으로 변경하는 소스입니다. 2016. 2. 8. [bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 라디오 버튼 부트스트랩으로 라디오버튼을 버튼처럼 만들 수 있습니다. 라디오를 그룹으로 만들고 .btn-group 선택자가 있는 div에 data-toggle=”buttons” 속성을 추가합니다. 처음부터 눌린 상태로 만들려면 label에 .active 선택자를 추가하고 input에 checked 속성을 추가합니다. 2016. 2. 8. 이전 1 2 3 4 ··· 10 다음