프론트엔드스쿨 html - 9/27

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 + / (여러줄 잡고 가능)

										

좋은 웹페이지 즐겨찾기