code 폴더명
을 입력하면 VSCode를 열어줌 DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전을 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
--> XHTML
<!DOCTYPE html>
--> HTML5 (표준)
<html></html>
: HTML문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할
<head></head>
: 문서의 정보를 나타내는 범위. <meta>, <title>, <link>, <script>, <style>
태그가 포함
<meta />
: HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브러우저에 제공.
name : 정보의 종류, content : 실제 정보의 값 charset : 문자인코딩 방식
ex)<meta name="author" content="Hello World" />
: 정보의 종류는 제작자이고 제작자는 Hello World이다.
<title></title>
: HTML 문서의 제목을 정의
<link rel="" href="" />
: rel(Relationship) : 가져올 문서와 관계, href(Hyper Text Reference) : 가져올 문서의 경로
ex) rel="stylesheet", rel="icon"(title의 로고 설정, favorite icon이라고 해서 favicon이라고 부름)
<style></style>
: 스타일을 HTML 문서 안에서 작성하는 경우 사용
<body></body>
: 문서의 보여지는 구조를 나타내는 범위
<html lang="ko">
: 한국어로 설정함으로써 새로고침 했을 때 영어에서 한국어로 번역할건지 나오는 알림창이 안나오게 됨
상대 경로
./ : (생략 가능)
../ : 상위 폴더
절대 경로
http or https : 원격
/ or // : 최상위 경로 (ROOT)
모든 요소에 공통으로 사용 가능한 속성
<태그 title="설명"></태그>
: 요소의 정보나 설명을 지정
<태그 style="스타일"></태그>
: 요소에 적용할 스타일(CSS)을 지정
<태그 class="이름"></태그>
: 요소를 지칭하는 중복 가능한 이름
<태그 id="이름"></태그>
: 요소를 지칭하는 고유한 이름
<태그 data-이름="데이터"></태그>
: 요소에 데이터를 지정
<script defer src=""></script>
: defer 속성은 HTML 구조가 준비된 후(문서 분석 이후)에 JS를 해석하겠다는 의미 <style></style>
안에 스타일을 작성<link />
로 외부 CSS 문서를 연결, 병렬 방식(async?)dispaly : block
: 문자요소를 상자요소로 변환할 수 있음
VSCode 사용법도 아직은 낯설고 이것저것 처음알게 된 내용이 많아서 정신이 없지만 많이 도움이 되고 있는 것 같아서 좋다!
[출처] 패스트캠퍼스 - React & Redux로 시작하는 웹 프로그래밍 1주차 강의