(23.06.23) CSS 기초 (형태, 선택자, 상속, 속성, 트랜지션, 애니메이션)

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		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

Tags more

Archives

Today

Total

관리 메뉴

INTP의 멋대로 개발 세상

(23.06.23) CSS 기초 (형태, 선택자, 상속, 속성, 트랜지션, 애니메이션) 본문

2023 여름 특강/HTML, CSS, JS

(23.06.23) CSS 기초 (형태, 선택자, 상속, 속성, 트랜지션, 애니메이션)

인팁구름 2023. 6. 26. 01:42

🔸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>

아래는 참고!!

🔸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

'2023 여름 특강/HTML, CSS, JS' Related Articles

Comments

INTP의 멋대로 개발 세상

(23.06.23) CSS 기초 (형태, 선택자, 상속, 속성, 트랜지션, 애니메이션) 본문

(23.06.23) CSS 기초 (형태, 선택자, 상속, 속성, 트랜지션, 애니메이션)

🔸CSS의 형태

1. HTML 파일에서

2. HTML 태그에서 직접 사용

3. CSS 파일에서

🔸CSS의 선택자

1. 태그 선택자

2. 아이디 선택자

3. 클래스 선택자

4. 태그 속성 선택자

5. 문자열 속성 선택자

6. 일치 선택자

7. 그룹 선택자

8. 자식 선택자

9. 자손(하위) 선택자

10. 가상 요소 선택자

11. 링크 가상 클래스 선택자

12. 동적 가상 클래스 선택자

13. 입력 요소 가상 클래스 선택자

인접 형제 선택자

일반 형제 선택자

구조적 가상 클래스 선택자

🔸CSS의 적용 우선 순위

1. 기본 내장 스타일

2. 사용자 정의 스타일

3. 가장 마지막에 적용한 스타일

4. 태그와 가까운 스타일 (태그 직접 작성)

점수로 따지자면!

🔸CSS의 스타일 겹치기

🔸!important

🔸CSS 스타일의 상속

🔸단위

1. px (픽셀)

2. % (퍼센트)

3. em

4. vw

🔸색상 표기법

정해진 색상

RGB 값

RGBa 값

Hex

🔸CSS 속성 - font

font-family

글꼴 유형 종류

font-size

font-weight

font-style

color

text-align

text-decoration

letter-spacing

line-height

🔸CSS 박스 모델

margin

margin 겹침 현상

border

padding

content

box-sizing

display

border-radius

box-shadow

🔸CSS 속성 - background

backgorund-color

background-image

background-repeat

background-size

background-position

background-attachment

🔸CSS 속성 - position

z-index

float

clear

🔸CSS 속성 - transition

transition-property

transition-duration

transition-timing-function

🔸CSS 속성 - animation