2. Visual Studio를 통해 웹사이트 만들어보기

Visual Studio를 이용해서 나의 첫 웹사이트를 만들어보겠습니다.

 

 

가장 먼저 Visual Studio를 다운받아야 하는데, 아래의 링크를 통해 다운받으면 됩니다!

https://visualstudio.microsoft.com/ko/vs/

Visual Studio 2022 | 무료 다운로드

 

 

---

이제 본격적으로 간단한 웹사이트를 하나 만들어보겠습니다 -

 

 

 

1. 파일 생성 후 저장

 

Visual Studio를 실행시킨 후, File탭에서 New File 또는 Ctrl+N을 눌러 새로운 파일을 하나 열어줍니다.

내용을 입력하기 전에 먼저 파일을 원하는 위치에 원하는 이름.html으로 저장해줍니다.

저는 mywebpage.html이라는 이름으로 저장하였습니다!

 

 

2. <! DOCTYPE html> 적기

 

본격적으로 웹 사이트에 들어갈 내용을 쓰기 전에 가장 먼저 <! DOCTYPE html> 이라고 써줍니다.

<! DOCTYPE> 이라는 태그는 어떤 버전의 html을 사용할지 알려주는 역할로 html 태그는 아닙니다.

<! DOCTYPE>에 그냥 html이라고 써주면 자동으로 가장 최근 버전인 html5로 시작됩니다.

이는 꼭 써줘야하는 부분이기 때문에 잊지 마시고 가장 먼저 쓰고 시작하는 것을 습관화하시는 것이 좋습니다 -

 

 

3. 다양한 태그를 이용해 웹 사이트의 제목과 내용 작성

 

태그를 사용하기 전에 먼저 알아야할 내용은 html의 태그는 시작태그와 종료태그가 있어 태그를 시작하면 꼭 종료 태그를 써줘야 한다는 것입니다.

태그를 쓰는 형식은 <태그> 내용 </태그>로, 시작태그는 <태그>, 종료태그는 </태그>로 씁니다.

ex. <title> 캐발자딩시의 블로그 </title>

위의 사진을 보면서 각 태그가 어떤 것을 의미하는지 하나씩 살펴보겠습니다.

 

<title> = 웹 사이트의 제목을 나타내는 태그입니다. 실제 웹 사이트를 열어보면 Tab에 나타나는 요소입니다.

<h1> = heading1의 약자로 가장 큰 머리말을 나타내는 태그입니다.

<h2> = heading2의 약자로 두 번째로 큰 머리말을 나타내는 태그입니다.

*heading 태그는 6번 (<h6>) 까지 작성이 가능하며, 숫자가 커질수록 웹 사이트에서 더 작은 글자 크기로 나타납니다.

<p> = paragraph의 약자로 좀 긴 글 등의 내용을 나타내는 태그입니다.

 

위 사진에서 사용된 태그들은 이렇게 총 4개로 가장 기본적인 내용들을 나타내는 태그입니다.

 

 

4. 웹 사이트에서 내가 만든 html 파일 열기

 

기본적인 내용을 파일에 모두 적었으면 이제 웹 사이트를 열어보겠습니다.

본인에게 편한 웹 브라우저를 사용해 html 파일을 열어주면 됩니다. 저는 Chrome을 사용했습니다 -

웹 브라우저를 열고 Ctrl+O를 누르면 파일을 여는 창이 생깁니다. 

본인이 저장한 이름의 파일을 찾아 선택하고 열기를 실행시켜주면 됩니다.

어느 브라우저든 상관없이 같은 단축기로 실행이 가능합니다!

 

 

5. 웹 사이트 내용 확인

본인이 Visual Studio에 적은 내용이 그대로 반영이 됐는지 확인합니다.

title 태그의 부분은 브라우저 Tab 부분에 잘 반영이 되었고, h1과 h2는 위계를 가지고 잘 나타났습니다!

p태그 부분의 긴 내용 또한 큰 이상 없이 잘 나타나 있는 것을 확인할 수 있습니다. 

 

 

6. 글자에 스타일 추가하기

 

html 태그에는 글자에 스타일을 추가하는 태그도 있습니다. 

먼저 텍스트를 굵게 만들어보겠습니다. 텍스트를 굵게 만들고 싶을 때에는 bold를 뜻하는 <b> 태그를 사용하면 됩니다.

8번 라인에 &lt;b&gt; 태그 사용

위에 보시면 8번째 줄에 Dingsi를 굵게 표현하고 싶어서 그 양 옆으로 <b> 태그의 시작태그와 종료태그를 추가해주었습니다.

저장 후, 웹 사이트에 어떻게 반영되는지 보겠습니다 - !

Dingsi라는 글자만 굵게 나타나 있는 것을 확인할 수 있습니다!

 

다음으로는 글자를 날려쓰기로 나타내는 태그를 사용해보겠습니다. 글자를 날려쓰고 싶을 때는 italic의 약자인 <i> 태그를 사용하면 됩니다.

8번 라인에 &lt;i&gt; 태그 사용

위 두 개의 이미지를 확인해보면 8번째 줄 html & css 앞 뒤로 <i> 태그를 사용하여 글자를 날려쓰기로 나타낸 것을 볼 수 있습니다.

 

 

 

+   <b> 태그와 <i> 태그 / <strong> 태그와 <em> 태그의 차이점  

 

<b> 태그와 <strong> 태그는 웹 사이트에 시각적으로는 같은 모양으로 나타납니다.

둘 다 텍스트를 굵게 만들어주는 태그인데 둘의 차이점은 무엇일까요?

 

<b> (bold) 태그는 단순히 시각적으로 텍스트를 굵게 만들어주는 태그라면, <strong> 태그는 강조의 의미를 더 가지고 있는 태그입니다. 

<strong> 태그를 사용할 경우, 시각적으로 텍스트가 굵어질 뿐만 아니라 텍스트 자체를 강조하는 의미를 내포하기 때문에

다양한 음성 인식 도구 등에서 억양, 소리의 크기 등을 통해 강조하는 역할을 가지는 태그라고 할 수 있습니다. 

 

<i> 태그와 <em> 태그도 마찬가지로 <i> 태그는 단순히 시각적으로 텍스트를 날려써주는 반면,

<em> (emphasized) 태그는 텍스트 자체를 강조하는 의미를 내포하고 있습니다.

 

 

 

+   웹 사이트에서 한글이 깨지는 경우 해결 방법  

 

 <meta charset = "uft-8"> 이라는 태그를 사용해주면 웹 사이트에서 한글이 깨지는 경우를 해결할 수 있습니다. 

위 사진과 같이 <! DOCTYPE html> 바로 아래 줄에 <meta charset="utf-8"> 태그를 추가해주시면 됩니다.

이때 <meta charset="utf-8"> 태그는 종료태그가 따로 없기 때문에 종료태그를 적어줄 필요가 없습니다.

 

 

 

---

이렇게 간단한 웹 사이트를 만들어보았습니다. 

다음에는 CSS를 통하여 웹 사이트에 다양한 스타일을 입혀보도록 하겠습니다 - !