css 미리보기 이미지

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2397 2397

미리보기 이미지

이 border속성을 사용하여 축소판 이미지를 만듭니다.

예

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

width: 150px;

}

[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

width: 150px;

}

</style>

</head>

<body>

<h2>Thumbnail Images</h2>

<p>Use the border property to create thumbnail images:</p>

</body>

</html>

예

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

width: 150px;

}

img:hover {

box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

}

</a>

[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

width: 150px;

}

img:hover {

box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

}

</style>

</head>

<body>

<h2>Thumbnail Image as Link</h2>

<p>Use the border property to create thumbnail images. Wrap an anchor around the image to use it as a link.</p>

<p>Hover over the image and click on it to see the effect.</p>

</a>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
737	CSS	모바일웹 폰트사이즈? px? em?	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	16453
736	HTML	html5 멋진 사이트 1곳 [2]	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	7100
735	CSS	overflow 속성	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	5795
734	CSS	border 속성에도 기본값이라는게 있습니다.	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4523
733	CSS	position:fixed 에 대한 것입니다. [1]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6778
732	HTML	DNS 미리 뚫고 페이지 속도 빠르게 하기 [1]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4716
731	CSS	CSS : box-shadow, 박스 쉐도우(그림자) [펌]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	9436
730	기타	목적에 따른 웹페이지 이동 설명	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3484
729	HTML	디바이스별 해상도 확인 [1]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	7650
728	기타	호환성모드 오류(?)처리 (X-UA-Compatible) [5]	LaRuota 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6802
727	기타	jQuery로 동작하는 페이지 로딩바 [7]	우산11 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	11471
726	기타	dpi 환산표(?)	LaRuota 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	5475
725	기타	px to em 또는 em to px	네이비칼라 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4382
724	CSS	서버에 등록되어 있는 폰트 사용하기 [1]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4889
723	CSS	[1원짜리팁] div나 span 등 에서 수직 정렬 두번째이야기 [5]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	6607
722	CSS	[1원짜리팁] div 나 span 등에 tag에서 수직 정렬하기 [2]	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	17072
721	CSS	에디터(cheditor) 외부의 css 적용 [1]	매직크레용 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	7160
720	기타	에딧플러스에서 HOME 키 설정 [2]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3763
719	기타	X-UA-Compatible 서버에서 설정하기 [4]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	7326
718	CSS	LESS 사용 시 에디트플러스에서 CSS 설정 및 구문강조 사용하기 [9]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	10516
717	반응형	N스크린 개발에 유용한 framework enquire.js [3]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6133
716	반응형	반응형 웹 작업 시 mouseover click 분기 팁 [20]	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	14554
715	기타	모바일, 반응형 웹 작업시 필요할듯... [17]	조박사님 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	7320
714	CSS	CSS 자료 링크 [4]	세븐데이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5039
713	반응형	브라우저 가로사이즈에 반응하여 css로 균등한 간격으로 정렬하기~_~ [10]	스아이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	30115
712	기타	파이어폭스로 작업하는 분들에게 팁! [6]	세븐데이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5273
711	HTML	네이버 지도를 이용해 만든 레이아웃입니다. [19]	kiplayer 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	10878
710	CSS	IE7에서 float:right 버그에 관한 초간단 팁. [10]	블랙스완 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	15282
709	웹접근성	웹 표준과 접근성, 그리고 크로스브라우징2 [6]	블랙스완 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6733
708	웹접근성	웹 표준과 접근성, 그리고 크로스브라우징1 [2]	블랙스완 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	6051