[Web] 웹 개발 시 유용한 사이트

웹 개발 시 유용한 사이트들을 정리한다.

ATOM editor 사용법

생활코딩에 Atom editor 사용법(https://opentutorials.org/module/1579)이 있길래, 보면서 몇가지 적는다. 적다보니, 내가 뭘 또 이런 것까지 적고 있나 싶긴 한데… ^^;;

  • Toggle tree view:  View / Toggle Tree view (Ctrl + \)
  • Find in buffer: Ctrl + F
  • Find Next: F3, Find Previous: Shift + F3
  • Find File: Ctrl + P. 파일명 일부 혹은 패턴만 쳐도 찾아준다.
  • 아래쪽 오른쪽에 나온 Auto detect 된 File type이 나온다. 변경하고 싶다면 클릭 후 변경.
  • Toggle Developer tools: View / Developer / Toggle Developer tools (Ctrl + Shift + I)
  • Stylesheet: Atom 에디터 내의 element들의 lesscss를 수정할 수 있다. File / Stylesheet
  • Plugins:
    • emmet: HTML tag 작성 시, syntax 작성 후 Tab 혹은 Ctrl+E 하면 html로 풀어준다.
      • !: html template 입력
      • li*20: <li></li> 가 20개 입력.
      • li>a*20: <li> <a href=””></a><a href=””></a>…<a href=””></a> </li>
      • (li>a)*20: <li><a href=””></a></li> <li><a href=””></a></li>…<li><a href=””></a></li>
      • Syntax: https://docs.emmet.io/cheat-sheet/, 더 자세히는 https://docs.emmet.io/abbreviations/syntax/, CSS도 abbreviation 제공(https://docs.emmet.io/css-abbreviations/)
        • Child: >
          • div>ul>li
            <div>
                <ul>
                    <li></li>
                </ul>
            </div>
        • Sibling: +
          • div+p+bq
            <div></div>
            <p></p>
            <blockquote></blockquote>
        • Climb up: ^
          • nav>ul>li^^a
            <nav>
                <ul>
                    <li></li>
                </ul>
            </nav>
            <a href=""></a>
        • Multiplication: *
          • a*10
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        • Grouping: ()
          • nav>ul>(li>a)*5
            <nav>
                <ul>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </nav>
        • Attiribute:
          • ID attribite: #
            • nav#navigation
              <nav id="navigation"></nav>
          • Class attribute: .
            • li.list
              <li class="list"></li>
          • Tag attribute: []
            • a[target=”_blank” title=”asdf”]
              <a href="" target="_blank" title="asdf"></a>
        • Value: {}
          • li>a>{table}
            <li><a href="">table</a></li>
        • Numbering: $
          • ul.li.item$*5
            <ul class="li item1"></ul>
            <ul class="li item2"></ul>
            <ul class="li item3"></ul>
            <ul class="li item4"></ul>
            <ul class="li item5"></ul>
    • script: script를 입력 후 단축키(Shift + Ctrl + B로 바로 실행 결과 확인. 실행 환경은 따로 설치해야 함.

HDD내의 자료 완전 삭제! Revo uninstaller

무료 프로그램 완벽 제거기 & 데이타 소멸기(Wipe Tool) Revo Uninstaller 1.75

멤버십 컴퓨터를 정리하는 중.. 컴퓨터 내에 내 보안카드 같은 것들을 저장해놨던 것이 맘에 걸려서 Wipe tools을 찾아 정리하기로 결정했는데, 의외로 하드디스크 단위나 파티션 단위로 청소해주는 무료 Wipe tools을 찾기가 쉽지 않았다. 그리고, 이미 난 그 파일들을 단순히 Shift Delete로 지워버린 상태..

검색해보니 위의 프로그램이 하드 내의 지워진 데이터를 복구 불가능하게 만들어 준단다.. 지금 돌리는 중인데 후에 한번 복구 프로그램을 돌려볼까 싶기도 하고.. 살펴보니 우리말도 지원하는데 좀 이상하게 되어있는듯-_-;; Portable Version으로 사용중인데, INI 파일들로 문자열들이 저장되어 있는 듯 하다. 조금 손 볼까…

아무튼 내 하드 내의 Source, Repository, 개인 정보 등등을 위 툴로 정리중!

특히나 개인 정보, 보안 정보들은 조심해야 한다.