프론트엔드 공부 1일차

waymo·2022년 4월 26일
0

패캠 FE 공부

목록 보기
1/28

💻

코딩 공부를 마음 먹었지만 이제까지 게으르게 미뤄왔었다.
오늘 부터 하루하루 성장하는 개발자 되기위한 첫걸음으로서 공부한 것을 기록하기로 다짐!!




HTML

Hyper Text Markup Language
페이지의 제목, 문단, 표 이미지, 동영상 등 웹의 구조를 담당

CSS

Cacading Style Sheets
실제 화면에 표시되는 방법(색상,크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당.

JS

Javascript
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당




웹표준

Web Standard
'웹에서 사용되는 표준 기술이나 규칙'을 의미, W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술.

크로스 브라우징

Cross Browsing
조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법



특수 문자 용어

`  : Backtick, Grave  백틱, 그레이브
~  : Tilde  틸드 , 물결표시
!  : Exclamation mark 익스클러메이션, 느낌표
@  : At sign  앳, 골뱅이
#  : Sharp, Number sign  샵, 넘버, 우물 정
$  : Dollar sign
%  : Percent sign
^  : Caret 캐럿
&  : Ampersand 엠퍼센드
*  : Asterisk 에스터리스크, 별표
-  : Hyphen, Dash 하이픈, 대시, 마이너스
_  : Underscore, Low dash 언더스코어, 로대시, 밑줄
=  : Equals sign
"  : Quotation mark 쿼테이션, 큰 따옴표
'  : Apostrophe 아포스트로피, 작은 따옴표
:  : Colon 
;  : Semicolon
,  : Comma
.  : Period, Dot 피리어드, 닷, 점, 마침표
/  : Slash  슬래시
|  : Vertical bar
\  : Backslash  백슬래시
() : Parenthesis 퍼렌서시스, 소괄호, 괄호
{} : Brace 브레이스, 중괄호
[] : Bracket 브래킷, 대괄호
<> : Angle Bracket 앵글 브래킷, 꺽쇠괄호

Vs code 단축키

모든 명령 표시(에디터의 모든 명령에 접근)
MacOS: Cmd + Shift + P
Windows: Ctrl + Shift + P

편집기 닫기
MacOS: Cmd + W
Windows: Ctrl + W

찾기 (검색)
MacOS: Cmd + F
Windows: Ctrl + F

찾기(검색)/ 바꾸기(대체)
MacOS: Cmd + Alt(Opt) + F
Windows: Ctrl + H

줄 위로 이동
MacOS: Alt(Opt) + Up
Windows: Alt + Up

줄 아래로 이동
MacOS: Alt(Opt) + Down
Windows: Alt + Down

아래에 줄 복사
MacOS: Alt(Opt) + Shift + Down
Windows: Alt + Shift + Down

위에 줄 복사
MacOS: Alt(Opt) + shift + Up
Windows: Alt + Shift + Up

들여쓰기(Indent)
MacOS: Tab
Windows: Tab

내어쓰기(Outdent)
MacOS: Shift + Tab
Windows: Shift + Tab

이전 편집기 열기 (좌측 창으로 전환)
MacOS: Cmd + Shift + [
Windows: Ctrl + PageUp

다음 편집기 열기 (우측 창으로 전환)
MacOS: Cmd + Shift + ]
Windows: Ctrl + Ctrl + PageDown

편집기 분할 (백슬래쉬)
MacOS: Cmd + \
Windows: Ctrl + \

사이드 바 (side Bar)열고 / 닫기
MacOS : Cmd + B
Windows : Ctrl + B



HTML

DOCTYPE

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

<!DOCTYPE html>

구조

HTML

<html></html>

문서의 전체 범위
HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할

<head></head>

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

body

<body></body>

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




정보를 의미하는 태그

title

<title></title>

HTML 문서의 제목(title)을 정의
웹 브라우저 탭에 표시됨

<link rel="stylesheet" href="./main.css" />
<link rel="icon" href="./favicon.png">

외부 문서를 가져와 연결할 때 사용 (대부분 CSS 파일)
rel(Realationship 단어의 약어)은 가져올 외부 문서(대표적으로 CSS 파일)가 현재의 HTML과 어떤관계인지를 명시하는 HTML 속성(Attribute)

style

<style></style>

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

script

<script src="./main.js"></script>
<script>
	console.log('Hello world!')
</script>

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

meta

<meta charset="UTF-8" />
<meta name="author" content="taewook" />
<meta name="viewport" content="width=device-width" />

HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브라우저에게 제공

profile
FE 개발자(진)가 되고 싶습니다

0개의 댓글