Section 3. HTML 기초(1)

이번 섹션에 포함된 강의명은 다음과 같다.

^{(강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!)}

순서	강의명	소요 시간	중요도 (필수crucial/중요important/선택nice to have)
01	HTML 개요 Introduction to HTML	6' 55"	-
02	우리의 첫 HTML 페이지 Our Very First HTML Page	5' 33"	-
03	팁: 모질라 개발자 네트워크 Tip: Mozilla Developer Network	2' 41"	중요 (but 필수는 ×)
04	단락 요소 Paragraph Elements	3' 14"	필수
05	제목 요소 Headings Elements	5' 36"	필수
06	코딩 연습 1: Pangolin Practice Coding Practice 1: Pangolin Practice	-	-
07	Chrome 인스펙터 개요 Introduction to the Chrome Inspector	3' 07"	중요 (but 필수는 ×)
08	HTML 상용구 HTML Boilerplate	7' 25:	필수(난이도 高)
09	VSCode 팁: 자동 포맷 VSCode Tip: Auto-format	2' 37"	선택
10	목록 요소 List Elements	6' 39"	필수
11	코딩 연습 2: Favorite Movies Exercises Coding Practice 2: Favorite Movies Exercises	-	-
12	앵커 태그 Anchor Tags	7' 07"	필수
13	이미지 Images	6' 26"	필수
14	주석 Comments	2' 31"	-
15	코딩 연습 3: Wolf Images & Links Exercise Coding Practice 3: Wolf Images & Links Exercise	-	-

 

01. HTML 개요

     HTML은 콘텐츠의 구조를 규정하는 즉, 페이지에 무엇이 있는지 나타내는 것!

          ex, 이건 버튼이다, 이건 form이다, 이건 link다.. 등등

 

     HTML은 완전한 프로그래밍 언어가 아니다. 프로그램의 복잡한 논리 같은 것도 전혀 필요 ×.

 

     HTML은 웹 페이지라는 문서에 *마크업을 하기 위한 언어 또는 구문이다.

                ^{* 마크업(markup): 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지.}

                                             ^{태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나,}

                                             ^{용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 됨.}

 

     HTML의 진정한 목적은 웹 브라우저에 굵은 글씨, 이탤릭체 등이 들어갈 곳을 "지시"하는 것이다.

          "이 부분은 굵은 글씨로 표현해줘.", "이 부분은 링크로 만들어줘", "이 부분은 단락 처리해 줘." 등등

 

     보통의 HTML문서는 양 옆에 태그가 적힌 '요소_element'로 구성된다.

 

     요소는

     <p>I am a paragraph.</p>  와 같이 구성된다.

^{Opening Tag, 열린 태그                    Closing Tag, 닫힌 태그}

 

 

 

 

 

02. 우리의 첫 HTML 페이지

     VSCode로 새로운 HTML 문서를 만들 때, 제일 처음 파일 저장부터 하고 시작!
     파일을 저장할 때에는, .html 확장자가 중요한데 그 이유는

     1. 이 파일이 HTML 파일이라는 것을 VSCode에 알려야, VSCode가 이 문서를 HTML 파일임을 인식한다.

         그래야 구문을 다른 색으로 강조해 주는 효과가 나타난다.

     2. 브라우저가 이 파일을 HTML 파일로 인식해서, 이 파일을 열 때 HTML로 실행되게끔 해 준다.

 

     만약에 여는 태그만 작성하고 닫는 태그를 작성하지 않게 되면,

     VSCode는 어디까지 그 지시를 수행해야 하는지 몰라 열린태그 이후의 모든 텍스트에 해당 지시를 수행하게 된다.

 

03. 팁: 모질라 개발자 네트워크

     모질라 개발자 네트워크(Mozilla Developer Network, MDN)에는 기본적인 자료들뿐만 아니라

     웹 기술에 대한 자료가 엄청 많다.

     개발자가 개발자를 위해 만든 사이트로, HTML, CSS, Javascript, 브라우저의 Wikipedia인 셈!

     HTML 규칙에 대한 설명도 풍부하게 나와 있다.

 

     MDN 홈페이지 위쪽 메뉴 Reference > HTML을 누른 뒤 스크롤을 중간에서 약간 아래 지점까지 내리면

     Reference > HTML reference가 있다.

     이걸 눌러 들어가 첫 번째에 있는 HTML element reference를 클릭하면

     HTML 문서에서 쓸 수 있는 모든 tag가 정리되어 있다.

     각각의 tag를 클릭하면 상세 설명 또한 확인할 수 있다.

 

     Google에 원하는 검색어(가령, HTML form mdn)를 검색해서

     tag에 대한 상세설명 페이지를 바로 찾아 들어오는 방법도 있다.

 

 

 

 

 

04. 단락 요소 = <p> tag

     paragraph(단락)를 의미.

     하지만 HTML에서는 '텍스트' 단락만을 의미하는 것은 아니고,

     단락처럼 묶고 싶은 내용이라면 어떤 것이든 <p> tag로 묶을 수 있다.     ex, <img> tag, <input> tag, <label> tag 등.

 

05. 제목 요소 = <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tag

     <h1> tag는 보통 페이지의 최상위 제목을 뜻한다.

     이에 대한 하위 항목으로 <h2>, <h3> ... 를 사용하면 된다.

     h 옆의 숫자가 클수록 글씨 크기는 작아진다.

 

     <hn> tag로는 글자의 크기를 조절하는 데 쓰면 안 된다. 정해진 크기가 있다.

 

     BUT 이 크기는 절대적인 것은 아니고 CSS를 통해서 조절할 수 있어서,

     <h1>을 아주 작게, <h6>을 아주 크게 만들 수도 있다.

     (가능하긴 하지만 좋은 방법은 아니라 비추)

 

     한 페이지에는 단 1개의 <h1> tag 있어야 하며, 항상 최상위 제목이 되어야 한다.

     이것은 한 페이지에 최상위 주제가 두 가지 이상일 수 없기 때문이다.

 

     <h2>와 <h1> 없이는 <h3>가 존재할 수 없다. 무조건 상위의 제목이 위에 있어야 한다.

     그것이 <hn> tag를 올바르게 사용하는 방법이다.

 

 

 

 

 

06. 코딩 연습 1: Pangolin Practice

<h1>Pangolin Practice</h1>
   <p>Let's get a little bit of practice with <b>heading and paragraph elements.</b> 
      In the index.html file, you'll find some starter text. 
      Please add in the appropriate paragraph and heading elements to recreate what is shown in this image:
   </p>
   <h2>Pangolin</h2>
      <h3>Intro</h3>
         <p>Pangolins, sometimes known as scaly anteaters, are mammals of the order Pholidota (from Ancient Greek φολῐ́ς, "horny scale"). 
            The one extant family, Manidae, has three genera: Manis, Phataginus and Smutsia. Manis comprises the four species found in Asia, 
            while Phataginus and Smutsia include two species each, all found in Sub-Saharan Africa. 
            These species range in size from 30 to 100 cm (12 to 39 in). A number of extinct pangolin species are also known.
         </p>
      <h3>Description</h3>
         <p>Pangolins have large, protective keratin scales covering their skin; they are the only known mammals with this feature. 
            They live in hollow trees or burrows, depending on the species. Pangolins are nocturnal, and their diet consists of mainly ants and termites, 
            which they capture using their long tongues. They tend to be solitary animals, meeting only to mate and produce a litter of one to three offspring, which they raise for about two years.</p>
      <h3>Poaching</h3>
         <p>Pangolins are threatened by poaching (for their meat and scales, which are used in Chinese traditional medicine)
            and heavy deforestation of their natural habitats, and are the most trafficked mammals in the world.As of January 2020, of the eight species of pangolin,
            three (Manis culionensis, M. pentadactyla and M. javanica) are listed as critically endangered, three (Phataginus tricuspis, Manis crassicaudata and Smutsia gigantea)
            are listed as endangered and two (Phataginus tetradactyla and Smutsia temminckii) are listed as vulnerable on the Red List of Threatened Species of the International Union
            for Conservation of Nature.
         </p>

↓