1. HTML 개요

1. HTML과 웹 브라우저

HTML 로 작성된 언어는…

• .html 의 확장명을 갖는다.
• 이 파일을 구동할 수 있는 프로그램이 웹 브라우저이다.

  웹브라우저 : 크롬, 엣지, 익스플로러, 사파리 html을 보여주는 단순 뷰어 뿐만아닌 웹페이지 분석 가능한 개발 도구를 제공한다.

HTML : HyperText Markup Language

• 프로그래밍 언어 : 데이터를 가공 후 처리하는 것
• 마크업 언어 : 데이터를 그 자체로 특정한 위치에 표현하는 것

2. HTML, CSS 그리고 JavaScript

• HTML : 구조 - 웹 문서의 기본적인 골격을 담당
• CSS : 표현 - 각 요소들의 레이아웃, 스타일링 담당
• JavaScript : 동작 - 동적인 요소(사용자와의 인터랙션)을 담당

나누어서 쓰면 뭐가 좋을까? : 만약 나누어있지 않다면, 반응형 페이지를 만들기 위해 별도의 파일을 만들어야한다.

3. 웹 표준과 웹 접근성, 호환성

웹 표준

• 동일한 html 문서여도 그것을 구동시키는 웹브라우저에 따라 결과가 조금씩 다름. 하지만 표준을 준수하면 어느정도 의도된대로 표현 가능함.
• HTML5 는 W3C 에서 2014년에 공식 표준화
• 2019년 WHATWG에 의해 HTML Living Standard가 표준화됨
• HTML이 표준화 되기 이전에는, 익스플로러의 액티브X처럼 독자적인 플러그인이 존재하기도 했음
• 웹표준을 준수하여 작성한다면, 운영체제, 브라우저마다 의도된 대로 보여지는 웹 페이지를 만들 수 있음

웹 접근성

• 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식
• 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
• 심각한 장애가 아니더라도 일시적인 장애를 갖게 된 사람, 장애를 갖지 않은 사람에게도 이점을 줌
• ex) ui 키보드, tab 키로 dom 전환

웹 호환성(Cross Browsing)

• 웹 브라우저 버전, 종류와 관계없는 웹사이트 접근
• 웹 표준 준수를 통한 브라우저 호환성 확보 (html, css 문법 준수 / 동작, 레이아웃, 플러그인 호환성)

2. 실습 환경 세팅

웹 에디터와 통합개발환경(IDE)

웹 에디터(편집기)

• HTML 문법에 맞추어 편리하게 작성할 수 있도록 도와주는 편집기
• 문법에 따라 색깔, 들여쓰기 등을 구분할 수 있다.
• 간단하게 온라인 웹 에디터도 있다 (jsbin, replit, codepen) …

통합개발환경 (IDE)

• 개발을 할 때 필요한 여러가지 툴을 한 프로그램을 통해 사용할 수 있도록 한다.
• 소스코드 편집기, 빌더, 디버거, 플러그인이 한 프로그램에 있다.
• vsCode, intelliJ, Xcode, Eclipse …

추천 확장 프로그램

• Auth Rename Tag : 열린 태그 이름 바꾸면 닫힌 태그도 자동으로 바뀐다.
• live server : 수정사항이 바로 렌더링된다.
• prettier : 이쁘지 못한 코드(포맷팅, 문법)을 알려주고 수정해준다. (초반에는 스스로 이쁘게 코드 포맷팅하는 연습을 해야하므로 비추천!)

vsCode 단축키

• 현재 탭 닫기 : cmd + w
• 닫은 창 다시 열기 : cmd + shift + t
• 들여쓰기 : cmd + ]
• 아래에 행 삽입 : cmd + Enter
• 현재 행 이 : cmd + shift + Enter
• 현재 행 복사 : option + shift + 방향키
• 현재 행 삭제 : cmd + shift + k

나의 회고 🤫

html, css에 대한 가장 기본적인 지식을 다시 학습하는 시간이었기에, 새로 알게 된 내용은 없었지만 웹표준, 웹접근성, 웹호환성에 대한 내용을 다시 짚고 넘어갈 수 있어서 좋았다.
실습환경은 기존에 사용하던 vsCode를 그대로 사용할 예정이다.
평소 자주 사용하던 단축키 외에 잘 안쓰던 단축키만 따로 정리해두었다.
이 단축키들도 빨리 적응해서 코딩 속도를 높여보자!
프론트앤드 강의 1일차인데 앞으로 꾸준히 열심히 하자!!👍👍