6. 웹 개발 - HTML(2) - <b> 태그

저는 대학에서 컴퓨터공학 학위를 공부하고 있는 대학생입니다.
물론 어려운 내용도 배웁니다만, 그걸 어렵게 설명하고 싶진 않습니다.
친구처럼, 젊은 선생님처럼 아주 쉽게 전달하고 싶습니다.
이 카테고리에서는 제가 관심 있어하는 웹 개발에 대해 말해보려고 합니다.

 

 

https://that-is-all.tistory.com/entry/studying-web4

4. 웹 개발 - HTML(1)

위 게시물에서는 제가 컴퓨터에 내장된 '메모장'으로 웹 개발의 기초를 보여드렸습니다.

 

이제부터는 우리 함께 설치된 'Visual Studio Code' 프로그램을 이용해 개발을 해보려고 합니다.

 

제가 전 게시물에서 알려드린 필수프로그램 기억나시죠?

 

https://that-is-all.tistory.com/entry/studying-web3

3. 웹 개발을 위한 프로그램 두 가지

 

시작해 봅시다~!~!

 

1. 공부하면서 엄청난 파일들이 생겨날 텐데, 폴더를 만들어 깨끗하게 정리합시다.

'폴더 열기' 클릭 → 원하는 디렉터리(바탕화면 등)에 폴더 만들기 → '폴더 선택' 클릭

 

 

2. 폴더만 만들면 뭐하겠습니까? 공부할 파일을 만듭시다.

'새 파일' 아이콘 클릭

 

 

3. HTML 공부할 건데 컴퓨터한테 알려줘야겠죠?

파일명.html 형식이어야 합니다.

 

 

4. 저는 Wikipedia의 일부분을 발췌했습니다.

아무 말이나 상관없어요.(백과사전, 블로그, 내 일기 등)

 

https://en.wikipedia.org/wiki/Imagination

Imagination - Wikipedia

[제 글의 출처입니다.]

 

 

5. 그럼 브라우저에 이렇게 나오네요~

아까전에 만든 내 폴더 들어가기 → 파일명.html 실행

 

 

6. 특정 단어, 문구를 <b> 태그(여는 태그)와 </b> 태그(닫는 태그)를 이용해 감싸주세요.

 

 

7. <b> 태그와 </b> 태그로 감싼 단어, 문구가 어떻게 달라졌나요?

 

 

특정 단어, 문구가 굵게(Bold) 처리되었음을 알 수 있습니다.

 

 

<b>~~~</b> : 여는 태그와 닫는 태그 사이의 텍스트를 굵게 하라는 뜻

 

 

※ 주의 : 닫는 태그를 빠뜨리면 어떻게 될까요? 새로 고침해보면 여는 태그 뒤의 텍스트가 전부 굵은 글꼴이 됩니다. 태그가 어디서 끝나는지 브라우저가 모르기 때문입니다. 그래서 여는 태그만 넣으면 닫는 태그를 넣기 전까지의 모든 텍스트가 굵게 변합니다.

 

 

※※※ HTML 파일에는 아직 아무것도 하지 않았습니다. 그냥 텍스트지만 확장자가 HTML이라서 파일을 이렇게 볼 수 있는 겁니다. 이건 아무 데도 올리지 않았습니다. 이 파일에 담긴 컨텐츠는 어떤 웹사이트나 서버에도 공개되지 않습니다. 이 기기에서 저만 볼 수 있습니다. 온라인 콘텐츠가 아니니까요. ※※※