HTML과 웹브라우저
▲ .html 파일을 구동시키는 것이 웹브라우저
▲ 웹브라우저에는 크롬, 엣지, 익스플로러, 사파리가 있음
HTML : HyperText Markup Language
웹브라우저가 이해할 수 있는 언어
HTML,CSS,JavaScript
[구조] HTML : 웹 문서의 기본적인 골격을 담당
[표현] CSS : 각 요소들의 레이아웃, 스타일링을 담당 ->각 요소들의 identity를 강조
[동작] JavaScript : 동적인 요소(사용자와의 인터렉션)을 담당
웹 표준/웹 접근성/웹 호환성
[웹 표준] : 브라우저의 종류가 다양하기때문에 html 작성 규칙을 정한 것 -> html5
[웹 접근성] : 다양한 상황에서의 사용자들에게 문제 없이 브라우징을 제공하기 위한 것 -> 스크린리더, 화면돋보기, 음성인식, 키보드 오버레이
*웹 접근성이 좋아야 좋은 웹사이트가 된다.
[웹 호환성] : 웹 표준 준수를 통한 브라우저 호환성 확보
HTML 태그(tag)표기법
▲ 문법 :
<tag>내용</tag>
▲ 내용 부분이 최종적으로 브라우저에 보이는 부분
▲ 태그는 대소문을 구분하지 않음
▲ 태그 안에 태그 들어갈 수 있음 -> 포함관계<h1><strong></strong></h1>
▲ 태그에는 layout을 나누는 태그가 있음 -> 단독으로 사용하면 눈에 보이지 않음
빈 요소
▲ 내용이 없다면 빈 요소 -> 닫는 태그 추가로 명시하지 않아도 돼
▲<img> <br> <meta> <input> <hr>등이 있음
주석
▲ 문법 :
<!-- 내용 -->
▲ 브라우저에서 해석하지 않음
▲ 필요한 위치에 꼭 필요할 때만 사용 권장
▲ 보통 협업을 위해 사용
<html></html>
▲ 최상위/root 요소
▲ 한 .html파일에 한번만 선언되어야함
▲ 모든 요소들은 html요소 안에서 선언되어야함
<head></head>
▲ 기계 처리를 위한 정보 넣는 곳 -> title, script, stylesheet
▲ 생략할 순 있지만 생략하면 안됨
<body></body>
▲ 속성(attribute)이 들어가는곳
▲ .html의 기본 구조
블록(block)과 인라인(inline)
▲ 블록(block) : 항상 새로운 줄에서 시작하며, 부모가 허용한 가로 최대 길이까지 차지 가능
▲ 인라인(inline) : 바로 이전 요소가 끝나는 지점부터 시작하며, 요소의 내용 만큼만 차지
▲<p>태그 안에<p>태그 또는 다른 블록요소 들어갈 수 없음
▲ 가능 : 블록 내 블록, 인라인 내 인라인, 블록 내 인라인
▲ 불가능 : 인라인 내 블록
블록 태그들
> <div>
> <address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>인라인 태그들
> <span>
> <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <small>, <script>, <select>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>VSCode 단축키(window)
▲ 현재 창 닫기 : ctrl + w
▲ 사이드바 토글 : ctrl + b
▲ 내어쓰기 : shift + Tab
▲ 행 아래 삽입 : ctrl + Enter
▲ 행 위 삽입 : ctrl + shift + Enter
▲ 현재 행 이동 : Alt + ⬆/⬇
▲ 현재 행 복사 : Alt + shift + ⬆/⬇
▲ 현재 행 삭제 : ctrl + shift + k
▲ 주석 토글 : ctrl + / (여러줄 잡고 가능)
