본문 바로가기

TIL

(23)
Vim editor의 스크롤을 조작하고 전체선택하는 방법 Vim editor를 사용하다보면 문서화면의 스크롤을 조작하거나 특정 위치로 이동할 경우가 있다. 또한 문서의 첫 부분, 마지막 부분으로 이동하기도 하고 문서 전체를 선택하기도 한다. 본 문서는 해당 내용을 살펴본다. 행을 한줄씩 움직이는 방법 문서를 보다보면 행을 한 줄씩만 위로, 아래로 움직여야 되는 경우가 생긴다. 이 때 방향키나 j, k키를 사용하게 되면 위나 아래의 문장에 다다를 수 있다. 하지만 이런 방법이 아니라 행 자체를 위로 올리고 아래로 내리기 위해서는 다른 명령어가 필요하다. 이 때 사용하는 것이 ctrl + e 와 ctrl + y 이다. 첫 번째 줄에 커서가 있는 상황에서 ctrl + e를 누르게 되면 화면 자체가 위로 올라가면서 두 번째에 있던 행이 첫 번째로 대치된다. 위에서 보..
Vim editor에서 단어 검색하기 문서 내에서 특정 단어를 찾는 행위는 굉장히 많이 일어나는 행위 중 하나이다. Vim editor에서 역시 해당 기능을 사용할 수 있다. 본 문서에서는 Vim editor에서 열린 문서에서 특정 단어를 검색하는 방법을 학습한다. 단어를 검색하는 방법 보통의 경우 특정 단어를 찾는 단축키는 'ctrl' + 'f' 또는 'command' + 'f' 이다. Vim editor의 경우에는 이와 다르다. /를 이용한다. 위의 이미지에서 'test'라는 단어를 찾는 상황을 가정해본다. 'test'는 해당 문서에 총 2개 존재한다. 이 때 /test를 입력한 후 엔터키를 눌러주면 첫 번째 'test'를 찾고 't'에 커서가 위치한다. 여기서 다시 엔터키를 눌러주면 다음의 test를 찾아 이동할 것 같지만 그렇지 않다..
Vim editor에서 커서 이동하는 여러 방법 Vim editor에서 커서를 이동하는 방법은 여러가지가 있다. 기본적으로는 방향키로도 움직일 수 있다. 하지만 방향키가 없던 시절 생겨난 Vim editor의 고유한 기능인 커서 이동 방법을 알아두는 것도 굉장히 매력적일 것이다. 아래의 본문에서 상하좌우로 이동하는 방식, 단어마다 이동하는 방식, 문장마다 이동하는 방식에 대해 알아볼 것이다. 방향으로 커서 이동하기 위쪽, 아래쪽, 왼쪽, 오른쪽으로 커서를 이동하기 위해서는 두 가지의 방법이 있다. 먼저 떠오를 방법은 방향키를 사용하는 것이다. Vim editor 에서도 방향키는 그대로 동작한다. 위, 아래, 오른쪽, 왼쪽 모두 이동 가능하다. 하지만 방향키 없이도 이동하는 방법이 있다. 바로 'h', 'j', 'k', 'l' 버튼을 사용하는 것이다. ..
Vim editor를 종료하는 다양한 방법 일반적인 종료 방법 Vim editor를 통해 파일을 열었다가 그냥 닫고 싶은 경우가 있을 수 있다. 아무런 수정 없이 그냥 에디터를 닫고 돌아가고 싶은 경우에는 다음과 같이 ':q' 명령어를 사용한다. Vim editor 창에서 콜론 버튼을 누르고 q를 누른 후 엔터키를 누르면 해당 에디터 상태에서 밖으로 빠져나갈 수 있다. 작성한 내용 저장하기 Vim editor를 통해 파일의 내용을 수정한 경우가 있다. 이 경우 수정한 파일을 저장하는 단계가 필요하다. 보통 저장을 할 때에는 'ctrl' + 's' 혹은 'command' + 's' 를 사용한다. Vim editor에서는 ':w' 라는 명령어로 파일을 저장한다. 이미지에서와 같이 ':w' 명령어를 사용하면 변경한 사항이 저장된다. 저장하고 종료하기 ..
vim editor로 특정 경로에 있는 파일 열기 vim editor가 뭘까? vim editor는 말그대로 텍스트 편집기이다. 주로 터미널창 등에서 사용이 된다. 학습곡선이 높아서 초기 진입이 매우 어렵다는 단점을 가지고 있다고 한다. 하지만 사용법을 알아두고 나면 그 확장성과 다양한 기능들 덕분에 많이 사용된다고 한다. 일반적인 메모장과 같은 편집기들과는 달리 일반모드, 편집모드 등 여러 모드를 제공한다. 또한 다양한 확장 프로그램들을 지원하고 있어 개인에 맞춰 커스터마이징이 가능하다. 또한 유닉스, 리눅스, 윈도우에서까지 지원가능한 편집기이다. vim editor로 macOS 특정 경로에 있는 파일 열기 텍스트 편집기를 쓰려면 일단 특정 파일을 열어야 할 것이다. 그래서 이번 글에서는 특정 폴더로 들어가고, 그 폴더에 존재하는 파일을 여는 과정을 ..
inline-block의 사용과 문제점 inline-block의 사용 기본적으로 div 태그는 block 요소이다. 따라서 위와 같은 코드를 작성하면 아래와 같이 표현된다. 만약 div의 display 속성값을 inline으로 바꾸게되면 화면상에는 아무것도 보이지 않게된다. 그 이유는 inline 요소는 height와 width를 가질 수 없기 때문이다. 만약 inline요소이면서 block처럼 width와 height을 가지게 만들고 싶다면 다음과 같이 HTML 코드를 작성하면 된다. display 속성의 값으로 inline-block을 주었다. 그 결과는 아래와 같다. inline-block의 경우 block과 같이 height과 width를 가질 수 있으며 사방에 margin을 주는 것도 가능하다. 또한 inline처럼 바로 옆에 다른 ..
inline 요소에서의 padding과 margin inline 요소 중 하나인 span 태그를 생성하고 hello라는 text를 넣어주었다. 그리고 background-color를 darkseagreen으로 설정한 결과 다음과 같은 화면이 출력되었다. padding 속성 해당 span 태그에 padding 속성으로 20px의 값을 주었을 땐 어떻게 동작할까? hello hello inline 요소의 경우 padding은 위, 아래, 왼쪽, 오른쪽 모두 잘 적용된다. 이미지에서 보이듯 hello 라는 문구 주변으로 동일한 px의 공백이 생기는 모습을 볼 수 있다. margin 속성 이번에는 동일한 span 태그에 margin 속성을 부여해보겠다. hello hello 뭔가 예상과 많이 다른 모습이다. 공백이 왼쪽과 오른쪽에만 적용되고 위아래에는 적용되지 ..
모든 태그에 css 속성을 적용하는 방법 모든 태그에 css 속성을 적용하는 방법 개발을 하다보면 모든 html 요소들에 대해 같은 css를 적용해야 할 수도 있다. 그럴 때 모든 태그에 같은 css 속성을 추가해주는 대신 사용할 수 있는 방법이 있다. div 태그에만 줬던 border 속성을 * 표시에 준 모습이다. 여기서 * 는 모든 html 요소들을 가리킨다. 덕분에 body, div 가릴 것 없이 모두에 border 속성이 추가되었다. * 를 통해 모든 html 요소에 border를 추가했다면 inline 요소인 span 태그에도 border가 적용될까? third 태그의 안쪽에 span 태그를 추가하고 content는 hello로 넣어준 모습이다. hello span태그 역시 텍스트 주변으로 border가 잘 만들어진 모습을 볼 수 있다.