CSS
-
CSS Transform 알아보기(1) - 기본개념백수의 개발/웹 2020. 4. 6. 19:01
CSS Transform 개념 알아보기 웹 페이지를 보다보면 마우스를 올리거나, 클릭하거나, 스크롤을 움직이다 보면 페이지 내 요소들이 스르륵~ 샤라락~ 휘리릭~ 하는 모습들을 볼 수 있다. 그런 효과들의 대다수에는 transform 속성이 숨어있다.(모든 것이 그렇지는 않지만... transform + transition를 활용한다.) 그렇다면 오늘 CSS의 속성 중 하나인 Transform에 대해 알아보자. Transform은 말 그대로 변환이다. 우리는 특정 도형(엘리먼트)를 원하는 모양으로 변형시키기 이 transform을 사용한다. 이 transform을 통해 위와 같은 직사각형 도형의 위치를 이동시키거나, 회전시키거나, 비틀거나, 원근법 등 다양한 효과를 줄 수 있다. transform은 크게..
-
CSS 애니메이션 모음 AniCollection백수의 개발/개발을 하면서... 2020. 4. 5. 15:15
CSS 애니메이션 모음 AniCollection 오늘은 CSS를 통해 다양한 효과를 줄 수 있는 오픈소스 AniCollection에 대해 알아보자. 요즘에는 예전처럼 완전 정적인 페이지보다는 조금 더 인터렉티브하고 역동적인 페이지들을 많이 볼 수 있다. 어떤 부분을 클릭하거나, 마우스를 올리거나, 페이지가 로딩될 때 등 다양한 움직임들이 있다. 예전에는 이러한 움직임들을 구현하기 위해서는 Javascript를 통해 하나하나 움직임을 조종?했다면 이제는 CSS만으로도 충분히 가능하다. CSS를 통해 다양한 동적인 움직임을 구현하는 것이 처음에는 그렇게 쉽지만은 않을 것이다. 그래서 AniCollection이라는 오픈소스를 보며 실제로 적용해보고 분석해보며 적용해보자. AniCollection은 여기서 살펴..
-
[CSS] box-sizing - element의 크기 정하기백수의 개발/웹 2020. 3. 7. 17:50
box-sizing - element의 크기 정하기 오늘은 element의 크기를 정해줄 수 있는 box-sizing에 대해서 알아보자. box-sizing box-sizing의 속성으로는 기본적으로 content-box, border-box 두가지가 있고, 기본값이 content-box로 되어있다. content-box 크기의 기준이 content 영역이다. 그렇기 때문에 padding의 크기나, border의 크기를 지정하면 설정한 width와 height보다 더 큰 영역을 차지하는 element가 생성된다. 아래 간단한 예시를 보자. .content-box-div { box-sizing: content-box; width: 500px; height: 200px; padding: 10px; borde..
-
[ CSS ] margin vs padding - 여백 조정하기백수의 개발/웹 2020. 3. 5. 20:00
margin vs padding - 여백 조정하기 우리는 웹개발을 할 때 다양한 Element들을 사용한다. 그때 Element들을 다양하게 이동시킬필요가 있을 것이다. 이를 위하 활용할 수 있는 것이 바로 margin과 padding이다. 그렇다면 margin과 padding이 어떤 것인지 알아보자. Element의 구조 들어가기에 앞서 Element가 어떤식으로 구성되어있는지 간단하게 알아보고가자. 기본적으로 실제 Element 내부에 기본적으로 content가 있을 것이다. { content } 이러한 content는 padding, border, margin의 순서로 둘러싸여있다. 그림으로 보면 아래와 같이 나타낼 수 있다. padding은 element와 content사이의 여백, border는..
-
티스토리 글꼴 바꾸기백수의 일상 & 잡담/티스토리 2019. 5. 30. 23:33
티스토리를 시작하면서 시간이 날때나 심심해서 할게 없을 때 조금씩 블로그를 꾸미려고한다. 제일 처음에 한게 글꼴 바꾸기인데 티스토리의 글꼴은 어떻게 바꾸면 되는지 한번 알아보자. 글꼴 파일 or 글꼴 링크를 구하자 가장 먼저 본인이 사용하고 싶은 글꼴을 찾아야한다. '글꼴의 저작권은 꼭 확인하고 사용하자!' 글꼴을 적용하는 방법은 크게 두가지이다. 1. 글꼴 파일(ttf, otf)파일 구하기 구글이나 네이버 등 웹서핑을 통해서 본인이 원하는 글꼴 파일을 ttf 또는 otf의 파일로 구하면된다. 윈도우에서 설치 후 "제어판 > 모양 및 개인 설정 > 글꼴" 에서 설치 된 글꼴을 확인할 수 있다. 2. 웹 폰트 구하기 대표적인 웹 폰트로 구글 웹폰트가 있는데 웹 폰트의 경우 폰트의 경로를 알아야한다. 구글 ..