[HTML][CSS]웹 개발 언어_콘텐츠 요소 변환 및 전환 효과 적용

 

 

---

 

 

데이터 분석을 위한 웹 개발 언어

 

✔️ 콘텐츠 모양 변경

✔️ 콘텐츠 모양 변경_2

 

 

 

---

 

 

✔️ 콘텐츠 모양 변경

 

 

 

 

크기 조정

scale : 크기 확대/축소
1은 원래 크기 1보다 작으면 축소, 크면 확대

section article {
    width: 100%;
    height: 100%;
    background: blue;
    opacity: 0.3;}

section:nth-of-type(1) article {transform: scale(0.8);}

<h1>콘텐츠 모양을 자유롭게 변경</h1>
<div class="transform">
    <section>
        <article></article>
    </section>
</div>

(파란 박스가 원래 크기의 80%로 설정)

 

 

 

 

기울기 조정

skewX : 가로(X축) 방향으로 기울임
skewY : 세로(Y축) 방향으로 기울임

section article {
    width: 100%;
    height: 100%;
    background: blue;
    opacity: 0.3;}
    
section:nth-of-type(1) article {transform: skewY(-20deg);}

<div class="transform">
    <section>
        <article></article>
    </section>
</div>

(파란 박스가 세로 방향으로 20도 기울어짐)

 

 

 

 

위치 변경

translate : 요소를 이동시킴
translate(x, y)로 x축과 y축 방향 모두 지정 가능

section article {
    width: 100%;
    height: 100%;
    background: blue;
    opacity: 0.3;}

section:nth-of-type(1) article {transform: translate(50px);}

<div class="transform">
    <section>
        <article></article>
    </section>
</div>

(파란 박스가 오른쪽 방향으로 50px 이동)

 

 

 

 

요소 회전

rotate : 요소를 회전시킴
rotate(양수deg) : 시계 방향으로 양수 각도만큼 회전
rotate(음수deg) : 반시계 방향으로 음수 각도만큼 회전

.transform2 section article {
    width: 100%;
    height: 100%;
    background: blue;
    opacity: 0.3;
}

.transform2 section:nth-of-type(1) article {transform: rotateX(45deg);}

<h1>콘텐츠 모양을 자유롭게 변경하기2</h1>
<div class="transform2">
    <section>
        <article></article>
    </section>
</div>

(파란 박스가 시계 방향으로 45도 회전하여 다이아몬드 모양으로 보임)

 

 

---

 

 

✔️ 콘텐츠 모양 변경_2

 

 

 

 

3D 효과 추가된 요소 회전

perspective :  원근감을 만듦
100px : 과장된 원근감
400px : 적당한 원근감
1000px : 거의 평면처럼 보임

rotateX : X축 기준으로 회전(위아래 회전)
rotateY : Y축 기준으로 회전(좌우 회전)

.transform2 section {perspective: 400px;}
.transform2 section:nth-of-type(1) article { transform: rotateX(45deg); }
.transform2 section:nth-of-type(2) article { transform: rotateY(45deg); }
.transform2 section:nth-of-type(3) article { transform: translateZ(-100px); }

<div class="transform2">
  <section><article></article></section>
  <section><article></article></section>
  <section><article></article></section>
</div>

(transform2에 원근감 400px을 적용, 1번째 요소는 X축(위아래) 45도 회전,

2번째 요소는 Y축(좌우) 45도 회전, 3번째 요소는 Z축으로 -100px 멀어짐)

 

 

 

 

 

중심축 변경

transform-origin : 중심축 변경

.transform3 section {perspective: 600px;}
.transform3 section:nth-of-type(1) article { transform: rotateY(120deg); transform-origin: center center; }
.transform3 section:nth-of-type(2) article { transform: rotateY(120deg); transform-origin: right center; }

<div class="transform3">
  <section><article></article></section>
  <section><article></article></section>
</div>

(transform3의 1번째 article 요소는 가운데 기준으로 Y축 방향 120도 회전,

2번째 article 요소는 오른쪽을 기준으로 Y축 방향 120도 회전)

 

 

 

요소 전환 효과

transition : 전환효과 적용

.transition .red_box {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  color: white;
  line-height: 100px;}

.transition .red_box:hover {
  background-color: blue;
  transition-duration: 2s;
  transition-delay: 1s;}

 

<div class="transition">
  <div class="red_box">red_box</div>
</div>

(transition의 빨간 박스가 마우스를 가져다 대면 1초 후 파란색으로 2초간 색상이 변함)

 

 

 

 

전환 속도 조절

transition-timing-function : 전환 속도 조절

주요 속성값
linear : 속도가 일정
ease : 처음에는 속도가 빨라지다가 중간부터 느려짐
ease-in : 처음에는 속도가 느림, 점점 빨라짐
ease-out : 처음에는 빠름 점점 느려짐
ease-in-out : 처음에는 느림 중간 빠름 마지막 느려짐

.container .bar {
  width: 10px;
  border: 1px solid black;
  margin-bottom: 10px;
  background-color: gray;
  color: white;
  transition-property: width;
  transition-duration: 5s;}
  
.container:hover .bar { width: 220px; }
.bar:nth-child(1) { transition-timing-function: linear; }
.bar:nth-child(2) { transition-timing-function: ease; }
.bar:nth-child(3) { transition-timing-function: ease-in; }
.bar:nth-child(4) { transition-timing-function: ease-out; }
.bar:nth-child(5) { transition-timing-function: ease-in-out; }

<div class="container">
  <div class="bar">linear</div>
  <div class="bar">ease</div>
  <div class="bar">ease-in</div>
  <div class="bar">ease-out</div>
  <div class="bar">ease-in-out</div>
</div>

(회색 막대가 10px에서 220px까지 5초간 늘어나는데

적용된 속성값에 따라 늘어나는데 속도가 각각 다르게 적용됨)

 

 

---

 

 

이번 내용에서는 HTML과 CSS에서의 

CSS를 활용한 콘텐츠 모양 변경 및 요소 전환 효과 설정에 대해 공부하였습니다.

 

HTML을 공부하는 이유는 데이터 분석을 위해서는 데이터 수집을 진행해야 하는데

웹에서 원하는 데이터를 효율적으로 가져오기 위함입니다.

 

더불어 데이터 분석을 위해서 DB와 SQL을 공부도 필요한데

위 블로그 글 참고해서 공부하면 좋을 것 같습니다.

 

'BOOTCAMP/SQL(MySQL)' 카테고리의 글 목록