퍼블리싱/HTML | CSS | Javascript (107) 썸네일형 리스트형 float를 해제하자, clearfix Float, 레이아웃 잡을때 마법의 요소다. 그런데 float를 사용하면 '없는 영역' 으로 간주하여 부모 요소의 height가 없어져버리는 경우가 있다..^^ 물론 부모 요소에 고정된 height값을 주면 바로 될 일 이지만 지금같은 반응형 시대에서 height에 고정값을 주는일은 뭐다?= 있을수 없는일... 고로 부모요소에 height를 주는 대신 float로 인한 레이아웃 오류를 잡을수 있는 clearfix를 하면 된다. CSS 4 5 6 7 8 9 10 11 12 13 14 15 16 .clearfix{ *zoom:1; } .clearfix:after{ content: ''; display: block; clear: both; } cs 먼저 .clearfix라는 클래스를 정의해주자. 그리고 나서 .. 항상 화면 하단에 고정되는 footer HTML 1 2 3 4 브라우저 아래에 고정되는 footer부분 Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 #footer { position:fixed; left:0px; bottom:0px; height:60px; width:100%; background:#EE7785; color: white; } #footer p { text-align: center; } cs min-height 크로스브라우징 1 2 3 4 5 6 .minheight { min-height: 240px; height:auto !important; height: 240px; background: #D499B9; } cs 투명도 설정 크로스브라우징 HTML 1 2 안녕하세요 :D Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 .transparent{ width: 100%; max-width: 368px; height: 261px; margin: 0 auto; } .transparent img{ background: #f2f2f2; filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } Colored by Color Scri.. 텍스트의 첫 글자만 크게하기 HTML 1 2 3 4 5 6 7 Lorem ipsum dolor sit amet, mei assum gloriatur in, cu pro labore equidem expetendis. His tota facilis maluisset no, ius et dolorum conclusionemque, nec agam liber nusquam ei. Eum offendit placerat ut, sit eripuit corpora moderatius at. An qui possim dolorem persequeris, pri incorrupte eloquentiam ullamcorper ei. Ut amet posse cum, labitur definitiones ea vix. Colored by Color.. 텍스트/이미지 상하좌우 중앙정렬 HTML과 CSS만을 이용하여 상하좌우 중앙정렬 하기. * 텍스트 HTML 1 2 3 4 5 6 7 8 9 10 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Colored by Color Scripter cs XC - CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .box{ width: 100%; max-width: 640px; height: 240px; margin: 2rem auto; background: #eee; } .vc{ text-align: center; position: rela.. 그라데이션, 마우스오버효과 button에 css만을 이용하여 그라데이션 효과와 마우스 오버 효과를 넣는 코드! HTML 1 2 3 cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 div { width: 320px; max-width: 100%; margin: 0 auto; padding: 2rem; } button { width: 320px; max-width: 100%; height: 240px; margin: 0 auto; background-image: linear-gradient(#df3b65, #2B2E4A); background-size: auto 200%; background-position: 0 100%; transition: background-posit.. 이전 1 ··· 3 4 5 6 다음