vscode에 사용되는 텍스트관련 태그정리

vscode 대표이미지

vscode

vscode는 비주얼 스튜디오 코드의 약자입니다. 앞으로 웹문서를 만들기 위해서는 vscode를 많이 이용할 텐데 텍스트를 입력하면서 사용하는 텍스트 관련 태그들을 몇 가지 적어보려 합니다. 저 또한 현재는 배워가는 단계이기 때문에 이번 포스팅에는 vscode에 많이 사용하면서도 기초적인 태그들 위주로 소개가 진행될 예정이지만 , 초보분들에게는 매우 유용한 텍스트 태그들이라 생각합니다. 소개하려는 순서는 h, p, br, b, mark 총 4가지이며 , 앞으로 계속 추가해보도록 하겠습니다. 정리하면 아래와 같습니다.

 

1. 웹문서임을 알림

2. 한국어 문서

3. 문자 인코딩

4. h,p,br 태그사용

5.b,mark 태그사용

doctype 적용

1. 웹문서 알림

가장 먼서 모든 입력을 하기 전에 , 해당 문서가 웹문서임을 알려야 합니다. 그렇기 위해 vscode를 사용할 때에는 가장 먼저 doctype를 입력해야 하고 철자만 조금 입력해주면 vscode내에서 자동으로 입력됩니다.

 

웹문서 시작

2. 웹문서 시작

다음으로 해주어 하는 부분은 파일이 한국어로 구성되어 있는 문서임을 알리는 작업입니다. doctype입력 이후에는 html태그만을 사용하여 head와 body부분을 채워줘도 문제가 되는 부분은 없지만 , 개인적으로 한국어로 된 문서 위주의 검색 반영에 용이할 것 같기에 저는 앞으로도 계속 한국어를 나타내는 "ko"를 함께 입력해 줄 예정입니다.

 

인코딩

3. 문자인코딩

다음은 인코딩입니다. 4번에 해당되는 내용으로 meta charset을 입력한 뒤에는 뒤에는 동일하게 적어주면 됩니다. 대략적으로 우리가 사용하는 언어들을 PC가 받아들이고 이해하게 하기 위함이라고 생각하면 됩니다. 즉 텍스트 관련 태그를 포함하여 특정 언어들로 이루어져 있는 문서를 시스템을 통해 사용하겠다는 의미라고도 할 수 있는데 , 유니코드 포인트를 8비트 숫자들의 조합으로 나타내는 것이 "uft-8"이며, 일반적으로도 많이 사용되는 인코딩 언어입니다.

 

왼쪽 : 태그입력 , 오른쪽 : 결과

4. h, p, br, b, mark

vscode에 사용하는 텍스트 관련 첫 번째로는 h, p, br입니다. 위에 이미지를 통해서 추가로 설명을 더 집어넣어보았는데, 먼저 h의 경우에는 제목과 소제목들을 구분할 때 사용합니다. 숫자가 1로 갈수록 폰트를 크게 표시하기 때문에 제목을 작성할 때 사용되면 2,3 점점 커질수록 폰트가 점점 작아지는 것을 오른쪽 사진을 통해 확인할 수 있습니다.

 

다음으로 p의 경우에는 문서의 본문 텍스트 작성 시 사용됩니다. 이때 함께 br을 사용하면 되는데 br의 경우에는 흔히 컴퓨터를 통해 타이핑 작업을 할 때 "엔터와 같은" 기능으로써 문장의 줄을 바꿔주는 기능입니다. 3가지는 모두가 문서의 body 부분에 작성하는 태그이면 , 입력하실 때에는 소문자로 작성해주시면 됩니다.

 

h,br입력

h,br입력결과

마지막으로 추가한 것이 b와 mark인데 , b의 경우에는 내용 중에서 강조하고 싶은 폰트 앞에 입력을 해주면 됩니다. 결과 사진을 보면 해당 태그 사이에 있는 폰트가 기본적인 폰트에 비해 좀 더 진한 느낌으로 표시되어 있는 것을 확인할 수 있습니다. 마지막으로 mark의 경우는 바로 글씨에 배경색을 입히는 것입니다. 결과 사진으로 보았을 때 글씨 주변에 노란색으로 칠해져 있는 것들이 mark태그의 기능이라고 볼 수 있습니다. 

 

이것으로 vscode에 사용하는 텍스트 관련 태그 5가지를 기록해 보았습니다. 문서를 작성하면서 제목, 본문, 강조, 줄 바꿈과 좀 더 눈에 띄기 위한 효과들인지라 앞으로도 다양하면서도 자주 사용되는 기능들이 아닐까 싶네요. 차후에도 오늘 소개해드린 것들처럼 사용되는 여러 기능들에 대해서 추가하면 기록해 나가 보도록 하겠습니다.