ecdos + blog

CSS 이미지 겔러리 Image Gallery

CSS/Examples 2009/06/16 14:13

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Image Gallery

다음은 이미지 갤러리를 CSS로 만들어집니다 :

Image gallery

소스 코드는 다음과 같이 보입니다 :

<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

(0)

(0)

TAG CSS

받은 트랙백이 없고, 댓글이 없습니다.

CSS Pseudo-elements

CSS/Examples 2009/06/16 14:09

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Make the first letter special
이 예제에서는 텍스트의 첫 글자에 특수 효과를 추가하는 방법을 보여줍니다.

Make the first line special
이 예제에서는 텍스트의 첫 번째 라인에 특수 효과를 추가하는 방법을 보여줍니다.

Make the first letter and first line special
이 예제에서는 첫 글자를하고 텍스트의 첫 번째 라인은 특수 효과를 추가하는 방법을 보여줍니다.

Use :before to insert some content before the content of an element (Does not work in IE)
이 예제는 어떻게 사이비 전에 : 사용하도록 - 요소 요소를하기 전에 이미지를 삽입하는 방법을 보여줍니다.

Use :after to insert some content after the content of an element (Does not work in IE)
이 예제는 어떻게 사이비 후 : 사용하도록 - 요소 요소 후 이미지를 삽입하는 방법을 보여줍니다.

Pseudo-elements

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C의 : "W3C의"열에있는 숫자는 CSS를 추천 재산 (CSS1 또는 CSS2 정의됨)을 나타냅니다.

Pseudo-element	Purpose	IE	F	N	W3C
:first-letter	Adds special style to the first letter of a text	5	1	8	1
:first-line	Adds special style to the first line of a text	5	1	8	1
:before	Inserts some content before the content of an element		1.5	8	2
:after	Inserts some content after the content of an element		1.5	8	2

(0)

TAG CSS

받은 트랙백이 없고, 댓글이 없습니다.

CSS 의사-클래스 Pseudo-classes

CSS/Examples 2009/06/16 14:06

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Hyperlink
이 예제에서는 하이퍼 링크를 문서에 서로 다른 색상을 추가하는 방법을 보여줍니다.

Hyperlink 2
이 예제에서는 하이퍼 링크에 다른 스타일을 추가하는 방법을 보여줍니다.

Hyperlink: use of :focus (does not work in IE)
이 예제에서는 하이퍼 링크에있는 : 의사 - 클래스를 사용하는 방법을 보여줍니다.

:first-child - change first child <p>
이 예제는 파란색으로 어떤 요소의 첫 번째 아이는 어떤 <p> 요소를 설정합니다.

:first-child - change first child <i> in all <p> elements
이 예제는 첫 세트를 <i> 모든 요소 <p> 요소 파란색.

:first-child - change all <i> elements in first child <p>
이 예제에서 첫 번째 자식 요소가 <i> 요소 <p> 파란색을 설정합니다.

:lang (does not work in IE)
이 예제의 사용 : lang 의사 - 클래스를 보여줍니다.

Pseudo-classes

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C의 : "W3C의"열에있는 숫자는 CSS를 추천 재산 (CSS1 또는 CSS2 정의됨)을 나타냅니다.

Pseudo-class	Purpose	IE	F	N	W3C
:active	Adds special style to an activated element	4	1	8	1
:focus	Adds special style to an element while the element has focus	-	1.5	8	2
:hover	Adds special style to an element when you mouse over it	4	1	7	1
:link	Adds special style to an unvisited link	3	1	4	1
:visited	Adds special style to a visited link	3	1	4	1
:first-child	Adds special style to an element that is the first child of some other element	7	1	7	2
:lang	Allows the author to specify a language to use in a specified element	-	1	8	2

(0)

TAG CSS

받은 트랙백이 없고, 댓글이 없습니다.

CSS 포지셔닝 Positioning

CSS/Examples 2009/06/14 19:07

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Examples

Position:relative
이 예제에서는 요소의 정상적인 위치에 상대적인 위치를 보여줍니다.

Position:absolute
이 예제에서는 절대적인 가치를 사용하는 요소 위치를 보여줍니다.

Position:fixed
이 예제에서는 브라우저 창에있는 요소에 상대적인 위치를 보여줍니다.

Set the shape of an element
이 예제는 요소의 모양을 설정하는 방법을 보여줍니다. 이 요소를이 모양으로 오려낸 및 표시됩니다.

How to show overflow in an element using scroll
이 예제는 스크롤 막대를 할 때 어떻게하는 요소의 콘텐츠가 너무 크다는 지정된 지역에 맞게 만들기 위해 오버플로 속성을 설정하는 방법을 보여줍니다.

How to hide overflow in an element
이 예에서는 지정된 경우도 지역에 맞는 컨텐츠를 숨기기 위해 크고 오버플로우 속성을 설정하는 방법을 보여줍니다.

How to set the browser to automatically handle overflow
이 예제는 어떻게 오버플로 처리하기 위해 자동으로 브라우저를 설정하는 방법을 보여줍니다.

Vertical alignment of an image
이 예제에서는 이미지의 텍스트에서 수직 정렬을 설정하는 방법을 보여줍니다.

Z-index
"뒤에"다른 요소 요소를 장소로 사용하실 수있습니다.

Z-index
위의 예제에있는 요소는 이제 그들부터 Z - 색인이 변경되었습니다.

Set the top edge of an image using a pixel value
이 예제에서는 요소의 맨 가장자리의 픽셀 값을 사용하여 설정하는 방법을 보여줍니다.

Set the left edge of an image using a percent value
이 예제에서는 요소의 왼쪽 가장자리 % 값을 사용하여 설정하는 방법을 보여줍니다.

CSS Positioning Properties

CSS를 포지셔닝 속성 왼쪽, 오른쪽, 상단, 하단에있는 요소의 위치를 지정할 수있습니다. 또한, 한 요소의 모양을 설정하는 또 다른 배후에있는 요소 장소, 어떤 때 요소의 지정된 영역에 맞는 콘텐츠가 너무 크다 일이 벌어지면를 지정할 수있습니다.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C의 : "W3C의"열에있는 숫자는 CSS를 추천 재산 (CSS1 또는 CSS2 정의됨)을 나타냅니다.

Property	Description	Values	IE	F	N	W3C
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length	5	1	6	2
clip	Sets the shape of an element. The element is clipped into this shape, and displayed	shape auto	4	1	6	2
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length	4	1	4	2
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto	4	1	6	2
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	4	1	4	2
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length	5	1	6	2
top	Sets how far the top edge of an element is above/below the top edge of the parent element	auto % length	4	1	4	2
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %	4	1	4	1
z-index	Sets the stack order of an element	auto number	4	1	6	2

(0)

TAG CSS

받은 트랙백이 없고, 댓글이 없습니다.

CSS 분류법 Classification

CSS/Examples 2009/06/14 15:14

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

How to display an element as an inline element.
이 예제는 인라인 요소로하는 요소를 표시하는 방법을 보여줍니다.

How to display an element as a block element
이 예제를 차단하는 방법을 요소로하는 요소를 표시하는 방법을 보여줍니다.

A simple use of the float property
이미지를 오른쪽으로 한 단락에 플로트 보자.

An image with border and margins that floats to the right in a paragraph
이미지를 오른쪽으로 한 단락에 플로트 보자. Boder와 이미지에 여백을 추가합니다.

An image with a caption that floats to the right
오른쪽으로 플로트 캡션과 함께 이미지를 보자.

Let the first letter of a paragraph float to the left
글자를 부동의 왼쪽과 스타일은 단락의 첫 글자를 보자.

Creating a horizontal menu
하이퍼 링크의 목록을 담은 가로 메뉴를 만들 플로트.

Creating a homepage without tables
헤더와 함께 사용하여 홈페이지를 만들려면, 하단, 왼쪽의 콘텐츠와 주요 내용을 플로트.

Position:relative
이 예제에서는 요소의 정상적인 위치에 상대적인 위치를 보여줍니다.

Position:absolute
이 예제에서는 절대적인 가치를 사용하는 요소 위치를 보여줍니다.

How to make an element invisible
이 예제에서는 요소를 투명하게하는 방법을 보여줍니다

How to make a table element collapse
이 예제에서는 테이블의 요소를 축소하는 방법을 보여줍니다.

Change the cursor
이 예제는 커서를 변경하는 방법을 보여줍니다.

Clear the sides of an element
이 예제는 어떻게 다른 부동 요소의 분명한 측면을 보여줍니다.

All CSS Classification Properties

"CSS는"열에있는 숫자는 CSS를 버전은 속성 (CSS1 또는 CSS2 정의됨)을 나타냅니다.

Property	Description	Values	CSS
clear	Sets the sides of an element where other floating elements are not allowed	left right both none	1
cursor	Specifies the type of cursor to be displayed	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	2
display	Sets how/if an element is displayed	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	1
float	Sets where an image or a text will appear in another element	left right none	1
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	2
visibility	Sets if an element should be visible or invisible	visible hidden collapse	2