CSS / 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>
문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다. 즉, CSS 코드는 다음처럼 구성됩니다. selector ...
CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법
순서 있는 목록은 ol 태그로 만듭니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } ...
테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
CSS / aspect-ratio / 요소의 가로 세로 비율 정하는 속성
개요 aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성이다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있다. 문법 aspect-ratio: auto | number / number | initial | inherit auto : 요소가 고유의 가로 세로 비율을 가진 경우 그 값으로 설정한다. number / number : 가로 대 세로. 세로가 생략된 ...
CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...
CSS / background-image / 배경 이미지 정하는 속성
개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...
CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기
마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 위쪽 가로 방향으로 선 그리기 다음과 같이 사각형을 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
CSS / caption-side / 표(table)의 캡션의 위치를 정하는 속성
개요 caption-side는 표(table)의 캡션의 위치를 정하는 속성이다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값으로, 표의 위에 캡션을 위치시킨다. bottom : 표의 아래에 캡션을 위치시킨다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 <!doctype html> <html lang="ko"> <head> ...
높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...