코드스테이츠 -부트캠프 (HTML의 기초)

Section1 [HTML]의 기초

Chapter1. 웹 개발 이해하기

HTML CSS JavaScript

Chapter1-1 웹 개발과 HTML & CSS & JavaScript

HTML = 웹 페이지의 구조를 담당하는 마크업 언어 (구조)

CSS = 디자인 요소를 시각화하는 스타일시트 언어 (스타일)

JavaScript = 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용 할 수 있게 만들어주는 프로그래밍 언어 (상호작용)

EX) 강아지 집

간단한 구조 = HTML // 색칠 = CSS // 알고리즘 사용 = JAVA SCRIPT

Chapter1-2 Visual Studio Code

VS Code란

• 마이크로소프트에서 개발한 전 세계에서 가장 대중적인 코드 에디터입니다.
  프로그램, 웹 사이트 , 웹 애플리케이션 등을 만들 수 있습니다.

Chapter1-3 HTML파일 브라우저에서 열기

Open Live Sever 을 이용하면 즉각적으로 작성중인 코드를 HTML파일에서 열어서 확인 가능하며 변경사항이 바로 적용되는 장점이 있다.

Chapter2 HTML 기초

• HTML은 자바스크립트와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업 언어입니다.

Chapter2-1 HTML 기본 구조와 문법

HTML = 문서의 구조나 내용들을 다루고있는 언어 / 문서의 틀을 만드는 언어
(Hyper Text Markup Language)

HTML은 tag들의 집합
Tag : 부등호(<>) 로 묶인 HTML의 기본 구성 요소

TREE 구조
1. HTML 문서 시작 / head / title
2. body / h1 ,div / span

!DOCTYPE html = 이 문서가 HTML 문서임을 명시
HTML /HTML = html 시작 태그로, 문서 전체의 틀을 구성 , </태그이름> 은 해당 태그가 끝났음을 의미
head /head = head 태그는 문서의 메타데이터? 를 선언
title /title = 문서의 제목, 브라우저의 탭에 보여짐
body /body = body 태그는 문서의 내용을 담는 곳

인터넷 참고 https://joyfuls.tistory.com/24

메타 데이터란 "데이터를 위한 데이터" 라고 말하며 '데이터에 관한 구조화된 데이터', '다른 데이터를 설명해 주는 데이터' 이다.

목적으로는
1. 데이터를 표현하기 위한 목적
2. 데이터를 빨리 찾기 위한 목적

가장 좋은 예가 HTML 태그이다. 데이터에 관한 구조화라는 것은 HTML 태그 안에 head나 body가 있으며,body 안에는 table이 올 수 있고,
table 안에는 tr이, tr 안에는 td가 올 수 있는 것처럼 데이터가 상위에서 하위로 나무(tree) 형태의 구조를 이루고 있다는 의미이다.

Chapter2-2 자주 사용하는 HTML요소

div = div 태그는 (한 줄)을 차지하는 코드

span = span 태그는 (컨텐츠 크기)만큼 공간을 차지하는 코드

img = 이미지 삽입 / img src = "https://i.imgur.com/JVAJ4tO.jpg" , 닫는 태그가 없음 /

a = 링크 삽입 / a href="https://codestates.com" target="_blank"코드스테이츠 / 새창으로 열고 싶을땐 target="_blank"

ul & li = 리스트 / ul = 순서가 없는 리스트 ol = 순서가 있는 리스트 li = 리스트 목록

• 다양한 입력 폼
  input = text박스(id , password) , radio 박스 , check 박스
  radio 박스와 check 박스의 차이점은 radio는 그룹으로 설정되어 선택할 수 있다
  radio 박스에서 div태그로 묶은 후 name으로 설정하여 하나의 그룹으로 만든다면 둘 중 하나의 택 1을 할 수 있게 만들 수 있다.

textarea = input과는 다르게 줄바꿈이 가능하다

button = 버튼

Chapter2-3 로그인 페이지 만들기

로그인 페이지 만들기

ID 로그인

Chapter2-4 시맨틱 요소

시맨틱 요소란?
= HTML5에서는 시맨틱 웹이 중시되면서 여러 시맨틴 요소가 새롭게 만들어 졌습니다.
시맨틱이란 '의미가 있는,의미론적인' 이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다.

시맨틱 요소를 사용해야 하는 이유
1.검색 엔진이 시맨틱 요소를 더 좋아하기 때문입니다.
2.여러 개발자가 함께 작업할 때