CSS3는 resize와 outline-offset 속성을 제공하여 사용자 인터페이스(UI)를 더욱 유연하게 확장할 수 있도록 지원합니다. 이 두 속성을 활용하면 요소의 크기 조절 가능 여부를 제어하고, 외곽선(outline)과 요소 사이의 간격을 자유롭게 조정할 수 있습니다.
주요 속성 살펴보기
1. resize 속성
resize 속성은 텍스트 영역(textarea) 등 사용자가 요소의 크기를 직접 조절할 수 있는지 여부를 설정합니다. 기본적으로 textarea는 크기 조절이 가능하지만, resize: none;으로 설정하면 이를 비활성화할 수 있습니다.
2. outline-offset 속성
outline-offset 속성은 요소의 테두리(border) 바깥에 그려지는 외곽선(outline)과 요소 자체 사이의 간격을 지정합니다. 이를 통해 시각적으로 돋보이는 디자인 효과를 쉽게 구현할 수 있습니다.
예제 코드
다음 예제는 resize 속성과 outline-offset 속성을 함께 사용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 20px;
border: 1px solid rgb(0, 26, 255);
outline: 4px dashed rgb(90, 2, 86);
outline-offset: 15px;
}
textarea {
display: inline-block;
}
</style>
</head>
<body>
<h1>사용자 인터페이스 확장 예제</h1>
<h3>resize 속성</h3>
<textarea style="resize: none;">Textarea : 크기 조절 불가</textarea>
<textarea>Textarea : 크기 조절 가능 (기본값)</textarea>
<h3>outline 속성</h3>
<div>div 내부의 텍스트입니다</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
- 첫 번째 textarea는
resize: none;이 적용되어 우측 하단의 크기 조절 핸들이 나타나지 않습니다. - 두 번째 textarea는 기본값이 적용되어 사용자가 마우스로 드래그하여 크기를 조절할 수 있습니다.
- div 요소에는 파란색 실선 테두리 바깥쪽에 15px 간격을 두고 보라색 점선 외곽선이 그려집니다.
이처럼 CSS3의 인터페이스 관련 속성을 활용하면 별도의 JavaScript 없이도 사용자 경험을 개선하고 시각적 완성도를 높일 수 있습니다.