HTML 코드 원본 그대로 유지해서 복사하는 방법 | 코드 색깔까지 함께 복사.

요즘은 티스토리도 많이 하시고, 블로그 도 많이 하시고 해서 html 코드를 사용하시는 분들이 많이 있습니다.

html 코드를 사용하다 보면 편집을 해야 하는 상황들이 간혹 생기고, 오류를 파악하는 과정들이 생깁니다,

그럴 때마다 현재 문제가 생긴 html 코드를 옆에 두고, 새 코드창을 열어서 수정을 해야 하는데, 현재 문제가 생긴 html 코드를 어떻게 두고 봐야 할지 고민이 생기고는 합니다.

그래서 보통 저 같은 컴맹들이 사용하는 방식은 메모장에 문제가 생긴 코드를 복사해서 옮겨 담습니다.

 

메모장에서 html 소스코드를 보는 것은 불편한 일입니다.

 

하지만 메모장은 html 코드를 복사할 수는 있는데, html 코드에 있는 특유의 코드 색상들까지 같이 동반해서 가져오지는 못합니다.

또한 실제 내 html 코드창에서 느끼던 체감 코드간격과 다르게 다소 이질감 느끼는 단어간격과 문장 간격을 가지고 있어서 메모장에 html 코드나 프로그래밍 코드를 놓고 볼 때는 눈이 아프고 집중이 잘 되지 않습니다.

 

 

1. html 코드를 원본 상태 유지해서 복사하는 방법

 

메모장에 복사하는 방법을 제외하고 크게 두 가지 방법이 있습니다. 

첫째, MS 워드를 사용하는 방법

둘째, 삼성 노트를 사용하는 방법

 

MS 오피스중 하나의 앱인 MS 워드에 저장하는 방식은 이미 알고 있었는데, 생각보다 손이 쉽게 가지가 않습니다. 

그 이유는, MS워드를 실행할 때 처음 그 로딩속도부터 조금 느린 편이고, 이유를 알 수 없지만 MS워드 상단의 인터페이스가 정신없어 보이는 경향이 있습니다. 그리고 MS워드에 복사 붙여 넣기를 하면, 맞춤법 검사 기능으로 인해 빨간 줄이 자글자글하게 나오는데, 이것 또한 가독성에 불편함을 준다라고 생각이 됩니다.

물론, MS워드의 맞춤법 검사를 해제하는 방법이 있기는 합니다만, 진짜 문서작업을 위해 워드를 사용해야하는 경우 이 맞춤법 검사 기능을 켜고 해야 하기 때문에 켰다, 껐다 하는 것이 불편하기도 합니다.

 

그래서 이번에 한 번 삼성노트에다가 복사붙여넣기를 해봤는데 잘됩니다. 약간 색상 표현이 다른 부분은 있는데, 큰 문제가 되어 보이지 않았습니다.

 

 

2. MS워드에 html 코드 복사 붙여 넣기 하는 방법

티스토리 스킨 html 의 일부를 하나 예로 들어보겠습니다.

 

티스토리 html 소스코드들은 저렇게 색깔로 구분되어 있습니다.

 

첫째, html 문장을 Ctrl+c , Ctrl+v  해서 MS워드에 붙여 넣습니다.

붙여넣기 하면 아래 조그맣게 선택창이 뜹니다. 클릭해줍니다.

둘째, 붙여넣고 나면, 하단 끝에 붙여 넣기 서식이라는 선택창이 작게 뜨고, 거기서 원본 유지를 클릭해 줍니다.

원본서식유지 버튼을 눌러서 클릭해줍니다.

 

평소에 붙여넣기 서식 선택창을 잘 사용하지 않으신 분들은 이런 것이 있었는지도 잘 모르셨던 분들도 계실 겁니다. 원본유지 아이콘에는 붓 그림이 들어있습니다. 한마디로 디자인서식까지 같이 끌고 와서 복사해 주겠다는 뜻입니다.

 

MS워드 복사붙여넣기 완료

 

이렇게 화면 복사가 완료됩니다.

기존 원본 코드와 색깔 자체가 좀 다릅니다. 그래서 기존 코드와 한 눈에 매칭이 잘 안됩니다.

또한 MS워드의 맞춤법 검사기능으로 인해, 붙여 넣기 한 코드를 다시 읽는데 다소 신경이 거슬리는 면이 있습니다. 저는 복잡하거나 긴 글을 볼 때 이런 맞춤법검사가 뜨면 불편함을 느끼는 편입니다. 워드 사용자분들 중에서도 저 같은 분들이 있을 것으로 사료가 됩니다.

 

 

3. 삼성노트에 html 코드 복사 붙여 넣기 하는 방법

동일한 티스토리 스킨 html의 일부로 예를 들겠습니다.

첫째, html 코드 문장을 Ctrl+c, Ctrl+v 해서 삼성 노트에 붙여 넣습니다.

삼성노트는 코드 색깔까지 모두 복사가 되어 좋습니다.

 

둘째, 삼성노트의 텍스트 사이즈를 조절해 줍니다.

사이즈를 줄여주니 훨씬 보기 좋습니다.

 

삼성노트의 기본 텍스트 사이즈가 12 정도로 되어있을 겁니다. 개인마다 차이가 있을 수 있습니다. 좁은 좌우폭으로 인해서 코드의 줄 바뀜 현상이 줄어들 수 있도록 원하는 사이즈로 코드 사이즈를 줄여줍니다. 한 번 텍스트 사이즈를 9로 줄여보겠습니다.

 

이렇게 완료가 되었습니다.

원본 코드들과 색감이 살짝 다르면은 있습니다.

그러나 최대한 비슷한 편이라서 원본 코드와 매칭이 쉽습니다.

 

삼성노트에 복사 붙여 넣기를 할 때 장점은, 삼성노트 실행시 속도가 빠르다는 겁니다. MS워드보다 로딩속도가 빨라서 신속하게 복사붙여넣기 할 때 좋습니다. 

우리가 메모장 프로그램이 인터페이스가 별로임에도 불구하고 매우 자주 사용하는 이유는 간단하게 프로그램을 켤 수 있기 때문입니다. 삼성노트도 그런 개념이라고 생각하시면 되겠습니다. 약간 메모장보다 더 업그레이드된 메모장 기능이다라고 생각할 수 있겠습니다.

 

4. 맺음말

혹시 잠시 html 코드들을 옮겨 두거나, 아니면 수정 전 코드, 수정 후 코드를 비교하실 때 잠시 옮겨둘 자리가 필요하시다면 이렇게 MS워드나 삼성노트도 메모장 대신 사용할 수가 있습니다.

 

삼성노트가 참 편리한 것 같습니다. 

 

물론 엄청 긴 문장의 초대량 html 소스 코드 같은 경우는 당연히 제대로 복사 붙여넣기 할 다른 공간을 찾아야겠지만, 블로그를 운영하시는 분들은 간단한 코드 수정을 할 때가 많은데, 이 때 빠르고 가독성이 좋게 복사붙여 넣기할 때는 위와 같은 방법을 사용하시면 될 것 같습니다.

 

컴퓨터 잘 모릅니다.

경험하거나 공부한 걸 적어봅니다.

부족한 글 읽어주셔서 감사합니다.

 

IT공부
더보기