반응형4 [CSS] 반응형 퀴즈 및 문제풀이(4문항) 레이아웃(Layout) See the Pen responsive Quiz Layout - multiple skin by Woojin Choi (@woojin-choi) on CodePen. 퀴즈 프로그래밍 할 일이 있어서 퀴즈 레이아웃을 CSS로 만들어 봤습니다. class만 바꾸면 되도록 여러가지 색깔별로 변경이 가능합니다. (그건 직접 테스트 해보세요.) 이미지를 원하는 url로 변경하셔서 사용하시면 됩니다. 2018. 12. 17. [HTML5/CSS3/jQuery] 반응형 상단에 광고 추가 가능한 헤더 템플릿(Template) - 밝은 빨강 계열 샘플 See the Pen responsive header template (red) by Woojin Choi (@woojin-choi) on CodePen. 밝은색의 경쾌한 상단 템플릿 예제입니다. 외국계 템플릿을 참고해서 반응형으로 한번 만들어 봤습니다. 구글 애드센스 하시는 분들을 위해 광고도 하나 넣었습니다. 2018. 12. 13. [bootstrap] 부트스트랩 사이드바 픽셀(px)로 고정된 반응형 레이아웃 그리드 보통 부트스트랩 반응형 그리드는 브라우저 창 너비가 줄어들면 사이드바도 같이 줄어드는데 사이드바는 줄어들지 않고 정해진 px로 고정돼 있으면서 내용 부분만 줄어드는 반응형 그리드 예제입니다. 참고로, 부트스트랩 3.0 이상에서만 동작한다고 합니다. 2018. 5. 26. CSS3의 미디어 쿼리를 이용하여 가로 박스가 창 크기에 따라 세로로 바뀌는 반응형 레이어 만들어보기 CSS3의 미디어 쿼리를 이용하여 가로 박스가 창 크기에 따라 세로로 바뀌는 반응형 레이어 만들어 보겠습니다. 소스 설명 반드시 사이에 위 meta 태그를 넣어 주셔야 합니다.@media (max-width: 500px) { .solid { display:block;} .dashed { display:block;} .dotted {display:block;} } 미디어쿼리가 사용되었구요. 브라우저 창이 최대 500px까지는 안의 상태를 유지하라는 뜻입니다. .solid { width:190px; height:190px; background-color:#cccccc; border:3px solid black; display:inline-block;} .dashed { width:190px; height:1.. 2015. 5. 15. 이전 1 다음
