개발 도구 (Development Tools)/HTML & CSS

VS Code - lorem ipsum 제어하기 (자동 줄바꿈 등)

BiCute 2022. 6. 26. 10:00
반응형

 

 

VS Code를 이용해 코드를 작성하다보면 더미 텍스트를 입력하는 경우가 많은데 이때 Lorem ipsum을 emmet(단축키)을 이용해 많이 사용하게 됩니다. 

 

 

 

#1 lorem

 

가장 기본적인 사용방법입니다. 

lorem 입력후 엔터나 tap을 누르면 자동으로 문장이 작성되는데, 이 방법을 사용하게 되면 1줄에 약 200열 정도의 글자가 작성됩니다.

내용과 글의 양은 Emmet에서 미리 볼 수 있다

 

이렇게 작성하게되면 한줄로 길게 작성되는데, 우선 텍스트의 양을 원하는 만큼 잘라 내기도 해야 하고, 보기 좋게 하기위해선 하나하나 원하는 지점을 찾아 엔터를 쳐서 글을 끊어주기도 합니다.

 

 

 

#2 lorem * (반복횟수)

 

추가로 로렘의 길이가 짧다고 생각할 경우 다음과 같이 *n 을 입력하는 것으로 내용을 더욱 길게 할 수 있습니다.

lorem을 반복하는 횟수를 지정하는 것으로 이 역시 대략적인 텍스트의 양을 미리 확인할 수 있습니다.

 

이 역시 보기좋게 하기위해선 직접 원하는 지점에서 엔터를 쳐서 줄바꿈을 해줘야 하기도 합니다. 

 

 

 

#3 lorem 자동 줄바꿈

 

VS Code의 설정으로 이동합니다

설정 > Editor: Word Wrap 에서 줄바꿈 여부를 제어할 수 있습니다.

기본값으로 off로 설정되어 있는데, 이것을 bounded로 변경해줍니다.

 

이것을 변경하면 기존에 작성된 내용도 모두 뷰포트에 맞춰 줄바꿈이 되며,

앞으로는 lorem을 입력하더라도 이쁘게 한 화면에서 자동으로 줄바꿈이 되어 나타납니다.

 

 

 

#4 lorem(단어수) * (반복횟수)

 

대부분 줄바꿈이 필요하다면 위 방식으로 해결이 되기도 하지만, 

위 방식처럼 자동으로 줄바꿈을 하게되면 이것은 보이는것만 줄이 바뀌어 있을 뿐 작성된 코드는 1줄로 처리됩니다.

또한 짧게 입력하고 싶은경우엔 줄바꿈을 직접 해줘야 하거나 내용을 직접 걷어내야하는건 마찬가지인데, 다음과 같은 방식으로 원하는 단어의 개수를 직접 조절할 수도 있습니다.

 

lorem(숫자)를 입력하워 원하는 단어 개수 조절

입력한 숫자만큼 단어가 나타나게 됩니다. 랜덤한 글이 짧게 필요하다면 이 방식을 통해서 작성하시면 됩니다. 

 

또한 뒤에 * (반복횟수)를 작성해 주는것으로 짧은 문장을 몇번 반복할지 정할수도 있습니다.

이는 자동줄바꿈이랑은 달리 각각 다른 라인에 할당됩니다. 

 

아마 이정도면 lorem emmet에 대한 기능은 마스터가 아닐런지...?

 

 

 

반응형