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 / padding - 안쪽 여백, margin - 바깥 여백

CSS / padding - 안쪽 여백, margin - 바깥 여백

여백에는 안쪽 여백과 바깥 여백이 있다. 안쪽 여백은 padding 속성으로, 바깥 여백은 margin 속성으로 정한다. 여백을 정하면 요소의 크기가 바뀔 수 있다. 어떤 기준으로 크기를 정할 지는 box-sizing 속성으로 정한다. 속성값 부여하기 padding과 margin 속성에 값을 부여하는 방법은 다음과 같다. padding: xx yy zz ww; margin: xx yy zz ww; xx는 위, yy는 오른쪽, zz는 아래, ww는 ...

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

CSS / display 속성으로 표 만들기 - table, table-row, table-cell

display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...

CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우

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 / 표(table) 꾸미기 / 테두리 만들기

CSS / 표(table) 꾸미기 / 테두리 만들기

테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / 애니메이션 / animation

CSS / 애니메이션 / animation

CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> @keyframes big { ...

CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법

CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법

순서 있는 목록은 ol 태그로 만듭니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } ...

CSS / 링크 꾸미기

CSS / 링크 꾸미기

선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...

CSS / Flex / order / 아이템의 순서 정하는 속성

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...

CSS / 체크박스 꾸미는 방법

CSS / 체크박스 꾸미는 방법

체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다. 체크박스 만들기 빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨을 연결시켜야 합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...