CSS 기본 문법 / 단위 / position / animation

비공개 포스팅으로 웹 게임 강의 내용 정리하면서 모르는 부분 빨간색으로 써봤는데

이난리여서 CSS 공부를 하고 넘어가야 할 것 같다.

사실 그동안 CSS 쓴것도 JS 쓰면서 날림으로(구글링으로) 해결한게 대부분이라.. 아는게 없다.

차근차근 해야지 😢

---

css 문법

css 코드는 기본적으로

selector { property: value }

이렇게 생겼다.

어떤 엘리먼트의(selector) 어떤 부분을(property) 어떻게(value) 꾸밀지 정의하는 것이다.

{ } 안의 선언(property: value)은 세미콜론(;)으로 구분한다.

---

selector에는 여러 유형의 엘리먼트가 올 수 있다.

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

CSS 선택자 - CSS: Cascading Style Sheets | MDN

찾아보니 생각보다 종류가 많은데, 제일 많이 본 세 가지만 정리해 놓겠다.

 

elementname { }

elementname이라는 이름을 가진 모든 엘리먼트

ex. input { } 은 모든 <input> 엘리먼트를 가리킴

 

.classname { }

해당하는 class를 가진 모든 엘리먼트

ex. .index { } 는 "index" 클래스를 가진 엘리먼트를 가리킴

 

#idname { }

idname이라는 ID를 가진 엘리먼트

단, HTML 문서 내에 해당 ID를 가진 엘리먼트는 하나만 있어야 함

ex. #toc { } 는 "toc" ID를 가진 엘리먼트를 가리킴

---

css 코드는 html 문서의 head 태그 안에 인라인으로 삽입하거나 body태그 내 엘리먼트들에 style 속성으로 삽입할 수 있지만, 보통 외부 css 파일을 정의한다.

 

외부에 정의한 css 파일은 

<link rel="stylesheet" type="text/css" href="css 파일 위치">

또는

@import url(css 파일 위치);

를 head 태그에 작성해 가져올 수 있다.

 

이거 외에도 룰셋 우선순위, flex 등등 공부해야할게 많지만 그건 천천히 정리해야겠다.

---

css 단위

em, rem, vh, vw, vmin, vmax

em

현재의 폰트 사이즈. 예를 들어 font-size: 1.5em; 이라고 정의한다면 현재 폰트 사이즈의 1.5배가 된다.

em으로 정의한 폰트 크기를 자식에 선언하면 각 자식은 부모의 폰트 사이즈를 받아 점점 커진다(or 작아진다)

 

rem (=root em)

최상위 태크에 지정된 사이즈를 기준으로 설정

em의 문제점(부작용이라고 해야하나)을 보완할 수 있다.

 

vh & vw

내가 단위를 정리해야겠다고 생각한 이유(강의에서 처음 봤다)

보통 css에서 비율을 지정할 때는 %를 사용했다. 그러나 css의 너비 값은 가장 가까운 부모 요소에 영향을 받기 때문에 정확하게 지정하기가 어렵다. 전에도 반응형 웹 페이지를 만들려고 하다가 이것 때문에 짜증나서 고정값으로 박아버린 기억이 있다.

vh나 vw는 뷰포트(웹 페이지가 사용자에게 보여지는 영역)의 너비와 높이값의 1/100을 의미하는 단위다.

내가 사용한 구문은

height: 100vh;

였는데, 이건 최대 높이를 의미하는 것이다.

 

vmin & vmax

각각 뷰포트의 너비 높이 중 더 작은 값, 더 큰 값을 의미한다.

예를 들어 50vmax는 50vw와 50vh중 큰 값, 50vmin은 50vw와 50vh중 작은 값을 의미한다.

---

css position

position: static (기본값)

html 요소에서 position 속성을 따로 지정해주지 않으면 기본값인 static이 적용된다. static이 적용될 경우 html 문서 상에서 원래 있어야 하는 위치에 순서대로 배치된다.

(만약 position 속성이 static이라면 top, left, bottom, right 속성값은 무시된다.)

 

position: relative

요소의 원래 위치를 기준으로 상대적으로 배치해준다. top, left, bottom, right를 이용해 원래 위치에서 상하좌우로 얼마나 떨어뜨릴지 설정할 수 있다.

 

position: absolute

DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 배치 기준이 된다.

대부분 가장 가까운 상위 요소(부모 요소)를 기준으로 top, left, bottom, right 속성을 정하게 된다. (따라서 어떤 요소의 display 속성을 absolute로 설정하면 부모 요소의 display 속성을 relative로 지정해주는 것이 관례라고 한다.)

absolute 속성의 요소는 앞뒤 요소와 상호작용을 하지 않게 된다는 점을 주의해야한다.

 

position: fixed

뷰포트를 기준으로 배치된다. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정한다.

fixed 속성의 요소 역시 html 문서 상에서 독립되어 앞뒤 요소와 상호작용을 하지 않는다.

 

position: sticky

페이지를 스크롤해도 위치가 변하지 않는다.

---

css animation (@ keyframe ?)

css 애니메이션은 엘리먼트에 적용되는 css 스타일을 다른 css 스타일로 부드럽게 전환시켜준다.

css 애니메이션은 애니메이션을 나타내는 css 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.

 

우선 animation 속성과 이 속성의 하위 속성을 지정해야한다.

 

animation-delay

엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 정의

animation-direction

애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 정의

animation-duration

한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 정의

animation-iteration-count

애니메이션이 몇 번 반복될지 지정 (infinite로 지정하면 무한 반복)

animation-name

애니메이션의 중간 상태를 지정 (중간 상태는 @keyframes 규칙을 이용하여 정의)

animation-play-state

애니메이션을 멈추거나 다시 시작

animation-timing-function

중간 상태들의 전환을 어떤 시간간격으로 진행할지 정의

animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 정의

.object {
  animation-name: 1s;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-timing-function: 1s;
  animation-fill-mode: both;
}

이렇게 하나하나 정의해도 되지만 그냥 한 줄로 쭉 쓰는게 편하다.

animation: hero_attack 0.7s infinite steps(10);

난 이렇게 씀

 

 

애니메이션의 중간 상태는 @keyframes 규칙을 이용해 정의한다. 중간 상태는 특정 시점에 엘리먼트가 어떻게 보일지를 나타내는데, %를 이용하거나 from, to를 사용한다.

0%는 애니메이션이 시작된 시점, 100%는 애니메이션이 끝나는 시점을 의미한다. 0% = from, 100% = to다.

0%에 설정한 스타일에서 100%에 설정한 스타일로 점차 바뀌면서 애니메이션이 재생된다.

@keyframes animationName { 
	from { 
    	css-styles; 
    } 
	to { 
    	css-styles; 
    } 
}

이렇게 생겼고, 원한다면 중간값(ex. 75%)을 설정할 수 있다.