layout3 [CSS] 반응형 퀴즈 및 문제풀이(4문항) 레이아웃(Layout) See the Pen responsive Quiz Layout - multiple skin by Woojin Choi (@woojin-choi) on CodePen. 퀴즈 프로그래밍 할 일이 있어서 퀴즈 레이아웃을 CSS로 만들어 봤습니다. class만 바꾸면 되도록 여러가지 색깔별로 변경이 가능합니다. (그건 직접 테스트 해보세요.) 이미지를 원하는 url로 변경하셔서 사용하시면 됩니다. 2018. 12. 17. [jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) See the Pen [jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) by zzzznara (@zzznara) on CodePen. 3단 레이아웃일 경우, 상단/좌측하단/우측하단 이렇게 구분이 되는데요. 이미지나 내용이 많을 경우 좌측하단과 우측하단의 높이가 일치하지 않는 문제가 생깁니다. 이럴 때 사용하면 좋을 것 같네요~ 예제에서 처음 화면이 열릴 때 좌우측 하단의 높이가 다릅니다. 좌측하단 높이 : 300px 우측하단 높이 : 100px 하지만, setTimeout() 함수로 2초 후에 equalHeights() 함수를 호출하여 높이를 같게 해줍니다. 물론, 실제 레이아웃 등에 사용할 때는 setTimeout() 함수는 필요없으므로 제거하시면 됩니다... 2018. 6. 10. [bootstrap] 부트스트랩 사이드바 픽셀(px)로 고정된 반응형 레이아웃 그리드 보통 부트스트랩 반응형 그리드는 브라우저 창 너비가 줄어들면 사이드바도 같이 줄어드는데 사이드바는 줄어들지 않고 정해진 px로 고정돼 있으면서 내용 부분만 줄어드는 반응형 그리드 예제입니다. 참고로, 부트스트랩 3.0 이상에서만 동작한다고 합니다. 2018. 5. 26. 이전 1 다음