CSS Property
곧 있으면 프로젝트를 시작해야 하기도 하고, 부트캠프에서 HTML & CSS는 되게 빨리 넘어가는 상황인지라 실사용을 몇 번 못해봤다. 물론 실습 시간에 부트캠프에서 제공해 준 스켈레톤 코드와 함께 어느정도 구현을 해봤기는 했지만 아직도 프로퍼티의 종류에 대해 좀 무지한 것 같기도 하고, 인터넷을 서칭하면서 개발을 진행하기엔 시간이 너무 많이 들어갈 것 같아 자주 쓸 것 같은 프로퍼티 정도를 정리해볼까 한다.
Transition & Animation
처음에는 트랜지션과 애니메이션에 대한 개념이 혼동되었다. 어떻게 보면 둘 다 움직임을 표현하는 방식이고, 특정 속성값을 기준으로 변경을 눈에 보여준다는 점에서 '에 .. 둘 중 하나만 쓰면 되는건가?' 라는 생각이 들기도 했다. 그래서 이 부분은 소스를 보면서 생각하면 더 좋을 것 같다.
.Transition {
transition: width 2s linear 1s;
/*
transition property : width
transition duration : 2s
transition timing-function : Linear
transition delay : 1s
*/
}
Transition:hover {
width: 300px;
}프로퍼티 속성을 하나하나 다 따로 지정할 수 있지만, 저렇게 간편하게 설정할수도 있다. 순서를 바꿔도 알아서 잘 인식했던 것 같은데, 어느정도의 인자값 종류에 대한 지식만 있으면 그냥 순서 상관 없이 적어도 제대로 작동되는 듯했다. 위의 코드를 보면 hover : 마우스를 올려 놓는 이벤트 같이 특정 이벤트에 트리거 되어 작동되는 방식이고, 이벤트 이후 단 한 번 실행된다는 특징이 있다.
.animation {
width: 300px;
height: 300px;
background-color: yellow;
animation-name: changeWidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 6;
animation-direction: alternate; /* 원래 방향으로 되돌아옴 */
}
@keyframes changeWidth {
from {
width: 300px;
}
to {
width: 600px;
}
}Transition과 마찬가지로 시간의 흐름에 따라 특정 프로퍼티의 변화를 줄 때 사용하는데, 차이점이라고 한다면 특정 Trigger 없이 알아서 작동이 될수도 있는 특징이 있다. 소스 하단부를 보면 keyframes 라는 키워드가 보이는데, 사실 영상을 하는 사람 입장에서는 지겹도록 익숙한 단어일 것이다. 우리가 흔히 보는 화면 출력 기기 (모니터)는 초당 수십 장에서 수백 장의 프레임들을 뱉어내는데, 특정 프레임을 기준으로 애니메이션이 시작된다고 보면 된다. 첫 프레임은 1s라는 delay 직후이고, 1%에서 99%까지 각기 다른 동작을 넣을수도 있다. 아래의 표는 특징들을 나타낸 표이다.
| Transition | Animation |
|---|---|
| - Can only move from initial to final state - Can only run once - Require a trigger to run (like mouse hover) - Easier to use with Javascript - Best for creating a simple change from one state to another | - Can move from initial to final state, with intermediate steps in between - Can loop infinitely thanks to animation-iteration-count property - Can be triggered but can also run automatically - Can run forwards, in reverse, or alternate directions More difficult to use with JavaScript - Best for creating a complex series of movements |
Media Query
미디어쿼리는 실제 웹사이트에서도 상당히 많이 쓰이는 기능이다. 주로 모바일 환경을 위해 설계된 경우가 많다고 하는데, 창을 줄일 때 모바일 환경에 맞춰 UI가 뒤바뀌는 그런 기능이 필요할 때 미디어쿼리를 사용한다. 사실 코드만 보면 바로 이해가 될만한 쉬운 구현이다.
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 100px;
height: 100px;
background-color: blue;
}
}인자값으로 다른 값들이 들어가기도 하지만 주로 쓰이는 것들이 min-width 와 max-width 이다. 구현 목적 자체가 모바일 UI 최적화에 있기 때문에 다음과 같은 형식으로 사용하고, 저 코드 같은 경우 웹 페이지의 너비가 320에서 800 사이에 위치한다면 media 클래스를 다음과 같이 변경해준다는 의미를 가지고 있다. 지난 번에 소마 코테를 볼 때 화면이 특정 크기 이하로 작아지면 화면이 작다고 모든 화면이 다 가려지는 기능이 있었는데, 이도 역시 미디어쿼리를 이용했을 것이다. 추가적인 세팅값으로 미디어쿼리를 작성하고 싶다면 하단에 이어서 @media ( ... ) { ... } 과 같이 작성하면 된다.
Flex Box
사실 무조건 배워야 했을 정도로 중요한 개념이라고 생각했는데, 부트캠프에서 강의자료로 넣어 주지 않아 개인적으로 공부했던 부분이다. 물론 어느정도 언급은 해주셨지만, 그래도 '이건 좀 체계적으로 배워야 했지 않나?'라는 아쉬움이 있는 부분이다. Flex Box는 컨테이너 속에 아이템들을 넣는 개념인데, 기본적인 설정은 display: flex 라는 코드에서 시작된다. 우리가 생각하는 block 개념은 inline과 달리 아이템이 추가 될 때마다 세로로 늘어나는 구조인데, flex-box 같은 경우 가로로 아이템들이 계속해서 배치된다. 어떻게 보면 inline 과 약간 비슷한 특성을 지니기도 한다.
.container {
display: flex; /* flex-box 설정 */
flex-direction: column; /* 컨텐츠 정렬 방식 : 행, 렬 등등 */
flex-wrap: nowrap; /* 아이템들이 가로폭을 넘겼을 때의 줄바꿈 여부 */
flex-flow: row, wrap; /* flex-direction, flex-wrap */
justify-content: center; /* 수평(가로) 축 정렬 */
align-items: center; /* 수직(세로) 축 정렬 */
}주로 쓰는 속성들은 다음과 같은데, 직접 실행해보면서 해야 더 이해하기 편한 것 같다. 필자는 flexbox froggy에서 학습했는데, 더 직관적으로 나와있는 사이트가 있어서 링크를 추가한다. 그림으로 잘 나타나있어 이해하기 편하고, 토글 버튼을 통해 좀 더 직관적으로 바뀌는 모습을 볼 수 있어 좋은 것 같다. 다음에 기억이 나지 않는다면 링크를 참고할 예정이다.
