[CSS 完] 마우스 커서,스크롤바 색상,링크 색상,필터,인쇄,ime-mode,포지셔닝(Positioning) 에 대해서

CSS를 이용한 마우스 커서 모양 지정

cursor 속성을 이용하면 마우스 커서의 형태를 지정할 수 있습니다. 아주 간단하므로 예제를 보시면 금방 이해가 됩니다. <p style="cursor:auto">Auto</p> <p style="cursor:crosshair">Crosshair</p> <p style="cursor:default">Default</p> <p style="cursor:pointer">Pointer</p> <p style="cursor:move">Move</p> <p style="cursor:e-resize">e-resize</p> <p style="cursor:ne-resize">ne-resize</p> <p style="cursor:nw-resize">nw-resize</p> <p style="cursor:n-resize">n-resize</p> <p style="cursor:se-resize">se-resize</p> <p style="cursor:sw-resize">sw-resize</p> <p style="cursor:s-resize">s-resize</p> <p style="cursor:w-resize">w-resize</p> <p style="cursor:text">text</p> <p style="cursor:wait">wait</p> <p style="cursor:help">help</p> 아래 예제에서 글자위에 마우스를 올리면 모양이 변합니다. Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

CSS 고급 - 스크롤바 색상

scrollbar 속성을 이용하면 스크롤바의 색상을 바꿀 수 있습니다. IE 5.5 이상 버전에서만 적용됩니다. <style type="text/css"> body { scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#B58E63; scrollbar-face-color:#F2ECE6; scrollbar-shadow-color:#B58E63; scrollbar-darkshadow-color:white; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#B58E63; } </style> 스크롤바의 각 부분의 명칭은 아래 그림과 같습니다.

CSS 고급 - 링크 색상

하이퍼링크의 색상 <a>태그에서 바로 적용해도 됩니다. <a href="#" style="color:red;">하이퍼링크의 색상</a> 하이퍼링크의 색상 그러나 마우스를 올렸을때(hover) 효과를 주기위해서 일반적으로 아래와 같은 방법을 더 많이 사용합니다. <style type="text/css"> a:link {text-decoration: none; color: #333333;} a:visited {text-decoration: none; color: #333333;} a:active {text-decoration: none; color: #333333;} a:hover {text-decoration: underline; color: red;} </style> a:link는 방문한적이 없는 일반적인 링크를 의미합니다. a:visited는 방문한 적이 있는 링크를 의미합니다. a:active는 클릭하는 순간을 의미합니다. 클릭은 순식간에 이루어지기 때문에 이 부분은 구별이 잘 안갑니다. a:hover는 마우스를 올렸을때를 의미합니다. 위의 예제에서도 볼 수 있듯이 이 부분을 강조를 하는 경우가 많습니다.

CSS 고급 - 필터

CSS를 이용하면 다양한 필터효과를 낼 수 있습니다. CSS 필터효과는 IE에서만 적용됩니다. Blur Filter <span style="filter: blur(add=false, direction=135, strength=6); font-size:20pt;width:200px;">Blur Filter</span> Blur Filter Glow Filter <span style="FILTER: Glow(Color=#ff0000, Strength=8); width:200px;font-size:20pt;">Glow Filter</span> Glow Filter DropShadow <p style="FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);width:300px;font-size:20pt;">DropShadow Filter</p> DropShadow Filter

CSS를 이용한 인쇄화면 개선

웹페이지는 기본적으로 모니터상에 출력되는 것을 기본으로 하기에 인쇄시에는 만족할만한 결과물을 얻기가 힘듭니다. 그래서 현재까지 나와있는 대안으로서는 CSS를 이용하여 인쇄페이지를 좀더 개선하는 방법입니다. 기본적인 개념은 "인쇄를 위한 CSS를 따로 만든 후 media 속성을 사용하여 인쇄시에만 적용되도록 한다"는 겁니다. CSS를 이용하여 인쇄 페이지를 좀더 효과적으로 개선하기 위해서는 아래와 같은 부분이 고려되어야 합니다. 색상을 흑백으로 변경 : 보통 흑백 프린트를 이용하여 인쇄하죠? 링크는 밑줄로 변경 : 흑백으로 인쇄하는 경우 이 부분이 링크인지 표시할 길이 없습니다. 그래서 링크에는 밑줄을 그어주는 것이 좋습니다. 불필요한 부분은 제거 : 메뉴와 광고는 같이 인쇄될 필요가 없겠죠? 그리고 플래쉬나 불필요한 이미지 역시 제거해 주면 좀더 깔끔한 인쇄물을 얻을 수 있습니다. 색상을 흑백으로 변경 글자색은 검은색으로 배경은 흰색으로, 그리고 가능하면 글자체와 글자크기도 지정해 주면 좋습니다. body {color : #000000; background : #FFFFFF; font-family : 굴림,"Times New Roman"; font-size : 12pt;} 링크는 밑줄로 변경 a {text-decoration : underline;} 불필요한 부분은 제거 이는 아이디(ID)를 사용하여 광고와 네비게이션을 구분해 줍니다. 아이디 사용이 불편한 경우에는 클래스(class)를 사용하여 인쇄시 나오지 않는 부분에 클래스를 지정해주어도 됩니다. #menu, #advertising {display : none;} CSS 파일 제작 위의 3가지 부분을 반영해서 아래와 같은 CSS 파일을 만듭니다. print.css와 같은 이름으로 저장하면 되겠죠? body {color : #000000; background : #FFFFFF; font-family : 굴림,"Times New Roman"; font-size : 12pt;} a {text-decoration : underline;} #menu, #advertising {display : none;} 인쇄시만 적용되도록 설정 HTML 문서내에 아래와 같은 구문을 추가합니다. <link rel="stylesheet" href="print.css" type="text/css" media="print"> HTML 문서에서 인쇄시 제거할 부분에는 DIV 태그로 구분합니다. <div id="menu">메뉴</div> <div id="advertising">광고</div>

보다 간단하게 특정 요소를 인쇄 안되게 하는 방법

인쇄용 CSS 파일을 독립적으로 만들지 않고 페이지 내에서 간단하게 특정 요소를 인쇄하지 않도록 하는 방법도 있습니다. <style type="text/css"> <!-- @media print {     .advertising {display:none;} } //--> </style> <div class="advertising">광고</div> 본문 위와같이 HTML 문서를 제작하면 모니터상에서는 광고와 본문이 모두 보여지지만 인쇄화면에서는 광고는 보여지지 않고 본문만 출력이 됩니다. 인쇄미리보기 화면에서도 바로 확인할 수 있습니다. 물론 클래스(.advertising)를 사용하지 않고 앞의 강좌에서처럼 아이디(id)를 사용하여 광고와 메뉴 부분을 인쇄되지 않게 지정할 수 있습니다. 그리고 인쇄화면에서 보여지지 않게 하는 처리외에도 인쇄화면만의 스타일을 달리 적용할 수 있습니다. 즉 인쇄화면에서의 스타일을 지정하기 위해서는 @media print 라는 속성을 사용하여 일반적인 스타일과 구분을 해주는 겁니다.

인쇄시 다음 페이지로 넘길 수 있는 page-break-before 속성

page-break-before 속성은 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정하는 Property입니다. <p>홈짱닷컴은 홈페이지 제작 가이드란 부제를 달고 있는 만큼 홈페이지 제작에 필요한 다양하고 유익한 정보를 제공하겠습니다.</p> <p style="page-break-before: always;">홈짱닷컴은 홈페이지 제작의 가장 기본이라고 할 수 있는 HTML 부터 홈페이지를 운영하는 노하우까지 홈페이지에 관한 전반적인 정보를 제공하고 있습니다.</p> block-level element 사이를 경계로 페이지를 나누기 때문에 반드시 block-level element에 지정해 주어야 합니다. 그러므로 P, DIV와 같은 block-level element가 아닌 요소에 적용하면 다음 페이지로 넘어가지 않습니다. <span>홈짱닷컴은 홈페이지 제작 가이드란 부제를 달고 있는 만큼 홈페이지 제작에 필요한 다양하고 유익한 정보를 제공하겠습니다.</span> <br><br> <span style="page-break-before: always;">홈짱닷컴은 홈페이지 제작의 가장 기본이라고 할 수 있는 HTML 부터 홈페이지를 운영하는 노하우까지 홈페이지에 관한 전반적인 정보를 제공하고 있습니다.</span> 위와 같이 inline-level element인 span에 적용하면 효과를 볼 수 없습니다. page-break-before 속성에 사용되는 값은 아래와 같습니다만 always 값외에는 사용하는 경우가 거의 없을듯 합니다. auto : 기본값 always : 항상 페이지 넘김 avoid : 페이지 넘김을 하지 못하게 강제 left : 제본을 위한 값이라고 하나 always와 차이점을 발견하기 힘듭니다. right : 제본을 위한 값이라고 하나 always와 차이점을 발견하기 힘듭니다.

ime-mode 입력폼의 한영전환 지정하기

ime-mode 속성은 IME(Input Method Editor)의 상태를 반환하거나 설정합니다. 로그인 폼에서 아이디와 비밀번호를 입력하는 경우나 우편번호를 찾기 위해서 동이름을 입력하는 경우 한글/영문을 기본으로 지정해 놓으면 상당히 편리한데 이런 경우 사용하는 속성이라고 할 수 있습니다. ime-mode 속성의 값은 아래와 같이 3가지로 지정할 수 있습니다. auto 기본값으로 ime-mode 값이 지정되지 않은 것과 같습니다. active 활성화 된 상태입니다. 값을 입력하면 기본적으로 한글이 입력됩니다. 우편번호를 찾기 위해서 동이름을 입력하는 경우 많이 사용됩니다. <input type="text" style="ime-mode:active;"> inactive 비활성화 된 상태입니다. 값을 입력하면 기본적으로 영문이 입력됩니다. <input type="text" style="ime-mode:inactive;"> disabled IME를 사용할 수 없는 경우입니다. 한영키를 눌러도 한글로 변환하지 않고 영문만 입력 가능합니다. 아이디와 비밀번호는 한글이 허용되지 않으므로 이런 경우 사용할 수 있습니다. <input type="text" style="ime-mode:disabled;">

CSS 포지셔닝(Positioning)

CSS로 레이아웃을 잡는 경우가 늘어나고 있기에 포지셔닝(Positioning)의 중요성이 강조되고 있습니다. 포지셔닝에 이용되는 CSS 속성은 아래와 같습니다. bottom 위치된 요소의 아래쪽 간격을 지정합니다. clip 넘쳐흐른 요소의 잘려져 보이는 영역을 지정합니다. 영역에 포함되지 않은 부분은 숨겨집니다. left 위치된 요소의 왼쪽 간격을 지정합니다. overflow 넘쳐흐른(overflow) 요소를 보일지, 감출지, 스크롤할지를 지정합니다. position 요소가 위치할 방식을 지정합니다. right 위치된 요소의 오른쪽 간격을 지정합니다. top 위치된 요소의 위쪽 간격을 지정합니다. vertical-align 요소의 수직 정렬을 지정합니다. z-index 위치된 요소의 z축 순서를 지정합니다.