컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

애니메이션란? HTML에 적용되는 CSS스타일을 다른 CSS스타일로 바꿀 때 부드럽게 변화시킨다. 애니메이션은 애니메이션 대상이 되는 CSS스타일과 애니메이션 시퀀스를 나타내는 복수의 키프레임으로 이뤄진다. 애니메이션과 트랜지션 물론 트랜지션으로도 애니메이션 효과를 나타낼 순 있으나 animation 그 자체보단 제한적이다. 그리고 트랜지션은 꼭 자바스크립트가 있거나 가상 클래스 선택자가 있어야 움직인다. 하지만 애니메이션은 그런것 없이 혼자 가능하다. 애니메이션은 트랜지션보다 더 나아가 그 안에서 세부적인 움직임, 시간 등도 구현이 가능하다. 애니메이션과 자바스크립트 물론 CSS애니메이션은 컴퓨터 리소스면에선 효율적이긴하다. 다만 경우에 따라 자바스크립트를 사용하는 것이 더 편하게 사용할 수 있기도 하..

트랜지션이란? CSS의 프로퍼티 즉 속성값이 바뀔 때 그 변화가 바로 일어나지 않고 시간차를 두고 일어나게 하는 것이다. 위 코드와 같이 설정하면 div 요소에 마우스 커서가 올라가면 사각형의 크기가 줄어든다. 그런데 여기선 트랜지션을 설정해줘서 div가 변화하는 과정을 순식간이 아닌 2초로 느리게 변화하게 바꿨다. 트랜지션의 발동 조건 트랜지션은 혼자서 발동하지 않는다. 그냥 CSS를 적용한다고 끝이 아니라 자바스크립트를 이용하거나 가상 클래스 선택자(hover)와 같은 추가적인 코드 작성이 필요하다.

CSS를 이용해서 주로 하게 되는 작업 중 하나는 바로 각종 글자, 이미지의 크기를 조절하는 일이다. 그럴때마다 다양한 크기 단위가 있어서 고민하게 된다. 일반적으로 word 프로그램을 쓸 때는 'pt'라는 단위 하나만 사용하면 됐다. 하지만 CSS에서 크기 단위는 'px', 'rem', 'em', '%' 등 다양한 크기 단위가 존재한다. 사실 사용하면서 이들을 구분해서 사용하기 쉽지 않다. 그래도 이를 잘 활용하면 더 이쁘게 웹페이지를 꾸밀 수 있다. 단위의 구분 다양한 크기 단위는 크게 둘로 나뉜다. 바로 절대 단위와 상대 단위다. 절대 단위의 경우 말그대로 그 단위 자체로 어떠한 크기를 나타낼지 딱 정해진 단위를 말한다. 반대로 상대 단위는 기준을 어디에 두느냐에 매번 달라지는 크기를 말한다. 사실..

시중에서 사용 중인 다양한 브라우저 (엣지, 크롬, 파이어폭스 등)은 각자 다른 디폴트 스타일을 가지고 있다. 기본적으로 가진 태그들끼리의 간격이 다르다든지 하는 등의 문제가 있다. 결국 개발을 할 때 한 가지 브라우저를 중심으로 개발을 하는데, 만약에 이러한 부분을 고려하지 않았다면 다른 브라우저를 통해 내가 만든 웹 사이트를 접속했을 때 조금씩 디자인이 어긋나게 된다. 이를 방지하기 위해 미리 이러한 요소들을 초기화를 통해 통일해주는 것이 Reset CSS다. 즉 각 브라우저 별로 다른 값들을 본격적으로 코드를 짜기 전에 CSS를 통해 초기화 시켜 통일 시켜주는 것이다. 아래와 같이 미리 CSS 값을 초기화해줌으로써 브라우저 별로 다를 수 있는 값들을 통일 시켜준다. 이를 통해 자신이 설정한 디자인적..

'align-content'이란? 'align-item'과 비슷하다. 하지만 'align-content'란 아이템이 아닌 아이템 라인을 정렬한다. 단, 'align-content'를 제대로 써주기 위해선 'flex-wrap'이 적용되서 라인이 두 줄이상 되어야 한다. 'align-content'의 속성값 'align-content'의 속성은 다음과 같이 설정해준다. align-content: 속성값; 속성값 설명 stretch 기본 설정값. flex-start 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬. 이때 수직축이 메인축일 때 교차축인 수평축 위쪽부터 정렬. flex-end 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 ..

'flex-wrap'이란? 플렉스 박스의 베이스라인에 더이상 여유가 없을 때 플렉스 아이템을 다음 줄로 넘길지 설정하는 것. 아래와 일반적으로 박스가 나열되있는 상황에서 브라우저 창의 크기를 줄이면 아래 사진처럼 변경된다. 하지만 'flex-wrap'을 속성값으로 줬을 때는 아래와 같이 줄을 넘겨서 정렬해준다. 'flex-wrap'의 속성값 'flex-wrap'의 속성은 다음과 같이 설정해준다. flex-wrap: 속성값; 속성값 설명 nowrap 기본 설정. 플렉스 아이템이 다음줄로 넘어가지 않음. 대신 아이템 너비를 줄여서 한 줄에 배치시킴. wrap 플렉스 공간에 여유가 없으면 다음 줄로 넘김. wrap-reverse 플렉스 공간에 여유가 없으면 다음줄로 넘김. 단 reverse의 경우 역으로 아래..

align-items란? 'align-items' 속성을 이용하면 아이템들을 교차축(Cross Axis)기준으로 정렬할 수 있다. 'align-items'의 속성값으로 줄 수 있는 값은 다음과 같다. align-items: 속성값; 속성값 설명 stretch 기본 설정임. 플렉스 아이템 높이가 컨테이너 높이와 같게 변경된 뒤 연이어 배치됨. flex-start 수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 좌쪽부터 정렬 flex-end 수평축이 메인축일 때 교차축인 수직축 아래쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 우쪽부터 정렬 center 수평축이 메인축일 때 교차축인 수직축 가운데 정렬 수직축이 메인축일 때 교차축인 수평축 가운데 정렬 baseli..

justify-content는? 'justify-content' 속성을 이용하면 아이템들을 메인축 기준으로 정렬할 수 있다. 'justify-content'의 속성값으로 줄 수 있는 값은 다음과 같다. justify-content: 속성값; 속성값 설명 flex-start 기본 설정값과 같은 값. 수평축이 메인축일때 수평축 좌측부터 정렬. 수직축이 메인축일때 수직축 위쪽부터 정렬. flex-end 수평축이 메인축일 땐 수평축 우측부터 정렬. 수직축이 메인축일 땐 수직축 아래부터 정렬. center 수평축이 메인축일 땐 수평축 가운데 정렬. 수직축이 메인축일 땐 수직축 가운데 정렬. space-around 아이템 간에 동일한 간격을 주고 나열한다. 수평축이 메인축일 땐 수평축 기준 아이템끼리 동일한 간격으..