CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성
CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다.
IE는 버전 10 이상부터 지원한다는 것에 주의합니다.
transform / rotate
- transform의 rotate로 요소를 회전시킬 수 있습니다.
문법
transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle )
- angle에는 각의 크기를 입력합니다.
- 단위는 deg, rad, grad, turn 등을 사용합니다.
- turn은 1회전, 즉 360deg를 의미합니다.
예제
- 마우스를 올렸을 때 회전합니다. 회전하는 과정을 보기 위해 transition 속성을 추가했습니다.
- 각이 양수인 경우 시계방향으로 회전합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb {
width: 100px;
height: 100px;
margin: 60px auto;
background-color: orange;
transition: all ease 1s;
}
.jb:hover {
transform: rotate( 45deg );
}
</style>
</head>
<body>
<div class="jb"></div>
</body>
</html>
- 각이 음수면 반시계 방향으로 회전합니다.
.jb:hover {
transform: rotate( -45deg );
}
- 각이 크게 하여 빙글빙글 돌게 하는 효과를 줄 수 있습니다.
.jb:hover {
transform: rotate( 720deg );
}
- rotateX는 가로를 축으로 하여 회전합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: rotateX( 180deg )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
- rotateY는 세로를 축으로 하여 회전합니다.
.jb-box:hover {
transform: rotateY( 180deg )
}
transform / translate
- transform의 translate로 요소를 이동시킬 수 있습니다.
문법
transform: translateX( 50px )
오른쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 왼쪽으로 이동합니다.
transform: translateY( 50px )
아래쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 위쪽으로 이동합니다.
transform: translate( 50px, 50% )
오른쪽으로 50px, 아래쪽으로 50% 이동합니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: translateX( 50px )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
.jb-box:hover {
transform: translateX( -50px )
}
.jb-box:hover {
transform: translateY( -50px )
}
.jb-box:hover {
transform: translate( 50px, 50% )
}
transform / scale
- transform의 scale로 요소를 확대 또는 축소할 수 있습니다.
- 1보다 큰 수는 확대, 1보다 작은 수는 축소입니다.
문법
transform: scale( 2.0 );
가로와 세로 모두 2배 확대합니다.
transform: scale( 2.0, 1.5 );
가로로 2배, 세로로 1.5배 확대합니다.
transform: scaleX( 2.0 );
가로로 2배 확대합니다.
transform: scaleY( 1.5 );
세로로 1.5배 확대합니다.
예제
- 마우스를 올렸을 때 확대됩니다. 그 과정을 보기 위해 transition 속성을 추가했습니다.
- 마우스를 올리면 가로로 1.5배 확대합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: scaleX( 1.5 )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
- 세로로 1.5배 확대합니다.
.jb-box:hover {
transform: scaleY( 1.5 )
}
- 가로 세로 모두 1.5배 확대합니다.
.jb-box:hover {
transform: scale( 1.5 )
}
- 가로로 2.0배, 세로로 1.5배 확대합니다.
.jb-box:hover {
transform: scale( 2.0, 1.5 )
}
transform / skew
- transform의 skew로 요소를 비틀 수 있습니다.
문법
transform: skewX( 30deg );
가로 방향으로 30도 비틉니다.
transform: skewY( 30deg );
세로 방향으로 30도 비틉니다.
transform: skewX( 30deg, 60deg );
가로 방향으로 30도, 세로 방향으로 60도 비틉니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-box {
width: 100px;
height: 100px;
margin: 50px auto;
padding: 20px;
background-color: orange;
transition: all 0.5s linear;
}
.jb-circle {
width: 100%;
height: 100%;
border: 10px solid #ffffff;
border-radius: 50%;
}
.jb-box:hover {
transform: skewX( 30deg )
}
</style>
</head>
<body>
<div class="jb-box">
<div class="jb-circle"></div>
</div>
</body>
</html>
.jb-box:hover {
transform: skewY( 30deg )
}
.jb-box:hover {
transform: skew( 30deg, 60deg )
}
표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...
선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...
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의 border-radius 속성으로 원을 만들 수 있다. 원 만들기 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="circle"></div> 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣는다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .circle { ...
전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...
CSS / box-shadow / 박스에 그림자 효과 만드는 속성
개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow를 사용한다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position ...
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 속성의 ...
HTML에 CSS를 적용시키는 방법은 세가지가 있다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선태한다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결한다. 보통 여러 문서에 적용되는 스타일은 Linking Style Sheet으로 만들고, 특정 ...
Box Model HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다. 예를 들어 다음과 같이 코드를 작성했다면 <body> <header> <h1>Lorem</h1> </header> </body> body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다. 박스의 구성 하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, ...
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용한다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있다. 아래와 같은 코드인데, 고정폭이다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정하다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, iframe에 style을 추가하여 ...