CSS 사용자 인터페이스

이 장에서는 다음 CSS 사용자 인터페이스 속성에 대해 배웁니다.

resize
outline-offset

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

CSS 크기 조정

resize속성은 사용자가 요소의 크기를 조정할 수 있는지 여부(및 방법)를 지정합니다 .

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

크기 조정: 이 div 요소의 오른쪽 하단 모서리를 클릭하고 끕니다.

다음 예에서는 사용자가 <div> 요소의 너비만 조정할 수 있습니다.

예시

div {
resize: horizontal;
overflow: auto;
}

다음 예제에서는 사용자가 <div> 요소의 높이만 조정할 수 있습니다.

예시

div {
resize: vertical;
overflow: auto;
}

다음 예제에서는 사용자가 <div> 요소의 높이와 너비를 모두 조정할 수 있습니다.

예시

div {
resize: both;
overflow: auto;
}

많은 브라우저에서 <textarea>는 기본적으로 크기를 조정할 수 있습니다. 여기에서는 크기 조정 기능을 비활성화하기 위해 크기 조정 속성을 사용했습니다.

예시

textarea {
resize: none;
}

CSS 아웃라인 오프셋

이 outline-offset속성은 윤곽선과 요소의 가장자리 또는 테두리 사이에 공간을 추가합니다.

이 div에는 테두리 가장자리 외부에 15픽셀의 윤곽선이 있습니다.

참고: 외곽선은 테두리와 다릅니다! 테두리와 달리 윤곽선은 요소의 테두리 외부에 그려지며 다른 내용과 겹칠 수 있습니다. 또한 윤곽선은 요소 차원의 일부가 아닙니다. 요소의 전체 너비와 높이는 윤곽선 너비의 영향을 받지 않습니다.

다음 예제에서는 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;
}