백수의 개발/웹
-
[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는..
-
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..