사용자 인터페이스 속성 - by. UXKM

  • Publishing
  • CSS
  • CSS 초급
  • 사용자 인터페이스 속성
요약 설명

사용자 인터페이스 속성은 웹 페이지에서 사용자와의 상호작용을 위한 시각적 요소를 제어하는 CSS 속성들입니다.
CSS 초급 과정의 기본 속성 외에, 사용자 인터페이스와 관련된 속성들을 다룹니다.

outline 속성

outline 속성은 HTML 요소의 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분의 스타일을 설정합니다.
border 속성과 마찬가지로 style, width, color 속성을 가집니다.
하지만 border 속성과 달리 outline 속성은 HTML 요소의 전체 크기에 포함되지 않으며, 요소의 높이나 너비에 영향을 주지 않습니다.
outline 속성을 설정하기 위해서는 반드시 outline-style 속성이 먼저 설정되어 있어야 합니다.
익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html>이 선언되어 있어야 outline 속성이 제대로 표현됩니다.

  1. outline : 아웃라인 축약 표현(outline shorthand)으로 모든 outline 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.
  2. outline-width : 아웃라인(outline)의 너비를 설정합니다.
  3. outline-style : 아웃라인(outline)을 다양한 모양으로 설정합니다.
  4. outline-color : 아웃라인(outline)의 색상을 설정합니다.
  5. outline-offset : 테두리(border)와 아웃라인(outline) 사이의 여백을 설정합니다. IE는 지원하지 않습니다.

outline-width 속성

outline-width 속성은 아웃라인(outline)의 두께를 설정합니다.
px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있습니다.
또한, 미리 설정해 놓은 예약어인 thin, medium, thick을 사용하여 설정할 수도 있습니다.

outline-style 속성

outline-style 속성을 이용하면 아웃라인(outline)을 다양한 모양으로 설정할 수 있습니다.

  1. dotted : 아웃라인을 점선으로 설정합니다.
  2. dashed : 아웃라인을 약간 긴 점선으로 설정합니다.
  3. solid : 아웃라인을 실선으로 설정합니다.
  4. double : 아웃라인을 이중 실선으로 설정합니다.
  5. groove : 아웃라인을 3차원인 입체적인 선으로 설정하며, outline-color 속성값에 영향을 받습니다.
  6. ridge : 아웃라인을 3차원인 능선효과가 있는 선으로 설정하며, outline-color 속성값에 영향을 받습니다.
  7. inset : 3차원인 내지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받습니다.
  8. outset : 3차원인 외지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받습니다.
  9. none : 아웃라인(outline)을 없앱니다.
  10. hidden : 아웃라인(outline)이 존재하기는 하지만 표현되지는 않습니다.

outline-color 속성

outline-color 속성은 아웃라인(outline)의 색상을 설정합니다.
기본적인 color 속성값들뿐만 아니라 색반전을 나타내는 invert 속성값을 사용할 수 있습니다.
invert 속성값은 배경색과 상관없이 아웃라인을 보여주기 위한 색반전을 설정합니다.

outline 속성 예제

cursor 속성

요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.
속성값에 따라 브라우저 지원이 다릅니다.

대표적인 마우스 커서 값은 다음과 같습니다.

아래 예제에 마우스를 올려보세요.

  1. 일반

    auto : 사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정합니다. 예를 들어 글씨 위에서는 text를 사용합니다.

    default : default 플랫폼에 따라 다른 기본 커서입니다. 보통 화살표입니다.

    none : 커서 없음.

  2. 링크와 상태

    context-menu : context-menu 콘텍스트 메뉴 사용 가능.

    help : help 도움말 사용 가능.

    pointer : pointer 링크를 나타내는 포인터입니다. 보통 한 쪽을 가리키는 손입니다.

    progress : progress 프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있습니다. (wait과 반대)

    wait : wait 프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없습니다. (progress와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.

  3. 선택

    cell : cell 표의 칸이나 여러 칸을 선택할 수 있습니다.

    crosshair : crosshair 십자 커서입니다. 종종 비트맵 선택에 사용합니다.

    text : text 글씨 선택 가능합니다. 보통 I빔 모양입니다.

    vertical-text : help 세로쓰기 글씨 선택 가능합니다. 보통 옆으로 누운 I빔 모양입니다.

  4. 드래그 앤 드롭

    alias : alias 별칭이나 바로가기를 만드는 중.

    copy : copy 복사하는 중.

    move : move 움직이는 중.

    no-drop : no-drop 현재 위치에 놓을 수 없습니다. Windows와 Mac OS X에서 no-drop은 not-allowed와 같습니다.

    grab : grab 잡을 수 있습니다. (잡아서 이동)

    grabbing : grabbing 잡고 있습니다. (잡아서 이동)

  5. 크기 조절과 스크롤

    all-scroll : all-scroll 모든 방향으로 이동 가능합니다. (패닝) Windows에서 all-scroll은 move와 같습니다.

    col-resize : col-resize 항목/행의 크기를 좌우로 조절할 수 있습니다. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다.

    row-resize : row-resize 항목/열의 크기를 상하로 조절할 수 있습니다. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다.

    동, 서, 남, 북 resize : 움직일 수 있는 모서리입니다. 예를 들어, se-resize 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다.
    어떤 환경에서는 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 n-resize와 s-resize는 ns-resize와 같습니다.
    현재 모든 브라우저에서 양방향 크기 조절 커서와 동일하게 보입니다. n-resize n-resize e-resize e-resize s-resize s-resize w-resize w-resize ne-resize ne-resize nw-resize nw-resize se-resize se-resize sw-resize sw-resize

    양방향 크기 조절 커서. ew-resize ew-resize ns-resize ns-resize nesw-resize nesw-resize nwse-resize nwse-resize

  6. 확대와 축소

    IE에서는 기본 pointer 커서로 렌더링됩니다.

    확대/축소할 수 있습니다. zoom-in zoom-in zoom-out zoom-out