Images, media, and form elements

김동현·2023년 1월 15일

CSS

목록 보기

10/24

이미지와 미디어 그리고 폼 엘리먼트는 CSS로 스타일링할 때 일반적인 다른 박스들과 약간 다르게 동작한다.

Replaced elements

이미지와 비디오는 replaced elements이다.
이는 CSS가 이러한 엘리먼트의 내부 레이아웃에 영향을 미칠 수 없다는 것을 의미한다.
하지만 CSS는 이미지에 다양한 것들을 할 수 있다.

Sizing images

이미지나 비디오는 가로세로의 비율과 길이가 정해져 있다.
기본적으로 이미지 파일의 natural 사이즈가 이미지를 포함하는 박스의 사이즈보다 작거나 크면 박스보다 작게 나타나거나 오버플로 된다.

오버플로를 다루는 일반적인 방법은 이미지의 max-width 를 100%로 만드는 것이다.
이렇게 하면 natural 사이즈가 부모 박스보다 작을 경우엔 그대로 나타나지만 클 경우엔 부모 박스에 맞춰져서 오버플로가 해결된다.
이는 <video> , <iframe> 와 같은 다른 replaced element에도 똑같이 적용된다.

그런데 오버플로를 다른 방식으로 해결하고 싶을 수 있다.
예를 들어, background-size 프로퍼티의 cover 와 같이 동작하기를 바랄 수 있다.
object-fit 프로퍼티가 이를 지원해 준다.
object-fit 프로퍼티는 replaced element가 박스에 fit하는 다양한 방식들을 제공한다.
object-fit 예시 이미지

Replaced elements in layout

replaced element에 다양한 CSS 레이아웃 기술을 적용하면 다른 엘리먼트들과 약간 다르게 동작하는 것을 볼 수 있다.
예를 들어, flex 또는 grid 레이아웃은 기본적으로 레이아웃이 적용된 아이템들이 전체 영역을 채우도록 확장(stretch)시킨다.
그런데 이미지는 늘어나지 않고 시작부분에 맞춰 정렬될 뿐이다.

아래의 별 모양은 이미지 1개와 <div> 박스 3개를 grid 레이아웃으로 배치한 결과이다.
이미지만 다른 동작을 하는 모습
이미지는 영역이 확장되지 않은 것을 확인 할 수 있다.
이미지가 stretch되어서 본래의 비율이 깨지게 된다면 이는 개발자가 원하는 결과가 아닐 것이라 판단했기 때문에 이렇게 설계를 한 것이라 추측한다.

만약 flex 나 grid 처럼 CSS 레이아웃 기술 내에서 <img> 를 강제로 확장시키려면 다음과 같이 한다.

img {
  width: 100%;
  height: 100%;
}

[참고] CSS 레이아웃 기술 (flex, grid 등) 안에서 img를 사용하면 object-fit 속성이 먹히지 않는다.

Form elements

폼 엘리먼트는 CSS로 스타일링 할 때 까다로운 문제가 될 수 있다.
다양한 문제들을 디테일하게 짚는 건 후에 하기로 하고 여기선 몇가지 중요한 사항만 보기로 한다.

텍스트 input처럼 단순한 엘리먼트부터 색상 및 날짜 input처럼 복잡한 엘리먼트까지 다양한 폼 컨트롤들이 <input> 엘리먼트로 추가된다.
뿐만 아니라 <textarea> 나 폼의 label를 나타내는 <fieldset> 나 <legend> 와 같은 엘리먼트들도 있다.

HTML은 사용자가 예기치 않은 내용을 입력하거나 필수로 입력해야 하는 필드를 비워두면 오류를 발생시키는 속성을 제공한다.

이러한 오류및 폼 엘리먼트에 대해 처리하는 스타일링이 브라우저마다 다르다.

Styling text input elements

<input type="text"> , <input type="email"> , <textarea> 같이 텍스트를 입력할 수 있는 필드들은 일반적인 박스처럼 스타일링 할 수 있다.
하지만 이들의 기본 스타일링은 사용자의 운영체제와 브라우저에 따라 다르다.

텍스트를 입력하는 단순한 input 엘리먼트가 아닌 색상, 날짜 같은 복잡한 input 엘리먼트의 대부분은 운영체제에 의해 렌더링 되며, 스타일링을 할 수 없다.
따라서 사용자마다 다른 스타일이 보일 것이라고 항상 생각하며 여러 브라우저에서 테스트 해봐야 한다.

Inheritance and form elements

일부 브라우저에서의 폼 엘리먼트는 기본적으로 글꼴 스타일을 상속하지 않는다.
따라서 상속하기를 바라면 명시적으로 입력해 줘야 한다.

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

Form elements and box-sizing

브라우저에서 폼 엘리먼트는 위젯마다 다른 크기를 가진다.
일관성을 유지하려면 모든 엘리먼트에서 margin과 padding을 0으로 설정한 다음 스타일링 하는 것이 좋다.

button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

Other useful settings

<textarea> 는 IE에서 필요하지도 않은데 스크롤이 나타난다.
따라서 필요치 않으면 스크롤을 없애주기 위해 다음의 코드를 추가한다.

textarea {
  overflow: auto;
}

Putting it all together into a "reset"

위의 작업들은 결국 다양한 운영체제 및 브라우저에서의 CSS 스타일링의 일관성을 갖기위한 "폼 재설정"( Normalizing ) 이다.
아래 코드는 위의 코드들을 합친 것이다.

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}