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 요소가 사용자에 의해 크기 조정이 가능한지 정의합니다.