끈기의 힘 : 뉴비에서 풀스텍으로

[생활코딩/WEB1] 기록 ~ 1-9 본문

프로그래밍 언어/HTML 공부

[생활코딩/WEB1] 기록 ~ 1-9

쓰리별 2021. 2. 17. 20:27

  생활코딩 선생님의 WEB1 무료 강좌를 다 들은지 근 2주가 지났다. 취업이란 불안감에 휩싸여 있었지만, 서둘러봐야 좋을 것 없다고 생각하며 바로 WEB2 과정에 들어가지 않고 선생님 말씀대로 스스로 더 공부하다 막히면 다시 돌아오라는 과정을 선택했다. 정말 사이트를 내가 원하는 대로 바꾸는 과정에서 수없이 막혔지만 최대한 스스로 공부하고자 노력해보았다. 그런데, 매우 큰 오류가 있었다. 나는 취준생이었던 것이다.. 그래서 얼릉 돌아왔다..

 

  ★ HTML의 각종 태그들에 대해서 공부 겸 올리겠지만, 어디까지나 선생님 말씀대로 공부는 직접 코드를 적용하면서 어떤 변화가 있는지 만들어보는 게 핵심이라는 것을 잊지 말자!! ( + 통계에 의한 학습 : www.advancedwebranking.com/html/ 참조 + 직접 모르는 건 찾아보기)

 

---

※ 생활코딩 선생님을 따라 에디터는 'Atom(아톰)'을 사용중이다.

그래서 대략적으로 HTML 마크업 언어로 웹사이트를 만드는 방법은 먼저 아톰을 통해 .html로 끝나는 즉, html 확장자 이름으로 새로운 파일을 만들어 준다. 태그를 떠나 일단 기본적인 약속에 대해서 알아보자!

(이 부분에 대해 선생님은 모르면 '마법'이라고 생각하라고 하셨다. 맞다! 아래에 쓸 내용들은 매직이다.)

아래는 내가 만든 웹사이트의 일부를 따왔다.

 

<!doctype html> ### 약속이라고 한다. 왜인지는 모른다. 그저 마법이니까
<html>
  <head>
    <title> 가치 있는 사람 </title> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

 

<html> 코드 안에는 <head>와 <body> 태그가 살고 있으며, <head> 태그에 들어있는 <title>이나 <meta>의 경우, 직접적으로 웹페이지에 보여지는 아가들이 아니다. ### <title> 태그 안에 원하는 문구를 적으면 웹브라우저 웹사이트 맨 좌측 상단에 본인이 적은 문구가 쓰여있게 되는 '마~법'

 

(meta 태그는 닫는 태그가 보다시피 읎다. 속성인 charset은 '캐릭터'다. 즉, utf-8이란 것으로 웹페이지를 읽겠다! 라는? 것 같은데 이것 또한 현재의 나에겐 마법 그 자체이다. (난 0.01 서클 마법사라서 뭔 소린지 모르겠다. 다만, 최소의 정보 처리 단위가 비트라는 것은 안다. 8비트가 1바이트라는 정도만..안다. 생활코딩과 포프, 엘리, 니콜라스(노마드), 빵형, 이상한 나라, 남궁성, 박재성 등 그외 수많은 대마법사가 아닌 이상 진짜 모르지 않을까? 아니..난 알고 싶다. 근데 중요한 건 지금 이게 아니니까 정신차리고 HTML, CSS 박살내고 JS나 깊게 파러 가자. 화이팅)

 

<body>

  ~~

  ~~~

  ~~~~

</body> 

 

★ <body> 태그 안에 있는 수많은 아이가 웹브라우저에 표시된다라고 생각하면 된다. 왜인지 작동방법은 당연히 모른다. 먼 옛날 대마법사 연합회인 'CERN'에서 탄생했으니까 살아계시는 대마법사들에게 물어보자. (영어가 된다면 ^_^)

 

</html>로 닫아주면 끝난다.

 

☆ <!-- 내용 --> : HTML에서의 주석다는 법

 

● WEB 1-6

<strong>___</strong> :  글씨를 굵게 표시해준다.

<u> ___ </u> : Underline으로 밑줄을 표시해준다.

 

● WEB 1-7

<h1~6>__</h1~6> : 숫자가 커질수록 글씨가 작아지게 표현, 일반적인 텍스트보다 굵게 표현, 자동적으로 단락화 표현

 

● WEB 1-9 : 줄바꿈 (br 태그 / p 태그)

<br> : 단순히 줄바꿈만 표현. 여러번 쓸수록 단락으로 나뉘어지지만, 그럴 필요 없이 br 태그 다음 끊어주고 싶은 부분에 <p></p>태그를 활용하면 된다. 그리고 <br>은 닫는 태그가 X

 

<p>__</p> : Paragraph로 단락을 표현해준다. <p>태그를 사용하지 않으면 학창시절 '깜지'가 완성된다고 보면 된다.

 

※ 두 아이의 차이점은 <p></p> 태그는 <br>에 비해 시각적 자유도가 떨어진다. 그렇지만, 이를 위해!! CSS 언어가 있으니, 포기하지 말고 공부해라 이늠아. (아직 배울 단계는 아니지만, 예시를 들자면 이렇다.

 

  <p style="margin-top:45px;"> margin은 여백을 위쪽에-top:45픽셀만큼)

저작자표시 (새창열림)

'프로그래밍 언어 > HTML 공부' 카테고리의 다른 글

[생활코딩/2015 HTML 수업 : WEB1 아님! 혼동 주의!] Form 배우기. 입력 양식? 텍스트 입력?  (0) 2021.02.22
[인프런/생활코딩_HTML 기초] 표 만들기? 폼 만들기?  (0) 2021.02.21
[인프런/생활코딩_HTML 기초] 웹? iframe 태그? 이스케이핑?  (0) 2021.02.21
[생활코딩/WEB1] 기록 ~ 1-17  (0) 2021.02.18
[생활코딩/WEB1] 기록 ~ 1-12  (0) 2021.02.17
'프로그래밍 언어/HTML 공부' Related Articles more
Comments