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 / Flex / IE에서 flex-basis 오류 해결하는 방법
Flex를 이용하여 다단 배열을 만들려고 합니다. 내용에 상관없이 같은 폭을 가진 다단 배열을 만든다면 flex-basis를 사용하는 게 편합니다. 아래는 Flex를 이용한 간단한 2단 배열입니다. box-sizing의 값을 border-box로 설정하고, flex-basis의 값을 50%로 하면 간단히 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
CSS / border-radius / 테두리 둥글게 만드는 속성
border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...
CSS / opacity / 요소를 투명하게 만드는 속성
개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...
CSS / line-height / 줄 높이 정하는 속성
개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. percentage : 글자 크기의 몇 %로 줄 ...
문법 CSS 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 구성됩니다. 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값입니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 태그, 클래스, ID 등 다양한 선택자가 있습니다. 속성(property) : 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 ...
CSS / 애니메이션 / transition / 속성을 서서히 변화시키는 속성
transition transition은 속성을 서서히 변화시키는 속성입니다. transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한 번에 정합니다. IE는 버전 10부터 지원합니다. 문법 transition: property timing-function duration delay | initial | inherit property : transition을 적용시킬 속성을 정합니다. transition-property를 참고하세요. timing-function : transition의 진행 속도를 정합니다. transition-timing-function를 참고하세요. duration : transition의 총 시간을 정합니다. transition-duration을 참고하세요. delay : transition의 시작을 연기합니다. transition-delay를 참고하세요. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 ...
사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...
배경과 내용의 투명도 CSS의 opacity 속성으로 요소의 투명도를 정할 수 있습니다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 간단한 예제는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { ...
CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> @keyframes big { ...
크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; } 가변폭 ...