비전공자의 HTML 독학하기 feat. 생활코딩 - 기본문법 태그

코로나로 인해 단축+재택근무 콤보를 맞아 시간이 많아지며 여러가지를 시도하고 있어요. 

 

방치해 두었던 블로그에도 글을 더 쓰려고 하고, 프랑스어 공부를 다시 시작했으며, 요리도 해보고 있고,

무엇보다도 '프로그래밍'에 관심을 가지게 되어 이쪽으로도 공부를 하고 있습니다. 

 

원래는 인강으로 C#부터 수박 겉핥기 식으로 해보다가, 너무 어려워서 잠시 내려놓고(?) 기본중의 기본인 HTML/CSS부터 공부해보려고 합니다. 

 

또한 내일배움카드로 HTML/CSS를 들을 수 있는 강의가 있어서 방향을 바꾸어 보았습니다ㅋㅋ

하지만 C#은 여전히 내맘속 별로!

 

어쨌든, 국비지원으로 현강을 듣기 전에 생활코딩에서 무료로 들을 수 있는 HTML 강의 들을 것을 제 블로그에 한번 더 포스팅하며 복습의 효과를 극대화 하려 합니다.

---

WEB1 - HTML & Internet - 기본문법 태그

HTML 에디터를 다운 받고, 기본 문법 태그까지 학습했습니다. 

 

생활코딩 선생님이 Atom 이라는 에디터를 사용하실래 그대로 받았어요. 

그리고 구글에 best html editor 2020 라고 검색하면 아톰이 제일 위에 나오더라구요ㅋㅋㅋ

https://atom.io/

A hackable text editor for the 21st Century

링크를 타고 들어가서 다운로드를 클릭해 다운받아 줍니다. 

 

 

다운받고 실행시키면 이렇게 창이 나오는데 위의 Welcome, Welcome Guide 등은 필요 없으니 닫아주세요. 

 

 

그리고 바탕화면에 저는 Web이라고 폴더를 하나 만들었어요. 

이제 html 코딩한 것을 이 폴더에 저장하려고 합니다. 

 

폴더를 불러온 후, html 파일을 생성해주세요. 

파일명.html 이라고 만들면 됩니다 (.html은 확장자에요)

 

 

저는 파일명을 1로만 해서 만들었어요. 폴더 안에 HTML 문서로 생성된 것 보이지요? 

 

 

그럼 이제 모든 코딩의 첫 시작으로 hello web! 을 아톰에 적어주고 저장해준 후에, 

1.html 파일을 웹 브라우저에서 열어보세요. 신기하쥬?ㅋㅋㅋ

 

제가 처음 배운 html 태그 두 가지는 글자 굵게 표시하는 <strong></strong> 태그랑 밑줄선을 그어주는 <u>/<u> 태그입니다. 

 

밑줄선 Underline의 약자라 <u> 태그라고 보시면 됩니다. 

 

 

티스토리에 글을 쓰는 지금, html 모드로 전환해서 <strong>태그로 볼드처리를 하니 <b></b>라고 되어있더라구요?

동일한 기능을 하는 태그인것 같습니다;; 

 

사운드오브 뮤직 가사로 예제를 만들어보고 오늘은 여기까지 했습니다ㅋㅋ

 

 

C# 끙끙거리면서 하다가 html하니 넘나 편하고 간단한것...?