분류 전체보기 (224) 썸네일형 리스트형 투명도 설정 크로스브라우징 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 ··· 9 10 11 12 다음