728x90
반응형

[Mac] 맥북 입문하기 - 터미널 명령어

Gunliver's study note

앞으로 저는 맥을 이용해서 Python, Perl, Octave 등을 사용하려고 하는데요.
그 전에 터미널 사용에 익숙해지기 위해 터미널 기본 명령어들을 정리해보았습니다.

터미널 열기

⌘ + Shift 로 스포트라이트를 실행 시켜서 "terminal.app" 또는 "터미널.app"을 검색/실행합니다.

맥북에서 터미널을 실행시켰을 때 가장 어색했던 부분이 "~" 이 물결 표시였습니다. 윈도우의 커맨드 같은 경우 현재 디렉토리를 full path로 표시해 주지만, 터미널에서는 현재 폴더 이름만 보여줍니다. 물론 제가 모르는 세팅 방법이 있을 수도 있겠지만, 우선 맥OS의 디렉토리에 대해 알아봐야겠습니다.

  • / : 최상위 디렉토리
  • ~ : 홈 디렉토리

  • 일반적으로 홈 디렉토리는 /Users/사용자ID 에 위치하는 것 같습니다. 아무튼 맥OS의 터미널에서는 현재 사용중인 디렉토리의 Full path를 보기 위해 "pwd" 명령어를 사용합니다.


    Shell 명령어 비교
    명령어 Windows 커맨드 Mac OS 터미널
    현재 디렉토리 cd pwd
    현재 디렉토리 파일 리스트 보기 dir ls
    디렉토리 이동 cd cd
    디렉토리 생성 mkdir mkdir
    디렉토리 삭제 rmdir rmdir
    화면 클리어 cls clear
    null 파일 생성 type NUL > touch
    파일 삭제 del rm
    파일 이동 move mv
    파일/디렉토리 이름 바꾸기 ren mv
    Explorer/Finder 에서 열기 start open


    728x90
    반응형
    728x90
    반응형

    [Mac] 맥북 입문하기 - 단축키

    Gunliver's study note

    윈도우 밖에 사용해보지 못했던 제가 맥북의 세계에 입문하면서 겪었던 어려움들.
    다른분들도 똑같이 겪고 있을 수도 있다는 생각에 제가 공부해온 것들, 그리고 겪었던 시행착오들을 이 곳에 하나하나 노트해보려고 합니다.
    개인 노트 형식으로 정리하려고 하니 다소 두서없이 정리되더라도 양해 부탁드리며, 수정 사항이나 다른 유용한 단축키를 알고계시다면 댓글로 남겨주세요.

    맥북단축키를 검색하다보면 이상한 기호들이 자주 보입니다.
    이 기호들로만 설명된 곳이 많으니 아래 4개 기호는 외우는게 좋습니다.

  • ⌘ command(cmd)
  • ⇧ shift
  • ⌥ option
  • ⌃ control

  • 윈도우와 헷갈리는 키
    Mac OS

    ⌘ + C - 복사하기
    ⌘ + X - 오려두기
    ⌘ + V - 붙여넣기
    ⌘ + Z - 실행 취소
    ⌘ + F - 검색하기
    ⌘ + A - 전체 선택
    ⌘ + S - 저장하기
    ⌘ + O - 불러오기

    Windows OS

    ctrl + C - 복사하기
    ctrl + X - 오려두기
    ctrl + V - 붙여넣기
    ctrl + Z - 실행 취소
    ctrl + F - 검색하기
    ctrl + A - 전체 선택
    ctrl + S - 저장하기
    ctrl + O - 불러오기

    윈도우와 완전히 다른 키
    Mac OS

    ⌃ + D - 커서 앞 단어 지우기
    return - 파일 이름 바꾸기
    ⌘ + delete - 파일 지우기
    ^ + space / capslock - 한/영 전환
    ⌘ + Tab - 작업 창 전환

    Windows OS

    backspace - 커서 앞 단어 지우기
    F2 - 파일 이름 바꾸기
    delete - 파일 지우기
    한/영 - 한/영 전환
    Alt + Tab - 작업 창 전환

    맥북에서 유용한 단축키
    Mac OS

    ⌘ + ⇧ + 3 - 화면 부분 캡쳐(파일 저장)
    ⌘ + ⇧ + ^ + 3 - 화면 부분 캡쳐(클립보드 저장)
    ⌘ + ⇧ + 4 - 화면 전체 캡쳐(파일 저장)
    ⌘ + ⇧ + ^ + 4 - 화면 전체 캡쳐(클립보드 저장)


    728x90
    반응형
    728x90
    반응형

    오늘은 스킨의 전체적인 구조를 한번 살펴보고 원하는 디자인을 어디에 삽입해야 하는지 알아보려고 합니다.


    저같은 경우  복잡한 문제를 쉽게 해결할 있도록 구글의 Chrome 브라우저를 사용해보았습니. 

    제가 개인적으로 너무나 좋아하는 브라우저입니다.





    크롬 브라우저에  티스토리 블로그를 띄워놓고오른쪽 상단의 [옵션] - [도구 더보기] - [개발자 도구 클릭해줍니다. (Windows 환경에서는 F12 단축키를 이용할 수도 있습니다.)




    우측 패널에 html 구조가 나타나는게 보이시나요?

    복잡한 스크립트의 왼쪽 화살표를 눌러주며 상세한 내용을 닫아보겠습니다.



    어느 html 스크립트를 봐도 <head><body> 이루어진 여기까지의 구조는 거의 동일하다고 보시면 됩니다.

    저는 여기서 본문을 보고싶기 때문에 <body> 다시 열어보겠습니다.


    그리고마우스를 스크립트에 가져가서 조금씩 이동하다보면 왼쪽 뷰어에서 스크립트에 해당하는 부분이 하이라이트 되는 것을   있습니다이런식으로 어느부분에 디자인을 추가할지 결정할  있습니다저는 헤드라인 바로 아래 멋진 제목칸을 하나 추가해보도록 하겠습니다.



    Chrome 개발자도구로 확인해보니 저같은 경우 <div id=“cMain”>…</div>  가장  부분에 추가하면   같습니다.


    이제 삽입할 위치를 정했으니 추가할 디자인을 골라야겠죠?

    저는 여기에 멋진 제목을 넣기 위해서 Bootstrap Jumbotron 추가해보겠습니다.


    우선 <head>…</head> 안에 Bootstrap 사용하기 위한 CDN 추가해야합니다.

    Bootstrap 홈페이지(https://getbootstrap.com/)에서 CDN 태그들을 복사해옵니다.

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin=“anonymous"> 



    그리고 아까 찾은 위치에 Jumbotron 코드를 나름대로 수정해서 삽입하면 끝입니다

    Ctrl+F (Mac 에서는 command+F) 위치를 찾고 복사 붙여넣기!

     아래 링크에서 다양한 코드를 찾아볼 있습니다

    (https://getbootstrap.com/docs/4.0/components/jumbotron/)


    <div class="container">
      <div class="jumbotron">
        <h1>Gunliver Bootstrap</h1>
        <p>또또로의 데이트 연구소에 오신 것을 환영합니다</p>
      </div> 
    </div> 



     


    저는 <div id=“cMain”>…</div> 를 찾았었기 때문에 "cMain"을 검색해서 위치를 찾은 후 삽입해주었습니다.



    바로 여기에 붙여넣고 이제 화면에 나오는지 확인해 보겠습니다!


     

    오늘은 크롬을 이용해 html 구조를 읽는 방법과 디자인을 추가하는 방법을 알아보았습니다.

    다음 시간에는 bootstrap 이용해 조금 다양한 디자인을 추가해보도록 하겠습니다.



















    728x90
    반응형
    728x90
    반응형

    사실 애드센스 승인이 안나오면서 글쓰기에 대한 의욕을 잃어가던 ...

    드디어 저희도 애드센스 승인을 받았습니다. ㅠㅠ


    애드센스 승인도 받은 김에 우리의 티스토리를 꾸며보고 싶은 욕심도 생기더라고요.

    학창시절 컴퓨터시간에 배웠던 HTML 기본기를 바탕으로 지금부터 파해쳐 보겠습니다. 


    우선 티스토리를 제대로 파헤치기 위해서 새로운 서브 블로그를 하나 팠습니다. 

    그리고또또로의 데이트 연구소에서 쓰고 있는 스킨을 똑같이 선택합니다.

     


    스킨 이름 #1 (반응형)입니다. 


    반응형이라는 말은 사용자의 접속자의 디스플레이 종류에 따라 화면 크기를 자동으로 조절해 주는 것을 의미합니다. 쉽게 얘기해서 PC 모바일 환경에서 모두 사용할 있는 포맷이라는 거죠.




    [꾸미기]-[스킨변경] 바로 아래 있는 [스킨 편집] 들어가 보겠습니다.

    그리고 우측 상단에 [html 편집] 누르면 다음과 같이 html 스크립트가 나타나게됩니다.   



    다소 복잡해 보이긴 하지만 우선 치환자에 대해서 알아보겠습니다.


    치환자는   같이 생긴 태그 들을 말하는데요. 곳이 나의 티스토리 정보들로 치환될 곳입니다.


    한번 테스트를 해보겠습니다.

    'IT노트' 카테고리의 글 목록 (3 Page) 대신에안녕하세요 적어보겠습니다.


    <!-- <title>'IT노트' 카테고리의 글 목록 (3 Page)</title> -->

    <title>안녕하세요</title>


    우측 상단에 저장을 누르고 확인해보겠습니다.

    title안녕하세요 출력되는게 보이시죠? 



    티스토리는 이렇게 기본 틀에 치환자를 이용해 내용을 대입하는 방식으로 동작하고 있습니다.

    치환자에대해 알았으니 다음엔 본격적으로 html 구조에 대해서 파헤쳐보겠습니다.








    728x90
    반응형

    + Recent posts