오늘은 CSS에서 처음 들어보는 부분에 대해서 학습했다.
display: flex와 animation인데, 전에 코드를 작성했을 때는 display: inline-block과 float속성으로 주로 작업한 터라 flex가 굉장히 어려웠다. 또한 애니메이션을 쓸 일이 없어서 아예 안되는 줄 알고 있었는데 충격이 컸다.
1. display: flex
display 속성을 기본적으로 화면 구성을 위해 사용한다는 점은 어느 정도 인지하고 있었는데, 예전에 작업할 때는 semantic html과 inline-block위주로 작업을 해서 flex는 존재만 알고 있는 상태였다.
내용이 복잡하고 다양해서 하나하나 그림으로 알아보는 것이 매우 편할 것이다.
참고로 아래 글에서는 직접 클릭하면서 어떻게 변하는지 눈으로 보고 이해할 수 있으니 참고하면 많은 도움이 될 것이다.
[display: flex 이해하기] (https://studiomeal.com/archives/197)
일단 flex와 flex를 적용하지 않는 그림을 보고 어떤 차이가 있는지 눈으로 확인해보도록 하자.
→ 순서대로 display:flex를 적용하기 전과 후 사진이다.
display: flex를 사용하면 주로 아래의 속성과 마주하게 된다.
- flex-direction
- justify-content
- align-items
- flex-wrap
4가지의 속성을 알아보기 전에 주축과 교차축이라는 개념을 짚고 가야한다.
- 주축(main axis): 아이템 배치 방향의 축
- 교차축(cross axis): 주축의 수직축
1) flex-direction
flex의 방향, 즉 주축 방향을 설정하는 것이다.
주축 방향을 설정하면 flex로 설정된 아이템들이 주축 방향으로 배치(혹은 정렬)되는 것을 볼 수 있다.
/*
＊flex-direction: flex방향을 설정 (주축 방향 설정)
1-1) row (default): 수평 정렬 (좌 → 우)
1-2) row-reverse: 수평 정렬 (우 → 좌)
2-1) column: 수직 정렬(위 → 아래)
2-2) column-reverse: 수직 정렬 (아래 → 위)
＊row일 때
- flex-direction: row;
- flex-direction: row-reverse;
＊column일 때
- flex-direction: column;
- flex-direction: column-reverse;
*/
코드로 살펴보면 위와 같은데, 코드로만 봐서는 이게 뭔지 잘 모르겠다.
아래 그림으로 살펴보자.
→ 순서대로 flex-direction: row / flex-direction: row-reverse / flex-direction: column / flex-direction: column-reverse 이다.
그림이 조금씩은 다르지만, 큰 특징만 살펴보면 다음과 같다.
row는 가로로 아이템이 배치되고, column은 세로로 아이템이 배치된다는 점이다.
reverse가 붙으면 역순으로 정렬한다는 점만 알고 있으면 금방 이해가 될 것이다.
2) justify-content
주축 아이템을 어떻게 배치할 것인가에 대해서 사용하는 속성이다.
주축 방향을 정했다면, 주축 아이템들을 어떻게 배치할 것인지도 정할 수 있는 속성이다.
역시 그림으로 보는 것이 바로 이해될 것이다.
코드는 단순한 사용법이라고 생각해서 굳이 외울 필요는 없다고 생각한다. (기억이 안난다면 구글링)
/* flex-start (default): 아이템을 주축에 대해서 start지점을 기준으로 나열 */
justify-content: flex-start;
/* flex-end: 아이템을 주축에 대해서 end 지점을 기준으로 나열 */
justify-content: flex-end;
/* space-between: 처음과 마지막 아이템을 양 끝에 붙이고, 나머지 영역 공평하게 나눔 */
justify-content: space-between;
/* space-around: 아이템들의 모든 여백을 공평하게 갖도록 함 (양끝 영역의 단위가 1이라면, 나머지 영역의 단위는 2) */
justify-content: space-around;
/* space-evenly: start부터 첫 아이템의 간격, 아이템 끼리의 간격, 마지막 아이템 부터 end 까지의 모든 간격이 일정 */
justify-content: space-evenly;
→ 순서대로 justify-content: flex-start / justify-content: flex-end / justify-content: space-between / justify-content: space-around / justify-content: space-evenly이다.
※ flex-direction: row(주축 방향을 왼쪽 → 오른쪽)으로 설정하고 진행하였다.
일단 주축 방향은 row(왼쪽 → 오른쪽 = 가로)가 된다.
flex-start와 flex-end는 시작점과 끝점(각각 왼쪽, 오른쪽)을 기준으로 잡고 아이템을 배치한다고 이해하였고, space-between은 소위 균등 분할 또는 배분 정렬이라고 불리는 정렬로 된다고 이해했다. 아마 워드나 한글에 대해서 익숙하다면 그림을 보고 바로 이해했을 것이다.
space-around와 space-evenly가 조금 헷갈리는데, 여백을 1로 준다고 가정하고 설명하겠다.
space-around는 아이템마다 1의 여백을 준다고 생각하면 되고, space-evenly는 모든 여백이 1로 된다고 생각하면 된다. (그림을 참고하면 바로 이해가 될 것이다.)
space-around는 아이템마다 1의 여백을 주는 것이기 때문에 양쪽 끝 부분은 여백이 1이 되고, 아이템 간 여백은 각각 아이템 별로 여백이 1이 존재하므로 1+1=2가 된다.
3) align-items
justify-content와 다르게 교차축 아이템을 어떻게 배치할 것인가에 대해서 사용하는 속성이다.
/*
stretch (default): container의 교차축을 채우기 위해 늘림
→ 현재 .flex-items 에 width, height 값이 있어 늘어나지는 않음
*/
align-items: stretch; (default)
/* flex-start: 교차축에 대하여 시작점으로 정렬 */
align-items: flex-start;
/* flex-end: 교차축에 대하여 끝점으로 정렬 */
align-items: flex-end;
/* center: 교차축에 대하여 가운데 정렬 */
align-items: center;
/* baseline: 아이템을 텍스트의 베이스라인을 기준 정렬 */
align-items: baseline;
→ 순서대로 align-items: stretch / align-items: flex-start / align-items: flex-end / align-items: center / align-items: baseline이다.
※ flex-direction: row(주축 방향을 왼쪽 → 오른쪽)으로 설정하고 진행하였다.
일단 교차축은 주축 방향이 row(왼쪽 → 오른쪽 = 가로)이므로 세로가 된다.
stretch는 단어에도 내포하듯이 쭉쭉 늘린다는 의미인데, 그림을 보면 아이템들이 교차축의 방향인 세로로 쭉쭉 늘려진 것을 확인할 수 있다.
flex-start, flex-end는 마찬가지로 시작점과 끝점을 기준으로 아이템을 배치하는 것이다. 다만, 교차축이 세로이므로 세로를 기준으로 배치하게 된다. 더 정확하게 시작점은 교차축인 세로의 시작점(위)가 되고, 끝점은 교차축인 세로의 끝점(아래)가 된다고 생각하면 된다.
center는 가운데에 배치하는 것인데, 교차축이 세로이므로 세로의 가운데로 아이템을 배치한다고 생각하면 된다.
baseline은 아래 링크에 있는 이미지를 확인하면 단번에 이해가 갈 것이다.
4) flex-wrap
줄바꿈 처리에 관한 속성이다.
아주 중요한 선제조건이 하나 존재하는데, 컨테이너(부모)가 한 줄에 아이템을 다 수용하지 못할 때의 줄바꿈 관련 설정이라는 것이다.
/* nowrap (default): 줄바꿈 안함 */
flex-wrap: nowrap;
/* wrap: 줄바꿈 함 */
flex-wrap: wrap;
/* wrap-reverse: 줄바꿈 하되 아이템을 역순으로 배치 */
flex-wrap: wrap-reverse;
→ 순서대로 flex-wrap: nowrap / flex-wrap: wrap / flex-wrap: wrap-reverse이다.
※ flex-direction: row(주축 방향을 왼쪽 → 오른쪽)으로 설정하고 진행하였다.
일단 주축 방향은 row(왼쪽 → 오른쪽 = 가로)가 된다.
그림을 보면 바로 이해가 될 것이라고 생각해서 별도의 설명은 하지 않도록 하겠다.
2. 애니메이션
동적인 모든 부분은 Javascript로 한다고만 생각했었는데, CSS에서 애니메이션을 실행하는 방법이 있었다!
기본적인 내용을 알면 나머지 부분은 공식 문서를 참고하면 충분히 될 것 같아서 기본적인 부분만 정리하려 한다.
.box{
width: 100px;
height: 100px;
background-color: cyan;
position: relative;
/* 애니메이션 이름 */
animation-name: my-anim;
/* 애니메이션 지속시간 */
animation-duration: 2s;
/* 애니메이션 반복 횟수 */
/* animation-iteration-count: 5; */
/* infinite: 무한 반복 */
animation-iteration-count: infinite;
/* 애니메이션 지연 시간 */
animation-delay: 1s;
/* 애니메이션 반복 형태 */
/* animation-timing-function: ease; */
animation-timing-function: linear;
/* animation-timing-function: ease-in; */
/* animation-timing-function: ease-out; */
/* animation-timing-function: ease-in-out; */
/*
- animation-name: @keyframes 애니메이션 이름 지정
- 시작: from or 0%
- 중간: 0~100%
- 끝: to or 100%
- animation-duration: 한 사이클의 애니메이션이 얼마에 걸쳐 일어날지 결정 (단위: s)
- animation-delay: 요소(element)가 로드된 후, 언제 애니메이션을 시작할지 결정 (단위: s)
- animation-iteration-count: 애니메이션 반복 횟수 (default: 1, infinite: 무한 반복)
- animation-timing-function: 중간 상태들의 전환을 어떤 시간 간격으로 진행할지 지정
- linear, ease, ease-in, ease-out, ease-in-out 등
- animation-direction: 애니메이션 종류 후 반복될 때 진행방향 지정
- normal, reverse(반대 방향), alternate(반복될 때 마다 방향을 바꿔줌), alternate-reverse(반복될 때 마다 방향을 바꿔주지만, 처음에는 반대방향으로 시작함)
- alternate: from → to 방향으로 애니메이션 진행 → (다음 회차) to → from 방향을 바꿔가며 반복
*/
}
/* my-anim: 애니메이션의 이름 */
@keyframes my-anim{
0%{
left: 0px;
}
25%{
left: 200px;
}
50%{
left: 400px;
}
75%{
left: 200px;
}
100%{
left: 0px;
}
}예시 코드가 길지만 제일 중요한 부분을 정리하려 한다.
- @keyframes [애니메이션 이름]{...}
- 0% = from, 100% = to
- animation-name: [애니메이션 이름]
크게 3가지로 구분해봤다.
첫 번째로 제일 중요한 @keyframes는 애니메이션을 생성하기 위한 키워드로, @keyframes my-anim{...} 정도로 설정해주면 된다.
두 번째로 처음 애니메이션 부분 = 0% = from 키워드와 마지막 애니메이션 부분 = 100% = to이다.처음과 마지막 애니메이션은 존재해야하므로 중요하다고 판단했다.
마지막으로 애니메이션과 태그를 이어줄 animation-name 속성이다.
애니메이션을 만들어놓고 이어주지 않으면 결과적으로 애니메이션을 만들지 않은 것과 다르지 않기 때문에, @keyframes 키워드로 생성한 애니메이션을 CSS에서 animation-name 속성을 부여해서 HTML에 있는 애니메이션을 적용할 태그와 이어주면 된다.
3. margin: 0 auto
margin: 0 auto를 적용하면 배치가 화면 가운데로 오는 것은 알고 있었지만, 어떤 원리로 가운데로 오는지는 모르고 사용했었다.
오늘 수업 시간에 나와서 정리해보려고 한다.
아래 링크는 margin: 0 auto의 의미를 파헤쳐본 좋은 글이다.
정리하자면 margin을 0으로 설정하고, 왼쪽 및 오른쪽 여백을 자동으로 계산해서, 요소를 부모 요소의 중앙에 세로로 정렬하는 기능이다.
다만, auto라는 값이 marigin 속성에 두 번째로 나와야 적용된다고 한다.
4. Javascript 자료형
Javascript의 기초에 대해서도 학습했는데, 제일 중요한 부분인 자료형에 대해서만 정리하려고 한다.Javascript는 크게 2가지의 자료형이 존재한다.
- Primitive Types (기초 자료형)
- Object Types (객체 자료형)
기초 자료형만 알아두면 나머지 모든 자료형이 객체 자료형이라 매우 편리하다.
[Primitive Types]
- string
- number
- boolean
- undefined
- null
- bigint
- symbol
이외에 나머지 모든 자료형은 객체 자료형이니 기초 자료형만 알아두면 너무 편리하다!!
[Reference]
1) [display: flex 이해하기] (https://studiomeal.com/archives/197)
2) [margin:0 auto의 의미] (https://www.tutorialspoint.com/how-does-auto-property-work-in-margin-0-auto-in-css)
3) [font baseline] (https://medium.com/cete/vertical-rhythm-and-font-baselines-with-styled-components-5b99b40050f0)