HTML
-
CSS 애니메이션 모음 AniCollection백수의 개발/개발을 하면서... 2020. 4. 5. 15:15
CSS 애니메이션 모음 AniCollection 오늘은 CSS를 통해 다양한 효과를 줄 수 있는 오픈소스 AniCollection에 대해 알아보자. 요즘에는 예전처럼 완전 정적인 페이지보다는 조금 더 인터렉티브하고 역동적인 페이지들을 많이 볼 수 있다. 어떤 부분을 클릭하거나, 마우스를 올리거나, 페이지가 로딩될 때 등 다양한 움직임들이 있다. 예전에는 이러한 움직임들을 구현하기 위해서는 Javascript를 통해 하나하나 움직임을 조종?했다면 이제는 CSS만으로도 충분히 가능하다. CSS를 통해 다양한 동적인 움직임을 구현하는 것이 처음에는 그렇게 쉽지만은 않을 것이다. 그래서 AniCollection이라는 오픈소스를 보며 실제로 적용해보고 분석해보며 적용해보자. AniCollection은 여기서 살펴..
-
[ 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는..
-
ContentEditable에서 커서(Caret) 활용하기(3) - 자바스크립트백수의 개발/웹 2020. 3. 4. 20:32
ContentEditable에서 커서(Caret) 활용하기(3) - 자바스크립트 [ ContentEditable에서 커서(Caret) 활용하기(2) - 자바스크립트 ]에서 Caret을 설정하고, 드래그의 형태로 만드는 것 까지 진행해봤다. 그러나 드래그의 형태로 해보면 알겠지만, 뒤에서 앞으로 드래그를 했을때와, 앞에서 뒤로 드래그를 했을 때는 엄연히 다를 것이다. 이번 글을 통해 이에 대해 알아보고 ContContentEditable에서 커서(Caret) 활용하기를 마무리 하겠다. 드래그 한 Caret의 위치 내가 키보드나 마우스로 Caret을 조정하였다면 큰 문제는 없을 것이다. 그런데 앞에서 한 것 처럼 Caret을 인위적으로 바꿨다면 나의 기준은 어디이고, 기준은 어떻게 바꿔야 할까? 아래와 같이..
-
ContentEditable에서 커서(Caret) 활용하기(2) - 자바스크립트백수의 개발/웹 2020. 3. 3. 21:16
ContentEditable에서 커서(Caret) 활용하기(2) - 자바스크립트 [ ContentEditable에서 커서(Caret) 활용하기(1) - 자바스크립트 ]에서 커서의 위치를 확인하는 방법을 알아봤다면, 이번에는 코드를 통해 커서의 위치를 설정하는 방법을 알아보자. Caret 위치 지정하기 Caret의 위치를 지정하기 위해서 우리는 Selection과 Range만 알면 된다. 아래와 같은 코드가 있다고 생각해보자. 가나다라마바사아자차 여기서 우리는 Range를 먼저 설정해주고, 해당 Range를 Selection에 전달해주면 Caret의 위치가 지정될 것이다. "다" 부터 "아"까지 드래그를 한 형태로 Caret을 옮겨본다고 생각해보자. 간단하게 설명하자면 다음과 같다. "다"의 위치를 Ran..
-
ContentEditable에서 커서(Caret) 활용하기(1) - 자바스크립트백수의 개발/웹 2019. 6. 11. 18:30
1. ContentEditable이란? ... 특정 요소(Element)에 텍스트를 작성할 수 있도록하는 속성 아래와 같이 생성할 수 있다. 2. ContentEditable에서의 커서(Caret) ContentEditable에서 텍스트를 작성할 때 내가 작성하는 부분에 커서가 있는 것을 확인할 수 있다. 오늘은 커서의 정보를 확인하는 방법에 대해 알아보자. * 일반적으로 커서는 마우스 커서를 지칭하고, 텍스트 창에 있는 커서는 캐럿(Caret)이라고 지칭한다. 3. 커서의 정보 Selection const selection = window.getSelection() /*Selection{ anchorNode: node, anchorOffset: number, baseNode: node, baseOffs..
-
티스토리 글꼴 바꾸기백수의 일상 & 잡담/티스토리 2019. 5. 30. 23:33
티스토리를 시작하면서 시간이 날때나 심심해서 할게 없을 때 조금씩 블로그를 꾸미려고한다. 제일 처음에 한게 글꼴 바꾸기인데 티스토리의 글꼴은 어떻게 바꾸면 되는지 한번 알아보자. 글꼴 파일 or 글꼴 링크를 구하자 가장 먼저 본인이 사용하고 싶은 글꼴을 찾아야한다. '글꼴의 저작권은 꼭 확인하고 사용하자!' 글꼴을 적용하는 방법은 크게 두가지이다. 1. 글꼴 파일(ttf, otf)파일 구하기 구글이나 네이버 등 웹서핑을 통해서 본인이 원하는 글꼴 파일을 ttf 또는 otf의 파일로 구하면된다. 윈도우에서 설치 후 "제어판 > 모양 및 개인 설정 > 글꼴" 에서 설치 된 글꼴을 확인할 수 있다. 2. 웹 폰트 구하기 대표적인 웹 폰트로 구글 웹폰트가 있는데 웹 폰트의 경우 폰트의 경로를 알아야한다. 구글 ..