스마트폰 등 IT기기의 수요가 증가하는 만큼 웹코딩에 대한 관심도 지속적으로 증가하고 있습니다.
저 또한 최근 웹코딩을 배우고 있는 입문자로써 함께 질문하고 이야기 나누고자 웹코딩에 대한 글을 올리려합니다.
오늘은 웹코딩에 있어 사용하는 프로그램 중 Visual Studio Code를 소개하고자합니다.
비주얼 스튜디오 코드는 마이크로소프트웨어사에서 만든 웹개발을 위한 소스 코드 편집기로 다양한 기능을 제공하고 있어 편하게 코딩 작업이 가능합니다. 비주얼 스튜디오 코드는 구글에서 검색하여 설치하시면 됩니다.
먼저 Visual Studio를 열었을 때, [새 파일]을 누릅니다.
html을 작성하고 나오는 서브 창에서 [html:5]를 선택합니다.
[html:5]를 선택하시면 html 기본구조가 바로 작성됩니다.
[html:5]를 선택하시면 html 기본구조가 바로 작성됩니다. 작성된 기본구조는 어떤 기능을 가지고 있는 것일까요?
한국어로 바꾸고 싶으실 때는 <html lang=en>를 <html lang=ko>로 바꾸시면 됩니다.
브라우저에 나타날 내용은 <body></body>안쪽에 작성하면 됩니다.
body안쪽에 작성한 내용을 꾸며주기 위해서는 <head></head> 안쪽에 <style></style> 태그를 작성하여 style 안쪽에 작성하면 됩니다. 간단히 h1태그를 이용해서 작성해보면,,
body 안쪽에 h1태그로 "비주얼스튜디오 사용법"라는 글을 작성하였을때 웹브라우저 상에서는 검정색의 글자만 나타나는 것을 볼 수 있습니다. h1태그를 꾸며주기 위해서는 head 안쪽에 style에서 작성하면 됩니다.
style 안쪽에 h1{ }를 작성하여 { }안쪽에 원하는 기능을 작성 후 웹브라우저에서 새로고침하면 바뀐 내용이 나타납니다.
태그와 코드는 아주 많지만 비주얼 스튜디오 코드를 포함한 다른 편집기에서는 태그 몇자만 입력하면 사용 가능한 태그들이 목록으로 나타나기 때문에 겁먹지 않으셔도 됩니다.
다음 글은 선택자에 대해 알아보도록 하겠습니다.
'일상 > IT' 카테고리의 다른 글
| 웹디자인기능사]필기 일주일 공부 후 합격!! (0) | 2021.09.07 |
|---|---|
| 웹퍼블리셔-입문]CSS 선택자 (0) | 2021.09.07 |
| 구글서치콘솔]색인이 생성되었으나 robots.txt에 의해 차단됨 (0) | 2021.09.05 |
| 구글서치콘솔]발견됨 - 현재 색인이 생성되지 않음 (0) | 2021.09.05 |
| PC에서 PDF, 사진, 이미지 파일의 글자 추출하기 (0) | 2021.08.13 |
댓글