개요

웹 개발과 HTML을 이해한다.

Summary

웹 개발은 HTML, CSS, JavaScript로 구성된다.
HTML은 가장 중요한 첫 단계이다.

1. 웹 개발

웹 개발의 구성요소 각각의 역할
HTML: 웹의 구조 / 마크업 언어 / 기획자 / 와이어 프레임
CSS: 웹의 디자인 / 스타일 언어 / 디자이너 / 디자인
JS: 상호작용 / 프로그래밍 언어 / 개발자 / 프로그래밍
(javascript)

Visual studio code: 텍스트 에디터
Extension: 웹 브라우저 프로그램. 웹 브라우저의 기존 기능의 동작을 변경, 새로운 기능 추가

2. HTML

HTML meaning

Hypertext Markup Language
hypertext: 목차, 표제 등이 서로 연결된 문자 데이터 파일
markup: 마크업은 그 파일이 화면에서 어떻게 보여야할 것인지를 나타내기 위해, 텍스트나 워드프로세싱 파일의 특정 위치에 삽입되는 일련의 문자들이나 기호(=요소, 태그, 속성, 변수)
*language: 언어

즉, 파일이 컴퓨터에서 출력되기 위해 문자 데이터 파일과 태그로 나타낸 언어이다.
HTML은 문자 데이터, 일련의 문자, 기호로 구성된다.

Tag

*Tag(꼬리표): HTML 기본 문법. 어떠한 항목을 보충 설명하는 키워드.
header, body
div: division
span: span
img: image
a: link
ul: unordered list / ol: ordered list / li: list item
input: input(text, radio, checkbox)
button: button
h1~h6: heading

Semantic element

Semantic: 의미가 있는 element: 요소(=원소: 더 이상 나눌 수 없는 성분 = 단어,키워드)
= 의미를 갖는 단어(키워드)

강사님은 검색 엔진이 semantic element를 좋아한다고 설명한다.
그 이유는 검색 엔진이 검색할 때, 여러 스타일이 섞인 문자 데이터보다 semantic element(의미를 갖는 keyword인)를 찾는 것이 더욱 효율적이지 않을까? 문자 데이터 수가 적을 수록 탐색시간이 감소하기 때문에?

웹 앱의 구조

웹 구조 만들기

1. 큰 틀에서 영역 나누기
2. 각 영역을 태그로 구분하기

div: division(=영역). 가상의 레이아웃을 나눌때 사용된다.
레이아웃을 나눌 때 글쓰기를 생각하자.
개요
목차
주제 1
내용
내용
주제 2
내용
내용

영역을 구분해서 li/li로 감싸는 과정 = 목차를 구분하고 내용의 영역을 나누는 과정
li로 대분류를 했으면, 그 아래에 div로 소분류한다.

input, button -> form 으로 구분한다.
위 태그는 사용자와 상호작용하는 function 이기 때문에 페이지가 이동, 전송되는 역할을 한다.

id, class, 속성, 요소

id: 고유한 이름
class: 반복되는 영역을 유형별 분류

• HTML 태그 / Selector

  / div#writing-section
• / li.comment

• a
  a: anchor(닻을 내리다) -> Link(연결, 접속)
  a href -> hyperlink / 내 컴퓨터에 있는 로컬파일 경로 링크

• div vs span
  div: 콘텐츠 크기 상관없이 한 줄 차지
  span: 줄 바꿈 x, 한 줄에 여러개 나열

check box vs radio
check box: 중복 선택
radio: 단일 선택. but, name 속성을 통일해야 같은 name에서 중복 선택 x

• p vs div
  p(=paragraph): 단락이 나뉘어짐 => margin(=여백)이 생김
  div(=division): 영역 구분 => margin(=여백)이 없음
  -> 어떤 웹을 구현시킬 것이냐, 그 용도에 따라 sementic(의미있게) 사용한다. 보충 공부 필요
• Type?

한 줄 요약

운동도 기본 운동이 가장 중요하듯이,
웹 앱 구현을 위한 첫 시작인 HTML이 매우 중요하다.
주말에 꼭 복습하자.