노션에서 사용하는 가장 기초적은 텍스트 블록


안녕하세요.
고코더 입니다.




 1. 노션의 블록을 하나씩 알아보려고 합니다. 그 중에 오늘은 가장 기본이 되는 텍스트 블록을 살펴봅니다. 텍스트는 노트에서 가장 중요하고 가장 많이 사용하는 데이터 입니다. 대부분 글자를 입력하려고 노트를 사용하기 때문입니다. 



 2. 텍스트 블록은 디폴트(default) 설정입니다. 노트를 열고 바로 사용한다면 텍스트 블록을 사용하게 됩니다. 노트를 열면 이미 맨위 라인은 텍스트 블록이 준비중이게 됩니다. 



 3. 물런 텍스트 블록을 선택해서 추가하여 사용이 가능합니다. 하지만 그대로 쓰면 텍스트 블록이기에 굳이 추가할 필요는 없습니다.


 4. 기존에 에버노트, 원노트와 같은 노트 기반의 프로그램에서 넘어오는 분들중에는 텍스트 기반이 편리하여 텍스트 블록 기반으로 사용 하는 경우를 종종 봅니다. 물런 정리는 각자의 노하우와 사용법이 있지만 노션을 사용한다면 더 다양한 블록을 사용하는걸 추천합니다.


마무리


텍스트 블록은 모든 노트의 기본 속성 입니다.


댓글을 달아 주세요


워드에서 스타일 없이 텍스트 붙혀넣는 가장 빠른 단축키 


안녕하세요.
고코더 입니다.


일반적인 프로그램에서는 CTRL+SHIT를 실행하면 서식없이 글자만 붙혀넣기가 되는데요
워드는 이게 안됩니다. 그래서 좀 살펴보니 해당 원하는 단축키는 찾기 어렵고 비슷한게 있습니다.


 1. 단축키 CTRL+ALT+V를 누르면 붙여넣기 옵션 창이 나타납니다.
여기서 서식 없는 텍스트를 바로 선택하면 기존에 붙혀넣고 서식을 선택하는 방법보다 조금 빠르게 가능합니다.



마무리


이게 제일 빠르고 편합니다. 


댓글을 달아 주세요


텍스트를 3D로 꾸미기


안녕하세요.
고코더 입니다.


 1. 이번에는 재밌는 효과를 만들어 보려고 합니다. 
텍스트를 입체로 3D 느낌 나게 만들어 보려고 합니다. 


 2. 텍스트 도구를 통해 글자를 입력 합니다.


 3. 선택 도구로입체로 만들고 싶은 
텍스트를 영역을 지정합니다. 


 4. 그 다음 컨트롤을 누르고
방향키를 위로 한번 오른쪽 한번을 누릅니다.
CTRL + ↑,→


 5. 그러면 이미지가 복사되고 한픽셀씩 겹치면서 3D 느낌이 나게 됩니다.


 6. 2번째 반복한 이미지 입니다.
아직은 입체감이 덜하네요


 7. 그리고 입체감이 느껴질때까지 위에 작업을 반복하였습니다. 



 8. 그림판만에 느낌으로 텍스트가 입체감이 생겼습니다.
(포토샵이면 금방일텐데요)



마무리


그림판으로 이런거까지 가능하다는게 재밌지 않나요?


댓글을 달아 주세요


콘솔 노출 로그 제한 없애기


안녕하세요.
고코더 입니다.


 1. console을 확인하다보면 모든 SQL을 디버그 하고 싶은데  가끔은 텍스트가 짤려 있는 경우가 있습니다.
그건 텍스트 노출이 제한되어 있어서 입니다. 사이트가 커질수록 디버깅 문자도 많아지는건 당연합니다. 
이 제약을 풀어보겠습니다.



 2. 이클립스에서 window 탭에서 Preferences를 클릭 합니다. 


 3. 환경 설정 화면에서 Run/Debug 에서 Console을 클릭 합니다. 
그리고  Limit console output에 체크를 해제 합니다. 


그럼 콘솔 로그에서 한번에 찎히는 내용이 무제한으로 긴 SQL이나
긴 디버깅도 확인하기 편합니다. 


마무리


콘솔 제한이 푸는거 보면 큰 사이트 운영하시나 보네요?






댓글을 달아 주세요


editor 가운데 있는 선 없애기


안녕하세요.
고코더 입니다.



 1. 아톰 편집기에서 세로 가늘한 선 워드랩이라고 불리는 이것은 줄바꿈 라인을 알려주는 선입니다.
워드랩이라고도 하는데요. 보통은 이 라인을 사용하지 않는데 실선을 바라보면서 
개발하는 경우가 많습니다.이걸 없애보겠습니다.


 2. file(파일) -> Stylesheet(스타일시트)를 클릭 합니다. 

 3. 그리고 나타나는 창에서 해당 CSS를 붙혀넣고 세이브 합니다. 
atom-text-editor::shadow {
.wrap-guide {
  visibility: hidden;
}



 4. 그럼 즉시 세로 선이 없어집니다. 

눈에 거슬리는 세로 선부터 없애고 시작하세요


마무리


저 선이 해당 소스에 줄 바꿈 기준이 되는 세로 선입니다. 


댓글을 달아 주세요


개발 소스 비교 사이트 


안녕하세요. 고코더 입니다.


틀린 글자 찾기, 틀린 그림 찾기
문서가 잘못됐거나 소스코드가 틀렸을 경우에
원본과 현재 수정중인 데이터를 비교해봐야할 경우가 있습니다.

이럴땐 우린 매직아이를 시도하게 됩니다.

하지만 IT 익스프레스 구독자들은
그럴 필요가 없습니다

▼ 바로 이사이트가 있기 때문입니다.



▼ 접속하면 Text 비교 영역이 있습니다
여기에 한번 데이터를 넣어보았습니다.



▼ 네 이전에 XML 개발 강의때 사용한 소스코드인데
몇가지 수정을 한후에 비교해보니
정확히 틀린곳을 하이라이트로 보여주네요



▼ 이미지도 가능합니다.
대신 이미지는 왼쪽 오른쪽 이동 가능한슬라이드를 
이용해서 두이미지를 눈으로 비교 가능하도록 해놓았습니다.


▼ PDF도 가능한데요
PDF를 업로드하면 text만 추출해 비교를 해줍니다.



이제 텍스트의 변경을 빠르게 파악하고 싶으면
이 사이트를 이용하면 될거 같네요


마무리


뭔가 불안하다 싶으면 !
바로 비교해보세요.




댓글을 달아 주세요



긴 글 텍스트 축약하기 


DIV에 긴 텍스트가 들어가면 크기가 조절이 되거나 일명 글자가 삐져나오죠
그래서 보통 몇 글자 이상이면 ...을 붙혀서 축약 시키도록 코딩을 합니다.
하지만 해당 기능 각 프론트 개발자마다 다르게 구현 해놓아 유지보수가 어렵습니다.

그래서 오늘은 긴 텍스틀 알아서 축약해주는 플러그인을 소개하겠습니다.

▼우선 참조 사이트는 아래입니다. nl을 보아 네덜란드 개발자인거 같은데
홈페이지 부터 매우 이쁘네요 
자세한 레퍼런스는 해당 홈페이지에서 둘러보세요




해당 사이트를 참고해 개발자 분들이
빠르게 익힐 수 있도록

익스프레스하게 예제를 만들어봤습니다.

▼jquery와 해당 dotdotdot.js를 참조하였습니다.
1
2
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dotdotdot.js"></script>
cs

▼우선 사용법은 선택자의 .dotdotdot();을 넣으면 됩니다.
1
2
3
$(function(){
    $('#gocoder').dotdotdot();                    
});
cs

▼테스트를 위해 div 에 class 속성을 주었습니다.
1
2
3
4
5
.gocoder{
    width:250px;
    height:250px;
    border:3px solid #CCC;
}
cs

▼div는 이렇고 이안에 내용을 담게 됩니다.
1
2
3
<div class="gocoder" id="gocoder" style="float:right;"> 
        
</div>

cs


▼그리고 소스의 합은 아래와 같습니다.
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.dotdotdot.js"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            $('#gocoder').dotdotdot();
        });
    </script>
    <style>
        .gocoder {
            width250px;
            height250px;
            border3px solid #CCC;
        }
    </style>

</head>
<body>

<div class="gocoder" id="gocoder" style="float:left;">
    동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려
    강산 대한사람 대한으로 길이 보전하세 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 이 기상과 이 마음으로 충성을 다하여
    괴로우나 즐거우나 나라사랑하세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세
</div>

<div class="gocoder"  style="float:right;">
    동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려
    강산 대한사람 대한으로 길이 보전하세 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세 이 기상과 이 마음으로 충성을 다하여
    괴로우나 즐거우나 나라사랑하세 무궁화 삼천리 화려 강산 대한사람 대한으로 길이 보전하세
</div>

<br/>
<br/>
</body>
</html>


▼해당 파일을 웹에서 확인하면 이처럼 손쉽게 텍스트를 ... 마무리로 축약할 수 있습니다.







마무리


 

 필요한 기능을 하나의 컴포넌트로 통일하여 개발하면

유지보수가 쉬워집니다.



댓글을 달아 주세요