CSS 사용자 인터페이스

CSS 사용자 인터페이스

이 장에서는 다음과 같은 CSS 사용자 인터페이스 속성을 배울 것입니다：

  • resize
  • outline-offset

브라우저 지원

표의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다。

속성 크롬 IE 파이어폭스 사파리 오페라
resize 4.0 지원하지 않음 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS 크기 조정

resize 속성은 요소가 사용자에 의해 크기를 조정할 수 있도록 (그리고 어떻게)되어야 하는지 정의합니다。

이 div 요소는 사용자가 크기를 조정할 수 있습니다！

크기 조정: 이 div 요소의 오른쪽 하단 모서리를 클릭하고 드래그하세요。

주의:Internet Explorer는 resize 속성을 지원하지 않습니다。

아래 예제에서는 사용자가 <div> 요소의 너비만 조정할 수 있도록 합니다：

예시

div {
  resize: horizontal;
  overflow: auto;
}

직접 시험해 보세요

아래 예제에서는 사용자가 <div> 요소의 높이만 조정할 수 있도록 합니다：

예시

div {
  resize: vertical;
  overflow: auto;
}

직접 시험해 보세요

아래 예제에서는 사용자가 <div> 요소의 높이와 너비를 조정할 수 있도록 합니다：

예시

div {
  resize: both;
  overflow: auto;
}

직접 시험해 보세요

대부분의 브라우저에서 <textarea>는 기본적으로 크기를 조정할 수 있습니다. 여기서는 resize 속성을 사용하여 이러한 조정 가능성을 비활성화했습니다：

예시

textarea {
  resize: none;
}

직접 시험해 보세요

CSS 프로파일 이동

outline-offset 속성은 테두리와 요소의 테두리 테두리 사이에 공간을 추가합니다。

이 div는 테두리 가장자리 밖에 15px의 테두리가 있습니다。

주의:테두리와 다릅니다! 테두리와 달리 테두리선은 요소 테두리 밖에 그려지며 다른 내용과 겹칠 수 있습니다. 또한, 테두리는 요소 크기의 일부도 아닙니다: 요소의 총 너비와 높이는 테두리선 너비에 영향을 받지 않습니다。

아래 예제에서는 outline-offset 속성을 사용하여 테두리와 테두리 주위 공간을 추가했습니다：

예시

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

직접 시험해 보세요

CSS 사용자 인터페이스 속성

아래 표는 모든 사용자 인터페이스 속성을 나열합니다：

속성 설명
outline-offset 곽선과 요소의 경계선 사이에 공간을 추가합니다.
resize 요소가 사용자에 의해 크기 조정이 가능한지 정의합니다.