HTML, CSS 시작시 꼭 필요한 확장프로그램! (비쥬얼스튜디오 확장)

이제 오늘부터 html과 CSS 공부에 들어갔다. 뭔가 시각적인걸 만들기에 재미있을 것 같기도 하고, 추후에 내 티스토리에도 적용을 할 수 있을 것 같아서이다.

 

평소에도 비쥬얼스튜디오코드를 통해 공부를 했기 때문에 이번에도 그냥 비쥬얼스튜디오를 이용하기로 했다. 오늘은 내가 시작전에 알게된 html css를 공부할 때 꼭 필요한 비쥬얼스튜디오코드 확장 프로그램에 대해 알아보겠다.

 

일단 공부 시작하기 전에 먼저 해당 확장프로그램을 설치한 후 공부를 시작하자!

 

---

HTML PREVIEW

 

Html Preview는 간단히 비쥬얼스튜디오 코드에서 미리보기를 제공하는 것이다.

 

보통 우리가 html을 작성을 하면 빈 크롬창을 띄워 실행을 시켜보는 것이 보통 일반적인 방법일 것이다. 하지만 이런 경우 수정을 할 때마다 계속해서 저장을 하고 크롬에서 새로고침을 해야되서 굉장히 불편하다. 이를 보완해주는 것이 바로 이 html preview 확장 프로그램이다.

 

설치는 아래와 같이 할 수 있다.

 

 

비쥬얼 스튜디오 코드 왼쪽 탭에서 맨 아래를 클릭, 검색에 html preview 검색, 해당을 설치해주면 된다.

설치를 하고 나서 아래를 보자.

 

 

이렇게 body문을 작성을 한 후 오른쪽 상단에 아이콘을 클릭해주면 된다. 

 

 

그러면 위와 같이 왼쪽에 창이 한개 더 생기면서, 바로 미리보기를 보여준다. 왼쪽 코드를 수정을 하면 계속 실시간으로 반영이 되니 처음 공부할 때는 정말 편하고 유용할 것 같다.

 

Lorem Ipsum

 

로렘 입숨은 쉽게 말해 텍스트 채우기라고 생각해주면 된다. 무슨 말이냐면 우리는 공부를 하기 때문에 현재로선 컨텐츠와 같은 것들은 생각을 안해도 된다. 즉, 어떤 코드를 배웠을 때 그 코드가 어떤 시각적인 요소를 반영하냐만 알면 되는데 이 때에 텍스트를 아무말이나 채워주는 것이다.

 

설치는 똑같이 아래와 같이 해주면 된다.

 

 

그럼 사용법에 대해 알아보자. 아래와 같이 코드를 작성해 보았다.

 

h1, h2, h3은 각각의 폰트 크기가 달라지게 나올 것이다. 근데 이 h1 사이에 글을 적어야 하는데 아무글이나 적자니 뭘 적어야 할지도 모르겠고, 생각을 하기도 귀찮다. 나는 그냥 아무 글이나 써서 h1과 h2 사이에 어떠한 차이가 있는지만 보고 싶은 것이다.

 

이럴 때 이 로렘입숨을 사용하게 되는데, 내가 원하는 곳에 클릭을 해서 커서를 갖다 둔다음 키보드 F1 을 누른 다음 검색창에 Lorem Ipsum 을 입력한다.

 

 

위와 같이 나올 것인데, 여기서 한줄만 원하면 첫번째 Insert a line 을 누르고, 여러 단락을 원하면 Insert multiple paragraphs를 눌러주면 된다. 원하는 곳으로 키보드방향키로 이동한 후 엔터를 누르면 아래와 같이 아무말인나 적히게 된다.

 

 

동일하게, h2와 h3에도 로렘입숨을 입력해주면 위의 html preview와 같이 간단하게 시각적으로 어떻게 반영되는지를 볼 수 있게 된다.

 

---

오늘은 간단히 html과 css 공부 전 꼭 설치해야 하는 비쥬얼스튜디오 코드 확장프로그램에 대해 알아보았다. 이제 앞으로 html과 css관련 공부한 내용도 천천히 포스팅을 할 것이다.