이미지 및 비디오 같은 특정 대체 element도 종횡비(aspect radio)를 갖는다.
이는 가로 x 및 세로 y 크기를 가지며, 기본적으로 파일의 고유 크기를 사용하여 표시된다.
image 크기 조정
max-width: 100%
- image가 box보다 커질 수 없어진다.
-> video, iframe에도 적용된다.
작은 이미지는 변경되지 않지만, 큰 이미지는 box에 맞춰진다.
container 내부의 이미지에 대해 box 크기를 완전히 덮을 수 있도록 크기 조정 가능
- object-fit 속성
대체 element의 크기를 다양한 방식으로 박스에 맞게 조정 가능
cover -> image 크기를 줄이며, 화면 비율을 유지해 box 채움
image가 종횡비를 유지하기 위해 잘릴 수 있다.
contain -> image가 box 안에 다 들어갈만큼 작아진다.
box와 종횡비가 다르면 letter box가 된다.
fill -> box를 채우지만 종횡비는 유지되지 않는다.
layout
flex, grid layout에서 element는 기본적으로 전체 영역을 채우기 위해 확장된다.
이미지가 늘어나지 않고 grid 영역 또는 flex container의 시작 부분에 맞춰 정렬된다.
Form element
<input> element를 통해 많은 양식 control이 page에 추가된다.
text 입력 element styling
<input type="text">
<input type="email">
<textarea> element는 style이 매우 쉽고 다른 box처럼 동작하는 경향이 있다.
상속과 form element
form element는 기본적으로 font style을 상속하지 않는다.
따라서 form field가 상위 요소에 정의된 글꼴을 사용하려면 다음 규칙을 추가해야 한다.
font-family: inherit;
form element, box size control
일관성을 유지하려면 모든 element에서 margin과 padding을 0으로 설정한 다음 특정 control을 styling할 때 다시 margin을 추가하는 것이 좋다.
다른 유용한 설정
<textarea>에서 overflow:auto를 설정하여 스크롤 막대가 필요하지 않은 경우 표시되지 않도록 설정
모든 것을 "재설정"으로 통합
