HTML 기초 학습

학습 방향

1. 사전학습 가이드를 학습하면서 동시에 노션에 자료를 필기하듯이 작성한다.

2. 학습중 실습을 할 경우 vscode에 코드 작업을 한다.

3. 배운 부분이 어떻게 실제로 쓰이는지 poiemanweb 내에 있는 예시를 통해 확인하고 내 코드와 비교한다.

4. 노션 내용을 정리해서 블로그에 적는다.

 

poiemaweb HTML 강의

 

1강-프론트엔드 개발자 학습 방향

  프론트엔드는 서비스 이용자와 백엔드의 징검다리 역할을 수행한다.

  프론트엔드 개발자 학습 방향: 실력 향상에 지름길은 없다. 견딜 수 있을 만큼의 도전이 의식적으로 반복될 수록 점차 실력은 향상될 것이다.

 

2강-html 기본 문법

  웹페이지는 HTML-CSS-JS 로 이루어지고 이중 HTML은 웹페이지의 내용(context)과 구조(structure)를 담당한다. 뼈대라고 이해하고 있다. 

  보기 좋은 코드는 읽기 쉽고, 읽기 쉬운 코드가 좋은 코드다.

 

  요소(Element)와 어트리뷰트(Attribute)의 기본 구조

<img src = "html.png">

  요소: img 

  어트리뷰트 명: src

  어트리뷰트 값: html.png

 

3강-시멘틱 요소와 검색 엔진

  메타데이터로 의미와 관련성을 가지는 데이터베이스를 구축하고 검색엔진의 로봇은 크롤링 할때 이러한 시멘틱(의미,관련성) 요소를 인덱싱한다.

예) header, nav, aside, seciton, article, footer

 

4강-태그

  head: 메타데이터를 포함하기 위한 요소이며 화면에 표시되지 않는다.

  title: 브라우저의 탭에 표시되는 문서의 제목이다.

  style: html 문서를 위한 style 정보를 정의한다.

  link: 외부 리소스와의 연계 정보를 정의하며 주로 html과 외부 css파일 연계에 사용된다.

  script: 자바스크립트를 정의하며 src로 외부 자바스크립트 파일을 로드할 수 있다.

  meta: description, keywords, author 등 기타 메타데이터 정의에 사용되며 브라우저,검색엔진 등에 의해 사용된다.

  body: 문서의 내용을 나타내며 웹페이지에 단 하나 존재한다.

 

5강-텍스트 관련 태그

   제목(Headings) 태그

  - H1~H6까지 있고 시맨틱 요소라서 제목을 할 만큼 중요한 곳에 사용하는게 좋다.

 

  b태그와 strong태그 차이

  - 브라우저상 표기는 같지만 시멘틱 의미에 차이가 strong에는 있지만 b에는 없다.

<b>contents</b>
<strong>contents</strong>

  p 태그

 - 단락을 지정한다.

 

  br 태그

 - <br>을 적으면 줄바꿈이 일어난다. 종료 태그가 없다.

 

  공백 삽입 방법

  - html에는 스페이스,엔터가 몇번이든 상관없이 1개의 공백으로 표시한다.

  - 연속된 공백을 삽입하기 위해서는 &nbsp;를 삽입한다.

<h1>This is&nbsp; a h1</h1> 

  - html에 적은 그대로 브라우저에 표시하고 싶으면 pre 태그 내에 작성한다.

 

6강-하이퍼링크 

  하이퍼링크의 기본 구조

<a href="http://www.google.com">Visit google.com!</a>

 

디렉터리

  작업 디렉터리: 작업 중인 파일이 위치한 디렉터리

  - ./ 

  부모 디렉터리: 작업 디렉터리의 부모 디렉터리

  - ../

 

  파일 절대경로: 특정 파일의 절대적인 위치

  - /Users/username/Desktop/image1.jpg

 

  파일 상대경로: 현재 작업 중인 디렉터리를 기준으로 한 상대적인 위치

  - ./index.html

  - ../../dist/index.js

 

  fragment identifier: 홈페이지에서 자주 보는 'top으로 가기 버튼'을 만들 때 쓰인다.

<h2 id="top">Top of page!</h2>

<a href="#top">Go to top</a>

  target: 현재 윈도우에서 열 것인지 새창,새탭에서 열 것인지 선택 

<a href="http://www.naver.com" target="_blank">Visit naver.com!</a>

 

7강-리스트

  Unordered List: 앞에 점이 찍혀서 표시됨

  Ordered List: 순서가 있는 리스트, 순서 문자 변경 가능

<ul>
    <li>Coffee</li>
    <li>machine</li>
    <li>is expensive</li>
</ul>

<ol>
    <li>milk</li>
    <li>coffee</li>
    <li>isgood</li>
</ol>

 

8강-이미지와 멀티미디어

  image(이미지)

  - src: 이미지 파일 경로

  - alt: 이미지 파일이 없을 경우 표시되는 문장

  

  audio(오디오)

  - src: 음악 파일 경로 설정

  - preload: 재생 전 음악을 모두 불러올지 결정

  - autoplay: 자동 재생할지 결정

  - loop: 반복할지 결정

  - controls: 재생 도구 표시할지 결정

<audio src="assets/audio/Kalimba.mp3" controls></audio>

  video(비디오): audio 어트리뷰트를 가진다.

  - poster: 동영상 준비 중에 표시될 이미지 파일 경로

 

9강-폼(form)

  form

  - 사용자와의 소통을 위한 태그, 사용자가 입력한 데이터를 수집하기 위해 사용된다.

  - 같이 내부에서 사용되는 입력 양식 태그들

      - input, textarea, button, select, checkbox, radio button, submit button

  - action: 입력 데이터가 전송될 URL 지정

  - method(get or post): 입력 데이터를 어떤 방식으로 보낼지 지정 

 

    get: 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식

    예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1 

    특징: 전송 데이터가 모두 노출되서 보안 문제, 최대 255자까지 가능한 데이터 한계

 

   post: Request Body에 담아 보내는 방식

   예) http://jsonplaceholder.typicode.com/posts 

   특징: 전송 데이터가 모두 노출되지 않지만 get에 비해 속도가 느리다.

 

10강-구조(structure)

  non-semantic 공간 분할 태그: div,span,table

  semantic 공간 분할 태그: header,nav,aside,section,article,footer