-
[데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(1) : 개요 및 세팅스터디/[패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기 2024. 12. 27. 13:48
Ch 1. 개요
첫 인사 및 강의 개요
프론트엔드 개발은 웹사이트와 웹 애플리케이션의 사용자 인터페이스(UI)를 설계하고 개발하는 것을 목표로 한다. 본 강의에서는 HTML, CSS, JavaScript와 같은 기본 기술뿐 아니라, 브라우저의 동작 원리와 웹 표준 등 실무와 연관된 기초 지식을 익힌다. 이를 통해 안정적이고 확장 가능한 웹 환경을 구축할 수 있다.
HTML, CSS 그리고 JS
HTML은 구조, CSS는 스타일, JavaScript는 동작을 담당한다. 이 세 가지는 웹 개발의 기초를 이루며 각각의 역할이 명확히 구분되어야 효율적인 개발이 가능하다.
웹앱의 동작원리
웹 애플리케이션은 클라이언트와 서버 간의 요청과 응답을 통해 동작한다. 사용자가 브라우저에서 URL을 입력하면, 브라우저는 서버에 요청을 보내고 서버는 HTML, CSS, JavaScript 파일을 응답한다. 브라우저는 이를 렌더링하여 화면에 출력한다.
웹 표준과 브라우저
웹 표준은 웹 기술이 모든 브라우저에서 일관되게 동작하도록 보장한다. 주요 브라우저는 이러한 표준을 준수하기 위해 노력하지만, 일부 특수한 기능은 특정 브라우저에서만 동작할 수 있으니 주의해야 한다.
웹에서 사용하는 이미지
이미지는 JPG, PNG, GIF, SVG 등 다양한 형식을 지원하며, 각 형식은 용도와 특성이 다르다. JPG는 사진, PNG는 투명 배경, SVG는 벡터 그래픽에 적합하다. 이미지 최적화는 성능에 큰 영향을 미친다.
특수 기호
HTML에서 특수 기호는 &로 시작해 ;로 끝나는 형태로 사용된다. 예를 들어, ©는 ©, &는 &를 의미한다. 특수 기호를 사용하면 브라우저와의 호환성을 높일 수 있다.
오픈소스 라이선스
오픈소스 라이선스는 소프트웨어의 사용, 수정, 배포 권한을 정의한다. MIT, Apache, GPL 등이 있으며, 사용하려는 라이브러리나 코드를 해당 라이선스 조건에 맞게 활용해야 한다.
Ch 2. VS Code
설치 및 실행
VS Code는 Microsoft에서 제공하는 무료 텍스트 편집기다. 공식 웹사이트에서 설치 파일을 다운로드하여 설치할 수 있다.
파일 생성과 삭제
파일 탐색기에서 새 파일을 생성하거나, 불필요한 파일을 삭제할 수 있다. Ctrl + N으로 새 파일을, Delete로 선택한 파일을 삭제한다.
한글화
설정에서 언어 팩을 설치하여 한글로 변경할 수 있다. F1 키를 누르고 configure display language를 입력하면 언어 설정 창이 뜬다.
정리된 코드 만들기 (Beautify)
Beautify 확장을 설치하면 코드의 들여쓰기와 줄 바꿈을 자동으로 정리할 수 있다. 단축키는 Shift + Alt + F이다.
태그 이름을 한 번에 변경 (Auto Rename Tag)
Auto Rename Tag 확장은 HTML 태그의 열림/닫힘 이름을 동시에 수정할 수 있다. 이는 실수를 줄이는 데 유용하다.
브라우저에 출력 (Live Server)
Live Server를 사용하면 HTML 파일을 실시간으로 브라우저에서 확인할 수 있다. 설치 후 파일 탐색기에서 Go Live를 클릭한다.
단축키 & 공백 2로 만들기
단축키는 File > Preferences > Keyboard Shortcuts에서 설정할 수 있으며, 공백 크기는 settings.json에서 "editor.tabSize": 2로 변경하면 된다.
Ch 3. 무작정 시작하기
Doctype(DTD)
HTML 문서는 <!DOCTYPE> 선언으로 시작한다. 이는 브라우저에 문서 타입과 HTML 버전을 알려준다.
HTML, HEAD, BODY
<html> 태그는 HTML 문서의 시작과 끝을 나타낸다. <head> 태그에는 메타정보와 스타일, 스크립트 파일이 들어가며, <body> 태그에는 실제 콘텐츠가 들어간다.
CSS, JS 연결하기
CSS는 <link> 태그를 통해, JavaScript는 <script> 태그를 통해 HTML 파일에 연결한다.
정보를 의미하는 태그 살펴보기
<header>, <footer>, <article>, <section> 등은 문서 구조를 정의하는 의미 있는 태그다. 이러한 태그를 사용하면 가독성과 접근성이 향상된다.
화면에 이미지 출력하기
<img> 태그를 사용하여 이미지를 출력할 수 있다. src 속성에 파일 경로를, alt 속성에 대체 텍스트를 입력한다.
상대 경로와 절대 경로
상대 경로는 현재 파일 위치를 기준으로 경로를 지정하며, 절대 경로는 루트 디렉토리에서 시작한다. 상대 경로는 이동성에, 절대 경로는 명확성에 유리하다.
페이지를 나누고 연결(링크)하기
<a> 태그를 사용하여 다른 페이지로 이동하는 링크를 생성한다. href 속성에 대상 페이지의 경로를 입력한다.
모든 파일 공백 크기 설정
settings.json에서 공백 크기를 설정하면 모든 파일의 들여쓰기를 일관되게 유지할 수 있다. "editor.tabSize": 2로 설정하면 공백 크기를 2로 조정할 수 있다.
개발자 도구 사용하기
브라우저의 개발자 도구를 사용하면 HTML 구조, CSS 스타일, JavaScript 동작을 실시간으로 분석하고 수정할 수 있다. 단축키는 F12 또는 Ctrl + Shift + I이다.
Ch 4. 웹에서 시작하기
Codepen.io 소개
Codepen.io는 웹에서 HTML, CSS, JavaScript 코드를 작성하고 즉시 실행 결과를 확인할 수 있는 플랫폼이다. 빠르고 간편한 실습 환경을 제공한다.
브라우저 스타일 초기화
브라우저 기본 스타일을 제거하거나 초기화하면 CSS 작업이 쉬워진다. 이는 reset.css 또는 normalize.css 파일을 활용하면 간단히 구현할 수 있다.
Emmet
Emmet은 HTML/CSS 코드 작성 속도를 높이는 도구다. 예를 들어, div.container>ul>li*5를 입력하면 자동으로 5개의 리스트 아이템이 포함된 HTML 구조를 생성한다.
앞으로 이 기초 내용을 바탕으로 다양한 실습과 프로젝트를 진행하며 발전하는 과정을 공유할 예정이다.
'스터디 > [패스트캠퍼스] 데브캠프: 김민태의 프론트엔드 개발 3기' 카테고리의 다른 글
JavaScript에서 DOM과 이벤트 (2) 2025.01.17 [데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(4) : JS (1) 2025.01.10 [데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(2) : HTML (2) 2025.01.03 [데브캠프 : 김민태의 프론트엔드 개발 3기] Git/GitHub 학습 (4) 2024.12.20 [데브캠프 : 김민태의 프론트엔드 개발 3기] OT 후기 (0) 2024.12.16