분류 전체보기
-
[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..
-
Spring AOP(Aspect Oriented Programming)이란?백수의 개발/스프링 2019. 12. 31. 18:52
AOP(Aspect Oriented Programming)이란?AOP를 관점 지향 프로그래밍이라고 한다. 관점 지향은 어떤 로직에 대해 핵심 기능과 공통 기능을 나누어서 보고, 그 관점을 기준으로 모듈화를 진행하는 것이다.즉, 공통 기능을 핵심 기능과 분리해 놓고, 공통 기능 중에서 핵심 기능에 적용하고자 하는 부분에 적용하는 것이다. 간단하게 보면 일반적인 핵심 비즈니스 로직은 핵심 기능으로 본다면 로깅, 트랜잭션, 데이터베이스 연결, 파일 입출력 등과 같은 일련의 핵심 로직을 위한 부가적인 기능들을 공통 기능으로 분리한다고 볼 수 있다. AOP 주요 용어Aspect : 공통 기능(모듈화 된 기능)Target : Aspect(부가 기능)를 부여할 대상 (클래스, 메서드 .. ) Advice : 실질적인..
-
겨울철 바이크 장비 - 방한 장갑 & 마스크백수의 라이딩 2019. 11. 4. 19:08
겨울철 바이크 장비 - 방한 장갑 & 마스크 10월 말이 되면서 밤공기가 많이 차가워졌다. 항상 일을 보고 밤 늦게 오토바이를 타고 집을 가곤하는데 옷은 따뜻하게 입어도 장갑이 메쉬 재질이라 손이 너무 시렵더라... 핸들에 열선이 있어서 손뜨가 있는데도... 그래서 적어도 12월 중순이나 말까지는 탈 생각이니까 따뜻한 장갑을 사기로 했다. 덤으로 얼굴을 따뜻하게 할 마스크도 함께 구매하기로 했다. 역시 이번에도 네이버에서 이것 저것 검색을 해봤다. 사실 개인적으로 비싼것 보다는 가성비를 추구하기 때문에 2~4만원 사이의 구매평이 좋은 것들을 위주로 찾아봤다. 그렇게 찾은게 이 장갑이다. 가격도 배송비 합쳐서 22,500원이고 리뷰도 180개가 넘는데 평점도 4.4로 상당히 높았다. 리뷰 내용들도 다 괜찮..
-
IoC그리고 DL/DI백수의 개발/스프링 2019. 11. 3. 22:02
IoC(Inversion of Control) IoC란 말 그대로 제어의 역전, 즉 제어권이 바뀌었다는 것이다. 이는 객체의 생성부터 소멸까지 생명 주기의 관리를 개발자가 아닌 컨테이너가 대신 해준다는 것이다. 그 덕분에 개발자가 직접 객체를 주입하며 신경써야했던 코드들을 줄일 수 있다. IoC에는 아래 그림과 같이 크게 DL(Dependency Lookup)과 DI(Dependency Injection)이 있다. 이에 대해 조금 더 내용을 살펴보자. DL(Dependency Lookup) DL은 의존성 검색이다. 이는 Bean에 접근하기 위해 컨테이너가 제공하는 API를 이용하여 Bean을 Lookup하는 것이다. 아래와 같이 Bean에 대한 정보가 있는 xml파일이 있다고 생각해보자. java에서는 ..
-
멀티 프로세스와 멀티 스레드백수의 개발/운영체제 2019. 10. 29. 21:27
이전에 [백수의 면접/운영체제]프로세스(Process)와 스레드(Thread)에 대한 이야기를 해보았다. 오늘은 이전 내용을 바탕으로 멀티 프로세스와 멀티 스레드에 대해서 다루어 보자. 멀티 프로세스 하나의 작업을 처리하기 위한 다수의 프로세스를 멀티 프로세스라고 한다. 간단히 말해 여러개의 프로그램을 통해 하나의 작업을 처리하는 방식이다. 장점 - 여러개의 프로세스 중 하나에 문제가 발생하더라도, 해당 프로세스만 죽고 다른 프로세스에는 영향을 주지 않는다. 단점 - 여러개의 프로세스를 돌아가면서 명령을 처리하게 되는데, 이 때 Context Switching에 대한 오버헤드가 크다. - 프로세스 간 데이터를 공유할 수 없어 IPC통신을 해야하고, 독립적인 코드공간과 데이터 공간을 차지한다.(장점이자 단..