본문 바로가기

CSS33

[HTML5/CSS3/jQuery] 반응형 상단에 광고 추가 가능한 헤더 템플릿(Template) - 밝은 빨강 계열 샘플 See the Pen responsive header template (red) by Woojin Choi (@woojin-choi) on CodePen. 밝은색의 경쾌한 상단 템플릿 예제입니다. 외국계 템플릿을 참고해서 반응형으로 한번 만들어 봤습니다. 구글 애드센스 하시는 분들을 위해 광고도 하나 넣었습니다. 2018. 12. 13.
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.
HTML5와 CSS3로 만드는 드롭다운 네비게이션 메뉴 HTML5 + CSS3로 만들어진 드롭다운 네비게이션 메뉴입니다. style 부분에 주석으로 간단하게 설명이 돼 있으니 자세한 설명은 생략합니다. 소스만 참고하시고 필요한 곳에 알맞게 변경하여 사용하시면 됩니다. 2014. 11. 27.