일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 상품상세페이지
- 쇼핑몰만들기
- 구매목록페이지
- 파이널프로젝트
- 상품수정
- 국비프로젝트
- vscode삭제
- javascript
- vscode폴더삭제
- 쇼핑몰주문취소
- 마이페이지만들기
- 주문조회페이지
- ajax중복체크
- jsp
- 생활코딩
- 자바스크립트
- 아이디중복체크
- 주문취소하기기능
- 쇼핑몰프로젝트
- 쇼핑몰홈페이지만들기
- 상품명중복체크
- 상품삭제
- 구매목록보기
- 스프링부트
- html
- 생활코딩javascript
- 권한체크
- 상품목록보기
- DB공유하기
- 유저삭제
- Today
- Total
INTP의 멋대로 개발 세상
(23.06.23) CSS 기초 (형태, 선택자, 상속, 속성, 트랜지션, 애니메이션) 본문
🔸CSS의 형태
1. HTML 파일에서
- <head> 태그 안에 작성
<style>
h1 {
color: red;
}
</style>
2. HTML 태그에서 직접 사용
<h1 style="color: red"></h1>
3. CSS 파일에서
- 000.css 파일을 따로 만들어서 작성하는 방법
h1 {
color: red;
}
🔸CSS의 선택자
선택자의 이름은 중요하지 않다! 어떻게 쓰이는 지를 익히자 🫡
필요할 때마다 검색해서 사용하면 된다.
1. 태그 선택자
- 태그명으로 스타일을 적용함
<style>
p{
color:blue;
}
</style>
<p>안녕하세요.</p>
2. 아이디 선택자
- CSS에서는 아이디명 앞에 #을 붙인다.
#title
- 같은 id명은 페이지에 하나만 사용 가능
<style>
#title{
color:green;
}
</style>
<h1 id="title">아이디가 title 입니다</h1>
3. 클래스 선택자
- html 태그에서 class 속성을 사용한 태그를 선택한다.
.content
- id와 다르게 페이지에 여러 개 사용 가능
- 그렇기 때문에 디자인 할 때 가장 많이 사용한다. 중복이 가능하니까!
<style>
.content {
color:red;
}
</style>
<p class="content">클래스가 content 입니다.</p>
4. 태그 속성 선택자
- 태그 속성이 적혀있는 태그에만 스타일을 적용한다! (자주 쓰진 않음)
- 아래처럼 사용한다. a태그 중 target 속성이 있는 태그를 선택함.
a[target]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
a[target] {
color: red;
}
</style>
<title>Document</title>
</head>
<body>
<a href="#">이동</a>
<a href="#" target="_blank">새 창으로 이동</a>
</body>
</html>
5. 문자열 속성 선택자
class* = "my"
*을 이용해 my라는 글자가 있는 클래스명을 모두 선택함
div[class="my"] -> my라는 속성이 클래스 명인 경우 (my)
div[class*="my"] -> my라는 문자열이 class 속성값 중 일부일 경우(my-data , my)
- 클래스명에 "my"라는 글자가 들어간 태그는 모두 글자색을 red로 적용함
<style>
div[class*="my"] {
color: red;
}
</style>
6. 일치 선택자
- 여러 선택자가 일치할 때
p태그인데 red라는 클래스가 있고 id가 name인 것은
p.red#name 인 것!
p.red{
color:red;
}
7. 그룹 선택자
- 같은 스타일을 여러 선택자에게 먹이고 싶을 때 쉼표(,)로 구분한다
p, #title, .red {} ➡️ p라는 태그와, id가 title인 태그와, class가 red인 태그를 모두 선택
p, #title, .red{
color:red;
}
8. 자식 선택자
- 특정 태그의 자식 태그에 스타일을 먹이고 싶을 때 꺾쇠(>)를 사용한다
#title > .red
부모가 title이라는 id를 갖고 있는 태그 중에서 red라는 클래스명을 가진 자식 태그를 선택함
#title > .red{
color:red;
}
9. 자손(하위) 선택자
- 특정 태그의 자식 및 자손 태그에 스타일을 먹이고 싶을 때 띄어쓰기를 사용한다
#title .red{} ➡️ title이라는 태그의 하위 태그 중에 red라는 클래스명을 가진 태그 모두를 선택함
#title .red{
color:red;
}
10. 가상 요소 선택자
- 새로운 콘텐츠를 만들거나 추가할 때 사용 (자주 사용하진 않음)
<style>
p::before{
content:'나는';
}
p::after{
content:'입니다.';
}
</style>
<p>홍길동</p>
11. 링크 가상 클래스 선택자
- a 태그로 발생하는 링크에 대한 스타일 지정가능하다.
- 기본은 파란색 링크 -> 방문한 사이트는 보라색 링크
<style>
a:link{ /* 한 번도 방문한 적이 없는 링크 */
color:orange;
}
a:visited{ /* 한 번이라도 방문한 적이 있는 링크 */
color:green;
}
</style>
12. 동적 가상 클래스 선택자
- 마우스를 올리거나 클릭하고 있는 상황의 디자인을 지정할 수 있다.
- hover : 마우스 올리는 것
- active : 건드렸을 때(?)
<style>
p:hover{
color:red;
}
button:active{
color:red;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.btn{
background-color: gray;
}
.btn:hover{
background-color: green;
}
.btn:active{
background-color: blue;
}
</style>
<title>Document</title>
</head>
<body>
<span class="btn">버튼</span>
</body>
</html>
13. 입력 요소 가상 클래스 선택자
- 입력 요소의 상태에 따라 지정한다. input 태그!
<style>
input:focus {
color:red;
}
input:checked {
color:red;
}
input:disabled {
color:red;
}
</style>
아래는 참고!!
인접 형제 선택자
https://thebook.io/080313/0162/
일반 형제 선택자
https://thebook.io/080313/0163/
구조적 가상 클래스 선택자
https://thebook.io/080313/0174/
🔸CSS의 적용 우선 순위
기본 내장 스타일 < 사용자 정의 스타일 < 가장 마지막에 적용한 스타일 < 태그와 가까운 스타일(태그에 직접 작성하는 것)
1. 기본 내장 스타일
<h1>다람쥐 헌 쳇바퀴에 타고파</h1>
2. 사용자 정의 스타일
h1{
font-size:16px;
font-weight:normal;
}
3. 가장 마지막에 적용한 스타일
p{color:red;}
p{color:blue;}
p{color:orange;}
➡️ 결과는 orange색 글자가 됨
4. 태그와 가까운 스타일 (태그 직접 작성)
인라인 스타일이 태그와 제일 가깝기 때문에 중복 될 경우 최우선으로 적용된다.
- 인라인 스타일
- style 태그
- CSS파일
점수로 따지자면!
인라인 스타일 1000점
아이디 선택자 100점
가상 클래스 선택자 10점
클래스 선택자 10점
태그 선택자 1점
눈으로 봐야 편하니 코드로 봐보자~
인라인 스타일 1000점
<div style="color: red;">인라인 스타일</div>
아이디 선택자 100점
<style>
#title{
color:green;
}
</style>
<h1 id="title">아이디가 title 입니다</h1>
가상 클래스 선택자 10점
- :hover 같은 것
클래스 선택자 10점
<style>
.content {
color:red;
}
</style>
<p class="content">클래스가 content 입니다.</p>
태그 선택자 1점
<style>
p{
color:blue;
}
</style>
<p>안녕하세요.</p>
🔸CSS의 스타일 겹치기
- 스타일을 겹치면 점수가 올라간다
<style>
/* 2점 */
nav > h2{}
/* 11점 */
nav .title{}
/* 110점 */
#main .sub{}
/* 11점 */
a:hover{}
/* 13점 */
a:hover span::first-letter{}
</style>
🔸!important
- !important를 사용하면 무조건 최상위 점수가 된다
/* 10000점 */
p{
color:blue !important;
}
🔸CSS 스타일의 상속
- 스타일은 상속되는 경우가 있다.
- 아래와 같이 div에 스타일을 주었는데 p태그에도 적용이 된다.
<style>
div {
color: red;
}
</style>
<div>
<p>상속된 스타일</p>
</div>
상속이 되는 태그도 있고 아닌 태그도 있음!
(궁금하면 아래 링크에서 inherited가 yes인지 확인)
Full property table
www.w3.org
🔸단위
1. px (픽셀)
- Red, Green, Blue (소위 RGB)가 1개씩 모여 1px을 이룬다.
<style>
div {
font-size: 20px;
}
</style>
<div>
<p>px 사이즈</p>
</div>
2. % (퍼센트)
해당 속성의 상위 요소 (기본값) 속성값에 따른 상대적인 크기
<style>
div {
font-size: 500%;
}
</style>
<div>
<p>퍼센트 사이즈</p>
</div>
3. em
- 부모 요소의 텍스트 크기의 상대적인 크기- rem ( html 태그의 텍스트 크기의 상대적인 크기)
<style>
div {
font-size: 2em;
}
</style>
<div>
<p>em 사이즈</p>
</div>
<style>
div {
font-size: 3rem;
}
</style>
<div>
<p>em 사이즈</p>
</div>
4. vw
뷰포트의 너비를 기준으로 상대적인 크기 (화면)
<style>
div {
font-size: 10vw;
}
</style>
<div>
<p>em 사이즈</p>
</div>
vh는 높이
<style>
div {
font-size: 10vh;
}
</style>
<div>
<p>em 사이즈</p>
</div>
🔸색상 표기법
정해진 색상
- 기존에 정해진 색상은 문자로 입력 가능
div {
color: red;
}
RGB 값
- 레드, 그린, 블루 삼원색을 나타냄
- 각 0 ~ 255의 값을 가짐
div {
color: rgb(0, 152, 255);
}
RGBa 값
- a는 투명도를 말함 (alpha channel)
- 0 ~ 1 의 값
- 1은 투명, 0은 불투명
div {
color: rgba(0, 152, 255, 0.5);
}
Hex
- Hex는 16진수라는 뜻
- RGB 값을 16진수로 표현한다
div {
color: #0098ff;
}
🔸CSS 속성 - font
font-family
- font-family 속성을 사용하면 글꼴을 변경할 수 있다
- 띄어쓰기가 있는 글꼴은 쌍따옴표("")로 감싸주어야 한다.
- 주의) 글꼴을 사용할 때는 라이선스를 꼭 확인할 것!!!!
- 마지막에는 반드시 글꼴 유형(generic-family)을 작성하도록 권장한다.
(사용자 지정 폰트를 가져오지 못했을 때 사용하기 위해서)
형식
font-family:<글꼴1>, <글꼴2>, ...<글꼴 유형>;
예시
p {
font-family: BatangChe, "Times New Roman";
}
웹 폰트 사이트들
눈누
상업용 무료한글폰트 사이트
noonnu.cc
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
글꼴 유형 종류
serif - 삐침이 있는 명조 계열의 글꼴
sans-serif - 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴
monospace - 텍스트 폭과 간격이 일정한 글꼴
cursive - 손으로 쓴 것 같은 필기체 계열의 글꼴
fantasy - 화려한 글꼴
font-size
- 폰트의 사이즈 (텍스트 크기)를 변경하고 싶을 때 사용하는 속성
p {
font-size: 14px;
}
font-weight
- 텍스트의 굵기를 변경하는 속성
- 900 이상은 잘 적용되지 않는 경우도 있음.
- 폰트에 따라 차이가 있음.
p {
font-weight:100;
font-weight:600;
font-weight:900;
font-weight:normal;
font-weight:bold;
}
font-style
- 텍스트의 스타일을 지정한다.
- normal : 정자체
- italic (이탤릭체) : 흘림 - 손글씨 느낌
- oblique (오블리크) : 기울임 - 정자체를 오른쪽으로 기울임
p {
font-style:normal;
font-style:italic;
font-style:oblique;
}
color
- 텍스트의 색상을 지정한다.
p{
color:red;
}
text-align
- 텍스트를 정렬할 때 사용한다.
- justify는 화면 넓이에 맞춰서 텍스트를 펼친다.
p{
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
}
text-decoration
- 텍스트를 꾸며줄 때 사용한다.
- line-through : 중간선
- overline : 텍스트 위 선
- underline : 텍스트 아래 선
p{
text-decoration: none;
text-decoration: line-through;
text-decoration: overline;
text-decoration: underline;
}
letter-spacing
- 자간
p{
letter-spacing:15px;
}
line-height
- 텍스트 한 줄의 높이를 지정한다.
- 한글의 줄간격과 같다.
p{
line-height: normal;
line-height: 1;
line-height: 200%;
line-height: 16px;
}
여기서 Line-height값이 의미하는것은 폰트 사이즈를 포함해서 leading이 차지하는 부분이 합쳐진 총 폰트의 높이를 의미한다.
이 line-height값은 폰트 제작자가 기본으로 설정해놓은 높이 값인 normal이 디폴트로 설정 된다.
line-height를 1로 설정한다는것은 폰트사이즈만큼 높이를 갖겠다는 것이다. 따라서, line-height와 font-size가 모두 16px이다.
위 사진 자료 출처 https://simsimjae.tistory.com/331
🔸CSS 박스 모델
쉽게 설명하면,
content - 사람
padding - 옷의 두께
border - 옷의 외부 디자인
margin - 거리두기
margin
- 요소 사이의 거리를 벌리거나 좁힌다.
- 사람과 옷으로 비유하면 사회적 거리두기를 강화하거나 약화하는 것에 해당한다.
- 속성을 하나하나 주지 않고 margin 하나로 쓸 때, 값 순서는 top - right - bottom - left 이다.
- 코드 가독성 면에 있어서는 일일이 margin-top..이런 식으로 쓰는 게 보기 깔끔하다.
p {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin: 10px 10px 10px 10px;
margin: 10px 10px;
}
margin 겹침 현상
- 마진이 서로 만나면 가장 큰 마진 값으로 겹쳐버리는 현상이다.
border
- 요소의 테두리를 담당한다.
- 사람과 옷으로 비유하면 옷의 무늬에 해당함.
p {
border-width: 1px;
border-style: solid;
border-color: red;
border-bottom-style: dotted;
border:1px solid red;
}
padding
- 요소의 "내부" 두께를 조절한다.
- 옷의 두께
- margin과 마찬가지로, 값 순서는 top - right - bottom - left 이다. 이외에도 방향과 관련된 값을 쓸 때 순서는 다 이와 같다.
p {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding: 10px 10px 10px 10px;
padding: 10px 10px;
}
content
- 요소의 데이터이다 (사람)
- content 자체를 다루는 속성은 없지만 넓이와 높이를 조절할 수 있다.
p {
width: 100px;
height: 50px;
}
box-sizing
- 요소의 높이와 넓이를 재는 기준.
- content 기준으로 할 것이냐, border 기준으로 할 것이냐
- 사람과 옷으로 비유하면, 나와 내 옷까지 포함한 게 내 덩치와 키인지, 내 몸으로만 잰 것이 내 덩치과 키인지 기준을 정하는 것!!!!
p {
box-sizing:border-box;
box-sizing:content-box;
}
display
- 태그의 박스 모델 표시 형식이다
- block은 가로 한 줄 차지
- inline은 요소의 너비를 box-size 만큼 차지한다.
- inline-block 속성은 inline처럼 요소의 넓이가 box-size만큼 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적인 특징이 있다. 그래서 img 태그를 사용할 때, 웹 브라우저의 수평 공간이 남아 있으면 한 줄로 배치된다.
p {
display: block;
}
border-radius
border-radius - CSS: Cascading Style Sheets | MDN
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
developer.mozilla.org
box-shadow
box-shadow - CSS: Cascading Style Sheets | MDN
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
developer.mozilla.org
🔸CSS 속성 - background
backgorund-color
- 요소의 배경에 색상 넣기
p {
background-color:red;
}
background-image
- 요소의 배경에 이미지를 넣을 수 있다
- 따옴표 주의!! 빼먹지 말자
p {
background-image:url('images/coffee.jpg');
}
background-repeat
- 이미지의 반복 설정을 변경한다.
p {
background-repeat:no-repeat;
}
background-size
- 이미지 크기를 지정한다.
- 늘리기(cover) , 맞춤(contain)
p {
background-size:cover;
}
background-position
- 삽입하려는 이미지의 위치를 지정한다.
background-position:<x 위치> <y 위치>;
p {
background-position:100%;
}
background-attachment
- 삽입된 이미지를 스크롤 할 때의 작동 방식을 지정한다.
- 스크롤에 따라 움직일지 말지 결정하는 것!
p {
background-attachment:fixed;
}
🔸CSS 속성 - position
- 정말 필요할 때 사용하는 것이 좋다. 최소한으로!!
- 기본 방식은 static
- relative : 기존 위치에서 기반해서 좌표속성을 이용
- absolute : 절대적 위치 - 주의! 크롬 브라우저 사용할때는 꼭 top과 left 속성을 같이 사용해 주어야 위치 오류가 나지 않음!
static - 요소를 기본 방식대로 배치
relative - 요소를 기본 방식대로 배치 + 좌표 속성을 사용 ➡️ 기존 위치에 기반해서 좌표 속성을 이용
absolute - 요소를 절대적인 방식으로 배치 ⚠️주의⚠️ 크롬 브라우저 사용시에는 꼭 top, left 속성 사용해야 위치 오류가 나지 않음!!
fixed - 요소를 절대적인 방식으로 배치 + 스크롤 고정
sticky - 요소를 절대적인 방식으로 배치 + 지정한 좌표에서 스크롤 고정
z-index
- 겹쳐있는 요소의 z축 위치를 결정함 (요소 위치의 우선순위를 결정함)
- 속성값이 기본적으로 0으로 세팅되어 있다.
- 다른 것에 비해서 위쪽에 배치되려면 상대적으로 큰 숫자를 써야 한다. (마이너스도 사용 가능함)
- 이미지, 글자 등 가
- position이 relative나 absolute 일 때만 작용 / static에서는 적용안됨
float
- 요소 사이에 들어가는 요소를 만들 때 사용한다.
- block 요소도 float를 이용해 inline과 유사하게 만들 수 있다.
p {
float:left;
}
clear
- float 속성을 해제할 때 사용한다
p {
clear:left;
}
🔸CSS 속성 - transition
- CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것
- 단어 그대로 "전환" 이라는 뜻!!
- 마우스 커서를 올리면 변하는 :hover 도 transition의 일종이다.
- 버튼 클릭 모션도 transition의 일종이다.
transition-property
- 전환 효과를 적용할 속성을 선택한다.
- 기본적으로 선택하지 않아도 되지만, 특정 속성을 콕! 집고 싶을 때 사용
p {
transition-property:background-color;
}
transition-duration
- 전환 효과의 지속 시간을 설정한다.
transition-duration:<시간>;
p{
background-color: red;
}
p:hover {
background-color: blue;
transition-property:background-color;
transition-duration:1s;
}
transition-timing-function
- 전환 효과의 "진행 속도"를 지정한다.
transition-timing-function:<속성값>;;
p{
background-color: red;
}
p:hover {
background-color: blue;
transition-property:background-color;
transition-duration:1s;
transition-delay:1s;
transition-timing-function:ease;
}
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{
background-color: red;
width: 200px;
/* 특정 속성만 트랜지션 주고 싶을 때 */
transition-property: background-color;
/* red로 변할 때 1초가 걸림 */
transition-duration: 1s;
/* 마우스를 올렸을 때 1초 뒤에 트랜지션이 실행됨 */
transition-delay: 1s;
}
h1:hover{
background-color: green;
width: 500px;
/* 특정 속성만 트랜지션 주고 싶을 때 */
transition-property: background-color;
/* green으로 변할 때 5초가 걸림 */
transition-duration: 5s;
}
</style>
<title>Document</title>
</head>
<body>
<h1>트랜지션</h1>
</body>
</html>
🔸CSS 속성 - animation
- transition보다 더 정확하고 부드럽게 움직임 제어 가능
- transition은 건드려야 실행이 되는데, 애니메이션은 자동으로 실행
- 애니메이션이 모두 실행이 되면 흰색으로 돌아옴
⭐keyframes
- 키 프레임에는 시작과 종료에 해당하는 최소 2개 시점에 대한 스타일이 정의되어야 한다.
- 영상 편집할 때 그 키 프레임 생각하면 된다.
- 지정할 스타일 시트에 animation-name과 animation-duration을 넣어준다.
@keyframes <키 프레임명>{
0%{/* CSS 코드 */}
n%{/* CSS 코드 */}
100%{/* CSS 코드 */}
}
@keyframes bgchange {
0% {
background-color: red;
}
25% {
background-color: orange;
}
50% {
background-color: yellow;
}
100% {
background-color: green;
}
}
div{
width:100px;
height:100px;
background-color:red;
animation-name:bgchange;
animation-duration:5s;
}
➡ 퍼센테이지는 꼭 몇 개로 구분할 필요없이 사용자 정의임!!
animation-iteration-count
- 애니메이션 반복 횟수를 정한다.
- 무한 반복일 경우, infinite를 넣는다.
animation-iteration-count: <정수> or <infinite>;
@keyframes bgchange {
0% {
background-color: red;
}
25% {
background-color: orange;
}
50% {
background-color: yellow;
}
100% {
background-color: red;
}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: bgchange;
animation-duration: 5s;
animation-iteration-count: infinite;
}
animation-delay
- 애니메이션이 시작되는 시간을 지연시킨다.
animation-delay:<지연 시간>;
@keyframes bgchange {
0% {
background-color: red;
}
25% {
background-color: orange;
}
50% {
background-color: yellow;
}
100% {
background-color: red;
}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: bgchange;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay:3s;
}
animation-fill-mode
- 애니메이션이 끝났을 때 흰색으로(원래대로) 안돌아가게 할 수 있다.
animation-fill-mode:<속성값>;
@keyframes bgchange {
0% {
background-color: red;
}
25% {
background-color: orange;
}
50% {
background-color: yellow;
}
100% {
background-color: red;
}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: bgchange;
animation-duration: 5s;
anima
animation-direction
- 애니메이션의 진행 방향을 설정할 수 있다.
- reverse : 반대로
- alternative : 왔다갔다
@keyframes bgchange {
0% {
background-color: red;
}
25% {
background-color: orange;
}
50% {
background-color: yellow;
}
100% {
background-color: green;
}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: bgchange;
animation-duration: 5s;
animation-direction:reverse;
}
🔸CSS 속성 - transform
- 요소에 특정 변형 효과를 지정할 수 있다.
함수 | 설명 |
translate(x, y) | 요소를 현재 위치에서 x(x축)와 y(y축)만큼 이동합니다. |
translateX(n) | 요소를 현재 위치에서 n만큼 x축으로 이동합니다. |
translateY(n) | 요소를 현재 위치에서 n만큼 y축으로 이동합니다. |
scale(x, y) | 요소를 x(x축)와 y(y축)만큼 확대 또는 축소합니다. |
scaleX(n) | 요소를 n만큼 x축으로 확대 또는 축소합니다. |
scaleY(n) | 요소를 n만큼 y축으로 확대 또는 축소합니다. |
skew(xdeg, ydeg) | 요소를 x축과 y축으로 xdeg, ydeg(각도)만큼 기울입니다. |
skewX(deg) | 요소를 deg(각도)만큼 x축 방향으로 기울입니다. |
skewY(deg) | 요소를 주어진 deg(각도)만큼 y축 방향으로 기울입니다. |
rotate(deg) | 요소를 deg(각도)만큼 회전합니다. |
코딩 자율학습 HTML + CSS + 자바스크립트: 6.8.1 transform 속성
더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다.
thebook.io
'2023 여름 특강 > HTML, CSS, JS' 카테고리의 다른 글
(23/06/23) HTML 기초 (테이블) (0) | 2023.06.26 |
---|---|
(23/06/22) HTML 기초 (0) | 2023.06.22 |