CSS / Reference / aspect-ratio
개요
- aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다.
- 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.
문법
aspect-ratio: auto | number / number | initial | inherit
- auto : 요소가 고유의 가로 세로 비율을 가진 경우 그 값으로 설정합니다.
- number / number : 가로 대 세로. 세로가 생략된 경우 1로 처리합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속 받습니다.
예제 - 고유 가로 세로 비율이 없는 요소
- div 요소의 가로 크기를 600px로 정하고 가로 세로 비율을 4:3으로 합니다. 즉, 세로 크기는 300px가 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
div {
background-color: #e3f2fd;
width: 600px;
aspect-ratio: 4 / 3;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- div 요소의 세로 크기를 300px로 정하고 가로 세로 비율을 4:3으로 합니다. 즉, 가로 크기는 400px가 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
div {
background-color: #e3f2fd;
height: 300px;
aspect-ratio: 4 / 3;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- div 요소의 가로 크기를 600px로 정하고 가로 세로 비율을 4로 하면, 세로는 1로 처리합니다. 즉, 4:1이므로 세로 크기는 150px가 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
div {
background-color: #e3f2fd;
width: 600px;
aspect-ratio: 4;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- div 요소의 가로 크기와 세로 크기를 정하지 않으면, 가로 크기 100%로 작동합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
div {
background-color: #e3f2fd;
aspect-ratio: 16 / 9;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
예제 - 고유 가로 세로 비율이 있는 요소
- 이미지와 같이 고유 가로 세로 비율이 있는 요소에서 가로 크기 또는 세로 크기를 지정하지 않으면 aspect-ratio가 적용되지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
img {
aspect-ratio: 4 / 1;
}
</style>
</head>
<body>
<img src="images/square-400x400.png" alt="">
</body>
</html>
- 가로 크기 또는 세로 크기를 설정해야 aspect-ratio가 적용됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
img {
width: 100%;
aspect-ratio: 4 / 1;
}
</style>
</head>
<body>
<img src="images/square-400x400.png" alt="">
</body>
</html>
개요 font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-family: font | initial | inherit font : family-name 또는 generic-family initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. font family-name은 글꼴 이름입니다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다. generic-family는 글꼴 유형입니다. 글꼴 유형은 다음과 ...
CSS / Reference / background-color
개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit transparent : 배경색이 없습니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 1 바깥 여백(margin)은 칠하지 않고, 안쪽 여백(padding)은 칠한다는 것을 ...
font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1
CSS / Reference / border-style
개요 border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-style border-right-style border-bottom-style border-left-style 문법 border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit initial : 기본값으로 설정합니다. 기본값은 none이다. inherit : 부모 요소의 속성값을 상속받습니다. 속성값은 한 개에서 네 개까지 정할 수 있습니다. 다음은 모든 ...
font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
CSS / Reference / letter-spacing, word-spacing
글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.
CSS / Reference / list-style-type
목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.
CSS / Reference / caption-side
개요 caption-side는 표(table)의 caption 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값으로, 표의 위에 캡션을 위치시킵니다. bottom : 표의 아래에 캡션을 위치시킵니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta ...
개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...