CSS Dock Menu

사이트 :

http://www.ndesign-studio.com/blog/css-dock-menu

 

데모 :

http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

 

 

모서리 테두리 만들기

CSS로 위와 같은 테두리 만들기

[code css]

[/code]
갤러리의 이미지 표현 같은곳에 사용하면 좋겠다.

dl, dt, dd 태그 css로 정의하기

[code html]

apmsoft 의 apm의 뜻은?

a : 아파치(apache)

p : PHP

m : MYSQL

[/code]

 

# 결과

apmsoft의 apm의 뜻은? 
a : 아파치(apache)  
p : PHP
m : MYSQL

위와 같이 출력 된다.
기본적으로 dl, dt, dd 태그는 블록적 성격을 가진다.
그래서 한줄씩 출력하게 된다.

[code html]

apmsoft 의 apm의 뜻은?

a : 아파치(apache)

p : PHP

m : MYSQL

[/code]

 

# 결과

apmsoft의 apm의 뜻은? 
a : 아파치(apache)   p : PHP   m : MYSQL

inline 을 설정해 주면 세로가 아닌 가로로 출력을 하게 된다.

dl dt dd 를 사용하게 되면 리스트 적인 의미를 담은 글이 되기 때문에 성공적인 코딩이라 말할 수 있겠다.

div 높이 조정을 유동적으로 설정하기

id=contain
position=relative

id=left
position=relative

id=center
position=absolute

id=tail
position=relative

위와 같은 형식의 레이어를 작성할 경우 center의 내용이 contain 영역의 크기보다 크기가 크기 때문에 tail 영역의 내용을 덮어버리거나 가려져 내용이 보이지 않게 된다.
center의 position 속성이 absolute 이기 때문에 contain 영역의 높이를 center가 포함할 수 있도록 지정해 주어야 하는데 center 영역에 게시판같이 높이가 일정하지 않은 내용이 오면 이를 지정해 주기가 힘들다.
이럴 경우 다음과 같은 스크립트를 사용하여 페이지를 로드한 후 contain의 높이와 center의 높이를 비교한 후 둘중 큰 높이를 contain의 높이로 변경하여 tail의 내용도 제대로 출력되게 수정할 수 있다.

 

[code javascript]function fix_height(fname,lname) { if(document.getElementById(fname) && document.getElementById(lname)) { var Fname = document.getElementById(fname); var Lname = document.getElementById(lname); if(Fname.offsetHeight < Lname.offsetHeight) Fname.style.height = Lname.offsetHeight; } }[/code]

 

위 내용을 실행하고 나면 아래의 내용과 같이 크기가 변하게 된다.

id=contain
position=relative

id=left
position=relative

id=center
position=absolute

id=tail
position=relative

CSS 사전

css.zip

투명한 프레임과 투명한 이미지

<html>
<head>
</heaD>
<body>그냥iframe 입니당.</body>
</html>

바디에, <body style="background-color:transparent"> 를 넣으면 완전한 투명프레임이 됩니다.
반투명은 iframe에 style="filter: Alpha(Opacity=65);"  필터 스타일을 넣어주시기만 하면 되요.

투명한 이미지 만들기

<img src="그림파일경로" style="filter:alpha(style=2, opacity=100, finishopacity=0)">

여기서 style의 값은
0에서 3까지 선택 가능하고.
0은 단일
1은 선형
2는 타원
3은 직사각형의 형태로 투명도가 들어가구요,

opacity는
그림의 투명도
기본값은 100이고 0-100까지..

finishopacity는 style 1,2,3 의 경우 불투명도에 영향을 주는데.
0~100 까지 수치조절이 가능

테이블의 1px 선은 이렇게 하면 좋아요

<table border="1" bordercolor="#666666" style="border-collapse:collapse">

 

위와 같이하면 잇점
=> 클라이언트의 익스플로러 설정에 상관없이 프린트하면 선이 인쇄됨

폼입력시 한글자동입력 스타일 적용

HTML에서 폼 입력시 한글과 영문으로 자동 전환 되도록 할 수 있습니다.

<input type=text style="ime-mode:active">

 

이렇게 하면 영문 자판으로 사용중이더라도 한글 컴퓨터에서는 바로 한글을 입력할 수 있으며,

<input type=text style="ime-mode:inactive">

이렇게 하면 반대로 영문을 바로 입력할 수 있게 됩니다.

Windows의 IME입력 방식을 이용하는 것이죠.

또한 한/영 전환이 되지 않고 영문으로만 입력되게 하려면

<input type=text style="img-mode:disabled">

 

css와 div만으로 화면 중앙에

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>박스를 화면 중앙에 정렬하기</title>
<style type="text/css">
html,
body {
 height: 100%; /* body와 html의 높이를 100% 로 지정 */
 margin: 0;
 padding: 0;
}
#center {
 width: 200px; /* 폭이나 높이가 일정해야 합니다. */
 height: 200px; /* 폭이나 높이가 일정해야 합니다. */
 position: absolute;
 top: 50%; /* 화면의 중앙에 위치 */
 left: 50%; /* 화면의 중앙에 위치 */
 margin: -100px 0 0 -100px; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. */
 border: 1px inset #ddd;
}
</style>
</head>
<body>
<h1>박스를 화면 중앙에 정렬하기</h1>
<div id="center"> 센터정렬 박스 </div>
</body>
</html>