[udemy] Web Develop HTML

해당 강의에서 처음에 돌아가는 구조를 먼저 간략하게 설명을 하면 아래와 같습니다.

인터넷

네트워크를 통해 정보를 공유하고 프로토콜을 이용하여 통신하는 것을 의미, TCP/IP라는 통신 프로토콜을 이용하여 정보를 주고 받을 수 있습니다.

 

웹

특정 사이트에서 정보를 요청을 하고 서버에서 응답을 하여 원하는 데이터를 html, css, javascript로 만들어서 보내주면 브라우저에서 사용자가 보기 편하게 봐꿔서 보여줍니다.

 

프론트엔드와 백엔드

프론트엔드에서는 사용자가 보는 웹에서 어떠한 행위를 누르게 되고 백엔드에서는 요청사항에 대해서 응답을 하고 필요한 데이터를 만들어서 전달을 합니다. 그러면 다시 프론트엔드는 그 데이터를 가지고 사용자가 브라우저에서 볼 수 있도록 재구성 되어서 보여주는 역할을 합니다. 즉, 프론트엔드는 레스토랑에서 홀에서 주문을 받고 완성된 요리를 제공해주는 역할이며, 백엔드는 주방에서 주문된 요리를 위해서 만드는 과정을 하게 됩니다.

 

HTML/CSS/JS

THE PURPLE DINO DANCED에서 PURPLE은 CSS, DINO는 HTML 그리고 DANCED는 JS이다.

HTML는 페이지의 본질, CSS는 구조와 어떻게 보여야 하는지를 설명 그리고 JS는 웹페이지의 실질적인 논리, 동작, 동사를 구축한다.

 

HTML 개요

HTML(Hypertext Markup Language의 약자)은 프로그래밍 언어보다는 문서에 마크업을 할 뿐입니다.

태그 : <태그></태그> 닫는 태그로 범위를 지정을 해줘야 하며, 태그 이름에 따라서 하는 용도도 달라집니다. (참고)

 

<p>

: 하나의 문단

<h1 ~ 6>

:  6단계의 구획 제목

<ul>, <ol>, <li>

: 목록의 항목, <ol>은 숫자로 표기이며 <ul>은 숫자가 아닌 것으로 표기됩니다.

 

<a>

:  href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결하는 하이퍼링크

 

<img>

: 문서에 이미지를 삽입

src : 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정
alt : 이미지의 텍스트 설명이며 필수는 아님

 

<div> (참고)

: 분할의 요소 , 무언가를 잡아 두는 또는 요소를 그룹화 하는 제네릭 컨테이너이고 블록 수준 요소입니다.

: 컨텐츠에 div를 넣게되면 전체 블록을 차지하고 위아래의 컨텐츠를 밀어낼 것입니다.

 

<span> (참고)

: 제네릭 컨테이너이고 인라인입니다

 

<hr>

: horizontal rule, 수평 가로줄

 

<br>

: the line break element, 줄바꿈

 

<sup>

: superscript element, 윗첨자

 

<sub>

: subscript element. 아랫첨자

 

<table>, <tr>, <td>, <th>

: 표를 그리는 태그, <th>는 테이블 셀 그룹의 헤더로 정의

CSS 적용된 테이블

<thead>, <tbody>, <tfooter>

: 테이블 요소를 구분 짓기 위한 태그

 

rowspan : 가로 2줄로 분기
colspan : 세로 2줄로 분기

 

SEMANTIC MARKUP

: <div>와 동일 하지만 역할에 맞게끔 분류 / 검색 엔진 최적화, 웹접근성, 가독성에 장점

<main>

<nav>

<section>

<article>

<aside> : 사이드나 말풍선 등에 쓰임

<header>

<footer>

<time>

<figure>

 

form (참고) :  정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획 표시

input (참고) : type에 따라 다양하게 사용

label (참고): 사용자 인터페이스 항목의 설명

button (참고) : 클릭 가능한 버튼

 

 

그 밖에 태그의 경우는 참고를 하여 알아가는 것도 한 방법이고, 사이트마다 window기준 f12누르면 해당 페이지의 html이 쓰인 것을 볼 수 있습니다.

 

!DOCTYPE html (여기)

: HTML5구문 또는 HTML5 버전 표준을 쓴다고 아려주는 것

html standard (여기)
HTML5 (여기) 

 

<!-- 내용 -->

: 주석 처리