2. CSS - 전체 선택자, hover, transition, transform

티스토리 뷰

💻 Web/프론트엔드 입문 스터디

2. CSS - 전체 선택자, hover, transition, transform

싱 이 2022. 10. 11. 20:43

[2주차 CSS 실습 내용 및 참고 자료 정리]

1. 구현한 페이지 내용

이번에 구현한 페이지는 '나의 웹사이트'와 '갤러리', 이 두 페이지이다. 웹페이지의 기본 골격만이 갖춰진 HTML 파일을 기반으로 CSS 파일을 작성해 웹페이지를 수정해보는 작업을 해보았다. '나의 웹사이트' 라는 주제의 웹페이지는 블로그 첫 화면처럼 구성을 하였고, '갤러리' 페이지는 나의 웹사이트 페이지에서 이동을 하면 사진들이 나열된 형태로 보이는 페이지이다.

2. 코드

1) 나의 웹사이트 CSS 코드

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}


/* Header/Blog Title */
header {
  padding: 30px;
  text-align: center;
  background: rgb(255, 201, 184);
}

h1 {
  font-size: 50px;
}

/* Style the top navigation bar */
nav {
  overflow: hidden;
  background-color: rgb(63, 28, 30);
}

/* Style the topnav links */
li a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
li a:hover {
  background-color: rgb(209, 137, 141);
  color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
section {   
  float: left;
  width: 75%;
}

/* Right column */
aside {
  float: right;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Fake image */
.fakeimg {
  background-color: rgb(193, 160, 147);
  width: 100%;
  padding: 20px;
  margin-bottom: 10px;
}

.mypic{
  padding-left: 100px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

.popular{
  text-align: center;
}

.post_title{
  background-color: bisque;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
}

.intro{
  text-align: center;
  font-weight: bold;
}

/* Footer */
footer {
  padding: 20px;
  text-align: right;
  background: #ddd;
  margin-top: 20px;
  clear : both;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  section, aside {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  nav a {
    float: none;
    width: 100%;
  }
}

2) 갤러리 CSS 코드

<style>


.title{
  margin-top: 200px;
  margin-bottom: 50px;
  text-align: center;
  font-family: 'Garamond', serif;
  font-size: 50px;
}

div.gallery {
  border: 1px solid #ccc;
  overflow: hidden;
}

div.gallery:hover {
  border: 1px solid #777;
  transform: scale(1.1);
  transition: all 0.2s linear;
}

div.gallery img {
  width: 100%;
  height: auto;

}

div.desc {
  padding: 15px;
  text-align: center;
  background-color: white;
}

.welcome{
  text-align: center;
}

* {
  box-sizing: border-box;
  background-color: rgb(236, 228, 219);
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>

3. 공부한 포인트

1) 전체 선택자(*)

CSS 스타일 코드를 쓸 때 HTML 파일의 특정 부분에 효과를 주기 위해선 선택자를 명시해야한다. 쓸 수 있는 선택자의 종류는 꽤 다양한 편으로, 태그 선택자, 클래스 선택자, 아이디 선택자, 전체 선택자가 있다. 이 중 전체 선택자에 대해서 알아보자!

전체 선택자는 스타일을 HTML 파일 모든 요소에 적용을 하고 싶을 때 사용한다. 모든 하위 요소에 효과를 적용할 수 있으며, ' * ' 기호를 선택자 위치에 작성해주면 된다. 예시를 들어보자.

* {
  box-sizing: border-box;
  background-color: rgb(236, 228, 219);
}

위 코드의 경우 갤러리 페이지 코드 중 일부이다. 전체 선택자가 사용이 되었고, 따라서 웹페이지의 배경색은 rgb(236, 228, 219)로 지정이 되고, box-sizing은 border-box 형태로 구현이 된다.

2) hover

마우스를 올리면 반응형 효과를 나타내기 위해 자주 썼던 hover 효과! 갤러리 웹페이지 코드를 짤 때도 활용이 되었다. 페이지에 있는 사진들 위로 마우스를 이동하면 이미지의 크기가 커지는 효과를 주었다. 이 참에 hover 효과에 대해 정리해보자:)

hover 효과는 CSS 의사 클래스(pseudo class) 중 하나로, html에서 요소에 마우스를 올렸을 때 반응하게 하는 css의 요소이다. 사용자가 웹페이지 특정 객체에 마우스 포인터를 올리면 지정한 효과가 적용이 된다. 의사 클래스에 대한 개념은 추후 다뤄보도록 하고, hover가 쓰인 코드 예제를 보면서 더 깊은 이해를 해보자.

div.gallery:hover {
  border: 1px solid #777;
  transform: scale(1.1);
  transition: all 0.2s linear;
}

갤러리 웹페이지의 css 코드 중 일부이다. gallery 클래스 내부에는 이미지들이 웹페이지 가로로 나열이 되어 있다. 이때, gallery 클래스 내부 객체에 마우스 포인터를 올리게 되면 짠 코드대로 효과가 적용이 된다. 이미지의 테두리 (border)가 1px의 두께로 회색 (#777)로 변하게 되며, transform 속성과 transition 속성으로 인해 이미지의 크기가 커진다. transform과 transition 속성에 대해서는 글 후반부에 더 자세하게 설명을 해볼 예정이다.

덧) div.gallery라고 쓴 이유가 무엇일까요🤔

보통 .gallery라고만 쓰는 데, 굳이 div.gallery라고 쓴 이유는 무엇일까? 바로 selector specificity(선택자 명시도)때문이다. 간단히 말해, 어느 선택자인지 더욱더 명확하게 명시해주는 역할이라고 생각하면 된다. 단순히 클래스 이름만 선택해 .gallery라고 작성하게 되면 HTML 파일의 모든 속성을 훑어 gallery 클래스를 찾는 것이지만, div.gallery라고 명시를 해주면 div 태그 중 gallery 클래스를 찾을 수 있으므로 빠르고 명확하게 접근이 가능하다. 여러 개의 선택자가 작성이 되는 경우 selector specificity가 더욱 중요해지기 때문에, 규칙들을 읽어보는 것이 좋을 것 같다.

덧2) 의사 클래스란?

CSS에서 의사 클래스(pseudo class)는 선택하고자 하는 특정 HTML 요소에 특별한 효과를 주고 싶다는 것을 명시할 때 사용한다. 사용을 할 경우 아래와 같이 선택자 옆에 추가를 하고 코드를 작성하면 된다. 혹은 클래스나 아이디를 활용해 의사 클래스를 사용할 수도 있다.

선택자:의사클래스이름 {속성: 속성값}

선택자.클래스이름:의사클래스이름 {속성: 속성값}

선택자#아이디이름:의사클래스이름 {속성: 속성값}

의사 클래스의 종류는 다양하다. 대표적인 의사 클래스로 hover가 포함이 되어 있는 동적 의사 클래스, 상태 의사 클래스, 구조 의사 클래스 등이 있다. 더 다양한 의사 클래스에 대해서 알고싶다면 모질라를 참고해보자.

참고자료:

hover

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

https://jh91.tistory.com/entry/CSS-%EC%84%A0%ED%83%9D%EC%9E%90-Hover

https://velog.io/@aerirang647/hoverhover-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EC%9E%90

의사클래스

http://www.tcpschool.com/css/css_selector_pseudoClass

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

3) transform & transition

div.gallery:hover {
  border: 1px solid #777;
  transform: scale(1.1);
  transition: all 0.2s linear;
}

위에도 언급을 했듯이, 갤러리 웹페이지에서 transition과 transform 속성을 사용해 이미지에 마우스를 올려놓을 경우 이미지 크기가 커지도록 했다. 이때 쓰인 transition과 transform 속성에 대해 알아보자. 구체적으로 얘기를 하자면 기존의 이미지에서 1.1배 정도 커지며, 0.2s라는 일정한 속도로 크기가 변화한다. 자세한 개념은 아래에 적어놓았다:)

👍 transform

우선 transform 속성은 특정 요소에 회전, 크기 조절, 기울이기, 이동 효과를 줄 때 사용한다. transform 뒤에 여러 명령어가 나올 수 있다.

rotate: 객체를 회전시킴

문법은 아래와 같다. angle에는 각의 크기를 입력하고, 입력된 각 크기만큼 객체가 회전된다. 각의 단위로는 deg, rad, grad, turn 등을 사용할 수 있으며, 이때 turn은 360도를 의미한다.

transform: rotate( angle ) /*시계 방향으로 90도 회전. 단, 각이 음수면 반시계방향*/
transform: rotateX( angle ) /*x축을 기준으로 90도 회전*/
transform: rotateY( angle ) /*y축을 기준으로 90도 회전*/

/*-ms-transform: rotateX( angle ) : IE 9 이상
-webkit-transform: rotateX( angle ) : 사파리, 크롬, 오페라 브라우저에서 사용
이 명령어는 모든 효과에서도 적용할 수 있는 부분!*/

translate: 요소를 각각 x축과 y축으로 지정한 값만큼 이동시킴

문법은 아래와 같으며 크기 부분에는 이동하고 싶은만큼의 크기를 적어준다. px 단위, % 단위 등 다양한 단위를 작성할 수 있다.

transform: translate( 크기A, 크기B ) /*오른쪽으로 A만큼, 아래쪽으로 B만큼 이동 */
transform: translateX( 크기 ) /*오른쪽으로 이동. 단, 음수면 왼쪽으로 이동*/
transform: translateY( 크기 ) /*아래로 이동. 단, 음수면 위쪽으로 이동*/

scale: 요소를 확대 혹은 축소할 수 있음

문법은 아래와 같고 비율 부분에는 기존 객체 크기의 몇 배를 늘리거나 축소하고 싶은지 적어주면 된다.

transform: scale( 비율 ); /*가로와 세로 모두 동일한 비율만큼 확대, 크기가 커짐*/
transform: scale( 비율A, 비율B ); /*가로로 A배만큼, 세로로 B배만큼 확대됨*/
transform: scaleX( 비율 ); /*가로로 비율만큼 확대됨*/
transform: scaleY( 비율 ); /*세로로 비율만큼 확대됨*/

/*1보다 작은 값은 비율 부분에 넣어주면 크기가 작아짐!*/

skew: 요소를 비트는 효과를 나타낼 수 있음

문법은 아래와 같으며, 지정한 각의 크기만큼 사물을 비틀 수 있다.

transform: skewX( angle ); /*가로 방향으로 angle 만큼 비틈*/
transform: skewY( angle ); /*세로 방향으로 angle 만큼 비틈*/
transform: skewX( angleA, angleB ); /*가로 방향으로 A만큼, 세로 방향으로 B만큼 비틈*/

코드에 대한 설명은 첨부했지만, 아무래도 예시를 보면서 실제로 어떻게 효과가 적용되는지 보고 싶다면 이 사이트에 들어가보자! 모든 코드에 대한 예제가 그림으로 제시되어 있어 큰 도움이 된다.

✌ transition

다음으로 transition 속성의 경우 CSS 속성(property) 값이 변할 때, 속성 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 간단히 말해, 애니메이션의 속도를 조절하는 방법을 제공한다. 구체적으로 얘기를 하면 어떤 속성에 변화를 줄지, 언제 애니메이션을 시작할지, 얼마나 지속할지 등을 결정을 하게 된다. transition에도 대표적으로 3가지 속성들이 구체적으로 명시되어있다.

transition: 지정한 요소를 지정된 시간동안 지속되게 해줌

transition 속성을 사용할 경우 두 가지 조건이 필요하다.

1) CSS 스타일에서 변환하고 싶은 부분을 작성한다.

2) 전환 효과가 지속될 시간을 설정한다.

이 두 가지를 다 작성을 해야 지정한 효과가 정한 시간만큼 지속이 된다. 만약 시간을 적어주지 않으면 자동적으로 0초가 되어 아무런 지속 효과가 일어나지 않는다.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
/*width값에 변화가 생기면(ex. hover 명령어로 크기를 키우면) width는 2초동안 확대됨*/

transition-timing-function: transition 효과의 시간당 속도를 설정함

transition-timing-function 속성의 속성값으로는 다음과 같이 설정할 수 있다.

1) linear: transition 속도가 처음부터 끝까지 일정한 속도로 변화한다.

2) ease: 디폴트 값으로, transition 효과가 천천히 시작되어 빨라졌다가 느려지는 양상을 보인다.

3) ease-in: transition 효과가 천천히 시작된다.

4) ease-out: transition 효과가 천천히 끝난다.

5) ease-in-out: transition 효과가 천천히 시작되었다가 천천히 끝난다.

6) cubic-bezier(x1, y1, x2, y2):

transition 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행이 된다. 애니메이션의 속도를 그래프 개념을 이용해서 조금 더 세밀한 조절을 할 때 사용하는 명령어이다. x1은 베지어(bezier) 곡선의 '시작곡선'을 만드는 데 기준이 되는 x좌표이며 y1은 '시작 곡선'을 만드는 데 기준이 되는 y좌표이다. x2는 '마지막 곡선'을 만드는데에 기준이 되는 x좌표이고, y2는 '마지막 곡선'을 만드는데에 기준이 되는 y좌표이다. (x1, y1)와 (x2, y2) 좌표를 이용해 접선을 만들고, 곡선을 만들어 애니메이션 속도를 정하는 것 같다. 보충 자료를 보고 싶다면 여기를 클릭해보자! 예시가 있어 그래도 이해가 잘 간다.

transition-delay: transition 효과가 나타나긴 전까지의 지연 시간을 설정함

transition-delay가 설정이 되어있다면, 지정된 시간 이후에 transition 효과가 나타난다.

/*마우스를 올려놓고 1초 있다가 상자 크기 변함*/
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>CSS3 Transition</title>
	<style>
		#resize {
			background-color: orange;
			height: 100px;
			width: 150px;
			margin: 10px;
			transition: width 1s, height 2s;
			transition-delay: 1s;
		}
		#resize:hover {
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
	<div id="resize">마우스를 올려놓고 1초가 지나야 전환(transition) 효과가 동작합니다.</div>
</body>
</html>

참고자료

transform

https://www.codingfactory.net/12593#transform_rotate 📌추천📌

https://m.blog.naver.com/brusher3063/221692760140

https://aueyoo.tistory.com/23

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transition

http://www.tcpschool.com/css/css3_transform_transition

https://basemenks.tistory.com/281

https://brunch.co.kr/@99-life/5

베지어 곡선을 그릴 때 두 좌표에 따라 바뀌는 그래프의 모습이 궁금하다면 여기로!