[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고 | CSS display, animation

1. 서론

• CSS display 속성에 대해 알아보기
• CSS flex 에 대해 알아보기
• CSS Animation 에 대해 알아보기

2. 본론

CSS display

CSS 의 display 속성에 대해 알아보았다.

display 속성은 브라우저에서 요소를 화면에 어떻게 보이게 할지 결정해주는 속성이다.

수업에서는 block, inline, inline-block, flex 에 대해 배웠다

(사실 블록과 인라인은 저번주에 배웠는데 플렉스와 같이 묶어서 블로깅했다!)

grid에 대해서는 이번이 아니라 다음에 배운다고 하셨다.

 

inline과 block

html 태그는 기본적으로 inline 혹은 block 둘 중 하나를 기본값으로 갖는다.

 

1) inline

내용(content)만큼만 공간이 할당된다.

content만큼 내용이 할당되기 때문에 width, height, margin, padding 이 적용이 되지 않는다.

inline 요소끼리 배치하면 줄바꿈없이 나란히 배치된다.

inline인 요소로는 

span, a, img 태그가 있다.

※ img 태그는 inline 요소지만 width, height, margin, padding 이 적용된다.

inline요소기 때문에 줄바꿈없이 나란히 배치된다.

 

2) block

block인 요소는 inline 요소와는 다르게 옆에 나란히 다른 요소가 올 수 없다.(줄바꿈 ㅇ)

블록요소는 width, height, margin, padding 이 적용된다.

block인 요소로는

div, p, h1~h6, section, article 태그 등이 있다.

 

3) inline-block

블록요소처럼 크기를 지정하되(width, height, margin, padding) 인라인요소처럼 같은 줄을 공유하고 싶은 경우에 사용한다.

블록요소와 인라인요소의 장점을 갖고 있다.

inline-block 요소로는

button, input 태그 등이 있다.

 

flexbox

flexbox 는 행과 열의 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드다.

CSS3부터 등장부터 나타난 방식이며, 화면의 레이아웃을 구성할 때 가장 많이 사용하는 방법 중 하나다!

프론트엔드를 지망한다면 반!!드!!시!! 알아야 한다.

flexbox 를 구성하기 위해서는 flex 속성을 갖는 flex-container(부모요소)와

그 자식 요소들인 flex-item (자식요소)가 필요하다.

 

일반적인 div 요소들은 display 속성이 block이기 떄문에 아래 그림과 같이 위에서 아래로 배치된다.

일반적인 div요소

그러나 저 div 요소들을 감싸고 있는 부모요소에 flex를 주게 되면 아래 그림과 같이 가로방향으로 나란히 배치된다.

아래 그림에서 div 요소들을 감싸고 있는 부모 요소가 flex-container 고

그로인해 배치된 색있는 박스들을 flex-items 라고 한다.

부모요소에 display : flex 를 주었을 때

 

 

flex로 레이아웃을 배치할 때 요소들은 두 개의 축(주축, 교차축)을 따라 배치된다.

• 주축(Main Axis) : flex 컨테이너 안에서 flex 아이템들이 배치되는 기본 방향을 나타내는 축
• 교차축(Cross Axis) : 주축에 수직인 축

주축의 방향은 flex-direction 속성으로 설정한다. 

• row : 좌 -> 우(기본값)
• row-reverse : 우->좌
• column : 위->아래
• column-reverse : 아래 -> 위

이미지 출처 : mdn

 

flexbox의 하위 속성을 이용해서 자식 요소들을 정렬할 수 있다.

 

justify-content

 주축(main axis)을 기준으로 flex item 을 수평 정렬하는 속성이다.

• flex-start(default) : 주축에 대해 start 지점을 기준으로 정렬
• flex-end : 주축에 대해 end 지점을 기준으로 정렬
• center : 주축에 대해 가운데 정렬
• space-between : 처음과 마지막 아이템은 양끝에 붙이고 나머지 영역은 균등한 간격으로 정렬
• space-around : 모든 아이템이 일정한 간격으로 정렬
• space-evenly : 아이템들의 양끝과 아이템 끼리의 간격이 일정하게 정렬

 

align-items

 교차축(cross axis)을 기준으로 flex item 을 수직 정렬하는 속성이다.

• stretch(default) : 컨테이너의 교차축을 채우기 위해 늘림( height가 auto일때)
• flex-start : 교차축에 대해 start 지점을 기준으로 정렬
• flex-end : 교차축에 대해 end 지점을 기준으로 정렬
• center : 교차축에 대해 가운데 정렬
• baseline : 아이템을 텍스트의 베이스라인을 기준으로 정렬

 

부모 컨테이너가 한 줄에 아이템을 다 수용하지 못할 때, flex는 자식 요소의 크기를 줄여서라도 한 줄에 넣거나 줄바꿈을 해주는 설정이 있다.

flex-wrap

• no-wrap(default) : 줄바꿈 안함
• wrap :줄바꿈함
• wrap-reverse : 아이템을 역순으로 배치해서 줄바꿈함

 

위의 그림과 같이 줄바꿈을 한 상태에서의 정렬을 해주는 속성도 있다.

align-content

• stretch(default) : 균등하게 분배된 공간에 정렬되어 배치
• flex-start : 교차축에 대해 start 지점을 기준으로 정렬
• flex-end : 교차축에 대해 end 지점을 기준으로 정렬
• space-between : 교차축에 대해 처음 행은 컨테이너 상단에, 끝 행은 컨테이너 하단에 배치되고 나머지 행은 균등히 배치
• space-around : 모든 행이 일정한 간격으로 정렬
• space-evenly : 행들의 양끝과 행 끼리의 간격이 일정하게 정렬
• center : 교차축에 대해 가운데 정렬

 

이 외에도 flex 속성들이 있다. 

화면을 구성할 때 알맞은 flex의 속성을 적용시켜 구성해야한다.

 

요소를 숨기는 방법

요소를 화면에 사라지게 하는 방법은 크게 3가지가 있다.

1. display : none 
2. visibility : hidden
3. opacity : 0

display : none 은 요소를 화면에 표시하지 않지만 요소가 차지하는 공간도 사라진다.(레이아웃에서 제외됨)

visibility : hidden 은 요소만 사라지고 차지하던 공간은 그대로 남는다.(모습과 속성을 숨긴다)

opacity : 투명도를 조절해서 요소만 사라진것처럼 보이게 한다. 차지하던 공간은 남는다. 속성은 남아서 마우스오버, 클릭 등의 이벤트는 가능하다.

CSS Animation

CSS 의 @keyframe 으로 애니메이션 효과를 줄 수 있다.

애니메이션의 중간 지점마다 css 속성값을 지정해서 애니메이션을 조절할 수 있다.

    @keyframes 키프레임명{
        0%{CSS설정}
        10%{CSS설정}
        20%{CSS설정}
        ...
        90%{CSS설정}
        100%{CSS설정}
     }

@keyframe 내에서 개발자는 자기가 원하는대로 프레임을 쪼개서 변화를 지정할 수 있다.

단위는 %를 사용하거나

from/to 를 사용해서 처음/끝만 지정할 수도 있다.

 

@keyframe 에서 지정한 애니메이션을 animation 속성으로 불러와서 사용할 수 있다.

종류	설명
animation-name	@keyframe으로 지정한 애니메이션 이름
animation-duration	애니메이션 재생되는데 걸리는 시간 지정
animation-timing-function	애니메이션이 진행되는 형태
animation-delay	애니메이션이 시작되기 전에 기다리는 시간 지정
animation-iteration-count	애니메이션 반복 횟수 지정(default :1, infinite : 무한 재생)
animation-direction	애니메이션 방향 지정(반복될 때마다 방향 지정 alternative를 하면 반복될 때 역순으로 재생)
animation-fill-mode	애니메이션의 마지막 상태 지정

각 속성들은 각각 지정해 줄 수 있지만 animation 속성으로 축약된 형태로 설정할 수 있다

이미지 출처 : 코딩온 강의 자료

VS Code 에서 animation 을 입력하면 emmet 으로 나온다!

 

여기서 name과 duration은 반드시 설정해줘야 한다!

다른 부분은 기본값으로 되어 있는 부분이 있기 때문에 변화가 없다면 생략 가능이지만

name과 duration은 설정해주지 않으면 애니메이션이 동작하지 않는다.

 

타이밍 함수는 transition 에서도 썼던 속성값이다 (참고 : https://daddda3232.tistory.com/39 transition부분)

타이밍 함수로 애니메이션이 어떻게 진행되는지 설정할 수 있다.

따로 설정하지 않으면 기본값은 linear 로 되어있다.

 

애니메이션을 활용해서 가장자리를 굴러가는 공을 구현해보았다.

 

See the Pen Untitled by dain (@dadain) on CodePen.

 

위치값을 주기 위해서 position : absolute를 사용했다.

top이나 left 값을 100%로 줄 경우, 자기 크기 만큼 화면을 넘어가버리기 때문에 calc()를 사용해서 

요소의 크기만큼 빼준값을 넣어주었다.

(나는 absolute 줘서 했는데 리더님이 풀이하신거 보니까 포지션을 주지 않아도

transform : trasnlate를 사용해서 하는 방법이 있었다!)

 

실습 과제로 걸어가는 사람 애니메이션 구현해보았다.

 

See the Pen walking person by dain (@dadain) on CodePen.

 

이거같은 경우는 어떻게 구현해야할지 막막했는데.. 

나같은 경우는 상체/하체로 따로 묶고 구현했다.

상체같은 경우 위아래로 움직이길래 머리와 몸통을 같이 묶어서 transform : translateY()를 사용해서 효과를 주었다.

몸통도 자세히 보면 몸통이 한쪽으로 쏠리면서 기우는 현상이 보였기에 transform : skewX()를 주었다.

 

발의 움직임은 상당히 난해했는데 힌트로 transform : translateZ을 이용해보라고 해서 썼다.(잘 쓴거지는 모르겠다)

발이 따로따로 움직여서 동작을 구현하는데 애를 먹었다.

처음에는 쪼개는 단위를 같은 단위로 했다(예를 들어 둘다 똑같이 4번 쪼갰다,)

그랬더니 발이 동시에 공중에 떠있는 이상한 현상이 되어서 쪼개는 단위를 다르게 해서 구현했다.

 

3. 결론

정말 중요한 flex와 animation을 한 시간에 들으려니까 머리가 깨질것 같았다.(여기에는 안썼지만 이날은 자바스크립트도 했다!)

flex는 특히 프론트엔드를 지망하는 사람이라면 정말정말 중요하다고 했다!

flex를 알아두면 브라우저의 레이아웃을 잡을 때 더 쉽고 더 잘 잡을 수 있으므로 잘 숙지해둬야겠다.

애니메이션 효과는 이전에 해봤음에도 정말 어렵고 복잡했다. 저번에 말한것처럼 위치를 잡는것에 약해서 그런것같다.

어려웠지만 그래도 해내니까 뿌듯하고 성취감이 생긴다. 

이제 앞으로 CSS 는 진도를 끝내서 자바스크립트를 하게 될텐데

더욱더 복잡해지겠지만 더 멋있는 웹사이트를 만들 수 있을거라 생각하니 기대된다.

 

4. Reference

 

1. 코딩온 강의 자료

 

2.

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

Flexbox - Web 개발 학습하기 | MDN

3.

https://poiemaweb.com/css3-flexbox

CSS3 Flexbox Layout | PoiemaWeb