CSS3 사용자 인터페이스 - resize, outline-offset, box-sizing

---

사용자 인터페이스(user interface, UI)

CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해줍니다.

 

CSS3 사용자 인터페이스(user Interface) 지원 버전

CSS3 사용자 인터페이스(user Interface)를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.

CSS3 사용자 인터페이스(user Interface) 지원 버전

 

resize 속성

resize 속성은 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 해줍니다.

※ resize 속성은 익스플로러에서 지원하지 않습니다.

See the Pen eYppZBW by yunjunshin (@yjshin) on CodePen.

위의 예제처럼 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들이 생깁니다.

이 핸들을 마우스로 드래그해서 사용자가 직접 요소의 크기를 조절할 수 있습니다.

 

outline-offset 속성

outline-offset 속성은 해당 요소의 테두리(border)와 아웃라인(outline) 사이에 공간(offset)을 추가해 줍니다.

아웃라인(outline)과 테두리(border)의 차이는 다음과 같습니다.

1.  아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인입니다.
2.  아웃라인은 HTML 요소의 크기에 포함되지 않습니다.
3.  아웃라인은 사각형이 아닐 수도 있습니다.

 

다음 예제는 outline-offset 속성을 이용하여 아웃라인과 테두리를 확인하는 예제입니다.

※ outline-offset 속성은 익스플로러에서 지원하지 않습니다.

See the Pen yLYYObg by yunjunshin (@yjshin) on CodePen.

 

box-sizing 속성

box-sizing 속성은 해당 요소의 너비(width)와 높이(height)에 패딩(padding)과 테두리(border)의 크기까지 포함시킵니다.

See the Pen oNjjxea by yunjunshin (@yjshin) on CodePen.

CSS 박스 모델에서 살펴본 HTML 요소의 전체 너비를 구하는 공식은 다음과 같습니다.

width + left padding + right padding + left border + right border + left margin + right margin

따라서 위의 예제에서 첫 번째 div 요소의 전체 너비는 다음과 같이 설정됩니다.

350px + 20px + 20px + 10px + 10px + 10px + 10px = 430px

 

하지만 box-sizing 속성의 속성값을 border-box로 설정하면, 해당 요소의 총 너비와 높이에 패딩과 테두리의 크기까지 포함해서 설정합니다.

따라서 위의 예제에서 두 번째 div 요소의 전체 너비는 다음과 같이 설정될 것입니다.

350px + 10px + 10px = 370px

---