간단한 샘플

간단한 하이퍼링크 구현(샘플)

<style type="text/css"> 
  a {text-decoration: none; color:navy } 
  a:hover {text-decoration: underline; color:orange} 
  td { font-family:굴림체; font-size:12 }
</style>

• 리스트페이지에 마우스 가져가면 색깔 변함(샘플)

<tr align="center" height="20" onMouseOver="this.style.backgroundColor='#ddeecc'" 
onMouseOut="this.style.backgroundColor='white'">
.
.
.
.
.
.
.
.
</tr>

(설명) 리스트가 뿌려질(루프를 돌면서 뿌려질)행의 시작 태그에 위의 소스를 입력합니다.

***배경색 테두리 모두를 설정한 예시입니다...

<input type="text" name="bb" size="68" style="background-color:rgb(239,247,213); border-
style:groove;">

또는 ''와 ''사이에...다음과 같이 코딩합니다. 샘플 CSS입니다..적절하게 변형해서..사용하세요..

<style type="text/css"> 
   A {text-decoration: none; color:navy } 
   A:hover {text-decoration: underline; color:orange} 
   td { font-family:굴림체; font-size:12 }
   body { font-family:굴림체; font-size:12 }
   input { font-family:굴림체; font-size:12; color: gray; background-color:rgb
(239,247,213);border-style:groove;}
</style>

• 일반적으로 많이 사용하는 폼개체 테두리설정(샘플)

<input type="text" name="id" style="border-style:groove;">

위에서 style="border-style:groove;" 부분입니다. groove대신에 dotted 등 값이 다양합니다.

• 스크롤바(Body) 컬러모양 바꾸기 설정(샘플)

<style type="text/css">
body
{
/*선색깔*/
scrollbar-highlight-color:#D8b5C8;
scrollbar-shadow-color:#D8b5C8;

/*면색깔*/
scrollbar-3dlight-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;

scrollbar-arrow-color:#D8b5C8;
scrollbar-track-color:#ffffff;
}
</style>

• 배경이미지 고정하고 스크롤되는 스타일구현(샘플) 배경이미지를 고정하는 스타일시트입니다.

<style type="text/css">
<!--
body {
  background-image: url(경로);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-attachment: fixed
}
-->
</style>

설명을 하자면 다음과 같습니다..

• 이미지 파일 경로 지정 background-image: url(경로);

• 이미지를 한번만 표시 background-repeat: no-repeat;

• 키워드를 이용한 이미지 위치 설정 (left,center,right // top,middle,bottom) background-position: right bottom;

• 마우스 스크롤에 상관없이 배경 이미지 고정 background-attachment: fixed

링크된 이미지에 마우스 오브시 이미지가 움직이는 스타일쉬트

html

<a class="over"><img src="" alt="0" width="100" height="100" /></a>

css

a.over:hover {position:absolute; top:1px; left:1px}

See the Pen javascript Canvas - fillText2 by younghyeong ryu (@wangta69) on CodePen.