[카테캠 1주차] VSC 단축키 / 무작정 시작하기

Visual Studio Code 단축키

바꾸기(대체): Cmd + Alt + F

한줄 복사 : Alt + Shift + Up / Down

탭 이동 : Cmd + Shift + [ or ]

편집기 분할 : Cmd + \

분할 화면 이동: Cmd + 1 (첫번째 분할 화면으로)

DOCTYPE 이란?

<!DOCTYPE html>

문서의 HTML 버전을 지정합니다.

DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도입니다.

HTML, HEAD, BODY

<html>

문서의 전체 범위를 의미합니다. HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할을 합니다.

<head>

문서의 정보를 나타내는 범위.

웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 정보를 작성하는 범위.

<body>

문서의 구조를 나타내는 범위.

사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위.

<head> 에 작성하는 태그들

<title>

HTML 문서의 제목을 정의합니다.

<link>

외부 문서를 가져와 연결할 때 사용

rel(relationship): 가져올 문서와 관계 , stylesheet 는 css 파일, icon 은 파비콘 이미지를 의미합니다.
href : 가져올 문서의 경로

<style>

스타일(CSS)를 HTML 문서 안에서 작성하는 경우에 사용됩니다.

<script>

자바스크립트(JS) 파일 가져오는 경우
자바스크립트(JS)를 HTML 문서 안에서 작성하는 경우

<meta>

* viewport 란?

모바일에서 웹 페이지의 가로 너비를 모바일 환경의 가로너비와 일치시키거나, 웹 사이트가 처음 출력될 때 확대/축소 여부나 정도를 결정하는 정보를 META 태그로 명시하는 개념이 name="viewport"의 내용입니다.

* charset 이란?

문자 인코딩 방식을 지정하는 HTML 속성입니다.

화면에 이미지 출력하기

<img /> 의 alt 속성 : 이미지가 출력되지 못하는 경우 대신 출력되는 대체 텍스트
index.html 은 루트에 위치해야합니다.

상대 경로와 절대 경로

경로에서 / 는 Root 를 의미합니다. ( ./ 는 현재 위치 혼동 주의)
<img src="images/logo.png" /> 는 /images/logo.png 를 뜻합니다. ( / 가 생략된 것.)

css 에서 background 를 사용하여 이미지를 넣는 경우 현재 css 파일을 기준으로 img 를 import 해야합니다.

페이지를 나누고 연결(링크)하기

경로를 표시할 때 index.html 은 생략이 가능하다.

아래 예시는 "/about/index.html" 로 경로표현을 해야하지만 생략이 가능하기 때문에 "/about" 으로 경로 표현한 예시이다.

href="/" 은 "/index.html" 과 같은 경로이다.

vscode Tab Size 설정

저작자표시

'카카오 테크 캠퍼스 > HTML CSS JS' 카테고리의 다른 글

[카테캠 4주차] CSS 속성 (0)	2023.05.06
[카테캠 3주차] CSS 속성 (0)	2023.04.28
[카테캠 3주차] CSS 개요 (2)	2023.04.27
[카테캠 1주차] 웹에서 시작하기 / HTML 개요 / HTML 핵심 정리 (0)	2023.04.14
[카테캠 1주차] 개요 (0)	2023.04.12