(D-30) Prep Self Study Day 1: HTML 1-5

Boot Camp/Coding_Prep 2021. 2. 2. 15:36

강의 노트 겸 해서 만들어본다.

강의 내용은 poiemaweb.com 에서 들을 수 있다.

@ 오늘의 목표 진도

- HTML Section 1 ~ 5

HTML Section 1 : Front-end Developer

poiemaweb.com/Front-end

업무
- User & Application's communicatioins -> User Interface.
- 상태 정보를 서버로 전송 & 서버의 데이터를 가져와서 표시
- Design <-> Front End <-> Backend
기술: 배울 것 많음.(만만X)
- HTML, CSS, Javascript, HTTP, Git, SPA(Angular, React, Vue.js), Typescript, TDD(Test Driven Development)..
- HTML -> CSS -> Javascript
초심자의 어려움 3
- 뭔 말인지 모르겠다... 나는 누구? 여긴 어디?
  - Key: 배경지식 ( 기본CS 지식 + 용어 + 기본 상식)
- 뭘 해야할지 모르겠다... 어떻게 만들어요?
  - Key: 문제 해결 능력 (Computational thinking + Algorithm + Data structure + Experience)
  - 문제가 뭔가? 문제 쪼개기 -> 자료 정리 및 구분(modeling) -> 순서대로 챡챡
- 어떻게 코딩해야할지 모르겠다...
  - Key: 문법 이해 & 연습
언제나 그렇듯이 왕도는 없음... only 의식적인 연습....!
- Know yourself: What you know, what you don't know?
- 120% input -> 100% output
- 시도하고 실패하는 의식적인 연습을 반복한다.
- 목표의 구체화, 쪼개기 -> 작고 귀여운 성취의 반복
- 피드백에 겸손하고 적극적으로 반응하여 행동을 교정하라.
마음가짐
- 서둘지 마라. 이제 출발선에 선 것이다. 성과를 내기엔 이르다.
- 기록 & 수정
- 기본기가 중요하다. 당신은 프로이다.
- 지지자 불여호지자 호지자 불여락지자

HTML Section 2 : HTML5 Introduction & Syntax

poiemaweb.com/html5-syntax

HTML(HyperText Markup Language) is a markup language: Content & Structure.
- CSS: Style Sheet Language for Presentation
- JS: Programming Language for Behavior
HTML5 document type set up : <!DOCTYPE html>
<head> ~ </head> : document title, 외부파일 참조, 메타데이터의 설정 등이 위치. 브라우저에 표시 X.
<body> ~ </body> : 웹브라우저에 출력되는 모든 요소 위치.
<h1> ~ </h1> : header
<p> ~ </p> : 본문
Tag name : small letters
Empty Element or Self-Closing element
- Content 가 없으며 only attribute.
- <meta charset="utf-8">
- br, hr, img, imput, link, meta...
Attribute
- 요소의 성질, 특징을 정의한다. 요소의 추가정보(이미지 파일의 경로, 크기 등) 이 어트리뷰트에 나온다.
- 시작 태그에 위치해야하며 이름과 값의 쌍을 이룬다.
- <img src = "html.png" width="104" height="142">
- <img Attribute Name = "Attribute value">
Global Attribute
- 모든 HTML 요소가 공통으로 사용할 수 있다 (예외 있을수도..?).
- <html lang="ko">

Attribute	Description
id	식별자(id) 요소에 지정. 중복X
class	스타일시트에 정의된 class 요소에 지정. 중복O
hidden	브라우저 노출 X. css의 hidden과는 다름.
lang	요소의 언어 지정. 검색엔진 크롤링 시 언어 인식 가능.
style	요소에 인라인 스타일을 지정한다.
tabindex	tab order
title	title

@2019 Ung-mo Lee

HTML Section 3, 4 : Semantic Web & Tags

poiemaweb.com/html5-tag-basic

poiemaweb.com/html5-semantic-web

Search Engine Optimization <- Web crawlers' algorithm
- Crawler가 만드는 index(예상 검색 키워드)는 웹사이트의 HTML에서 온다.
- 웹의 HTML 분석시 Semantic element를 해석하게 된다.
- Semantic Tag = Explain the contents to the Browser, Search Engine, and Developer
- Semantic Web = Give Metadata to Web pages.
  - 의미와 관련성 -> 거대 데이터베이스
HTML 요소
- non-semantic: div, span... content 에 대한 설명 X
- semantic: form, table, img... content 설명 O
  - header, nav, aside(오른쪽 메뉴 느낌), section(아티클 포함), article(주내용!), footer
<head>
- for Metadata
- <meta charset="utf-8">
- <title>문서 제목</title>
  - 이 경우, 브라우저 탭에 표시됨.
- <style>
  - body{
    - background-color: yellow;
  - }
  - </style>
- Link tag
  - <link rel="stylesheet" href="style.css">
- <script></script>
  - script 요소에는 client-side Javascript를 정의한다.
    - document.addEventListener('click',function(){alert('clicked!);});
  - src attribute -> Javascript file!
    - <script src ="main.js"></script>
    - 이 어트리뷰트는 앞 괄호 안에 들어가네? 잉
- Meta Meta
  - 문자셋 정의: <meta charset="utf-8">
  - Keyword: <meta name="keywords" content="apple, orange, melon">
  - Description: <meta name="description" content="Amazing Fruit world">
  - Author: <meta name="author" content="SooC">
  - Refreshing: <meta http-equiv="refresh" content="30">
    - 이 때, 단위는 second.

HTML Section 5 : Semantic Web & Tags

poiemaweb.com/html5-tag-text

Text Formatting Tag
- Bold: <p style="font-weight: bold;"> This is bold. </p>
- Another Bold: <b></b>
  - -> 하지만 둘 다 요즘 표준은 아니고...
- Strong: <strong>This is strong.</strong>
  - -> 이게 웹표준이라네. Semantic!
- Italic: <p style="font-style: italic;">This text is italic.</i>
  - ->잉 섞어써도 된다..!
- Another Italic: <i>This is italic text.</i>
- Emphasized: <em>Emphasized text looks the same with italic text.</em>
  - -> Semantic importance!
- Small: <h2>HTML<small>Small</small> Formatting</h2>
  - -> small will be only small formatted text.
- Highlight: <h2>HTML<mark>Marked</mark> Formatting</h2>
  - -> Marked will be only marked.
- Deleted: <p>My favorite fruit is <del>mango</del> apple.</p>
  - -> 취소선.
- Inserted: <p>My birthday is on <ins>November</ins>.</p>
  - -> 밑줄 쫙
- Subscripted & Superscripted: <p> Look <sup>Upper side</sup> and <sub>Down side</sub>.</p>
본! 문! 태! 그!
- Paragraphs: <p>~</p>
- Line Break: <br>~<br>
  - -> enter 같은 느낌.
  - -> 1개 이상의 연속된 space를 삽입해도 1개의 space만 표시.
  - -> 그러니까<br>이 없으면 아무리 엔터를 치고 스페이스를 눌러도 다 따닥따닥 붙어서 나온다는거임.
  - -> 연속공백 (long space) 효과는   를 쓰자!
    - <p>There are   short and   & nbsp; long spaces! </p>
- Preformatted text: <pre>~</pre>
  - -> 메모장에 작성된 그대로 웹에서 보여주는 태그.
- Horizon line: <hr>
- Quotation mark"": <q>~</q>
  - -> 한 줄 인용 이런 느낌
- Blockquote: <block quote>~</blockquote>
  - -> tab 느낌으로 들여써준다.

'Boot Camp > Coding_Prep' 카테고리의 다른 글

After Prep Project: Need to be improved (0)	2021.03.02
(D-17) Prep Self Study (Day 5) CSS: 7-10 (0)	2021.02.09
(D-22) Prep Self Study Day 4: CSS 3~6 (0)	2021.02.07
(D-28) Prep Self Study Day3: CSS 1-2 (0)	2021.02.04
(D-29) Prep Self study Day2: HTML 6-10 (0)	2021.02.03

ABOUT ME

뚜벅뚜벅 뚜벅뚜벅

'Boot Camp > Coding_Prep' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Boot Camp > Coding_Prep' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바