Keyword overview
HTML CSS JavaScript role
Library and Framework
Chrome Developer Tools
The Code Card
HTML CSS JavaScript role
https://lshjju.tistory.com/795
HTML CSS JavaScript role
웹을 짓는 세 가지 재료하나의 웹페이지가 완성되는 과정은 건물을 올리고 인테리어를 한 뒤 전기 시스템을 갖추는 과정과 매우 흡사합니다.HTML: 건물의 구조와 뼈대집을 지을 때 가장 먼저 세
lshjju.tistory.com
Git and GitHub
https://lshjju.tistory.com/796
Git and GitHub
개발이라는 여정에서 가장 두려운 순간 중 하나는 정성껏 작성한 코드가 사라지거나, 어제로 되돌리고 싶은데 방법을 모를 때입니다.이런 문제를 완벽하게 해결해 주는 마법 같은 도구인 Git과 G
lshjju.tistory.com
Library and Framework
https://lshjju.tistory.com/799
Library and Framework
프론트엔드 개발을 하다 보면 가장 많이 접하게 되는 단어이자, 개발자의 주도권을 결정짓는 중요한 개념인 **라이브러리(Library)**와 **프레임워크(Framework)**에 대해 이야기해 보겠습니다.이 둘의
lshjju.tistory.com
Web browser
https://lshjju.tistory.com/800
Web browser
개발자의 시선으로 바라보는 브라우저는 단순히 웹사이트를 보여주는 창이 아니라, 우리가 작성한 코드가 실행되는 가장 거대한 '런타임 환경'입니다.현대 웹 브라우저들은 크게 그 뿌리가 되
lshjju.tistory.com
IDE and Web editor
https://lshjju.tistory.com/801
IDE and Web editor
개발자에게 웹 에디터(IDE 포함)는 하루 중 가장 오랜 시간을 함께하는 분신과도 같습니다.단순히 글자를 입력하는 도구를 넘어, 코드의 품질과 개발 속도를 결정짓는 핵심적인 환경이죠.현대 개
lshjju.tistory.com
Materal code download
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
www.easyspub.co.kr
VS Code install and project load
VS Code install and project load
vs code install https://code.visualstudio.com/우측 상단 다운로드 버튼좌측 윈도우스 10 11 큰 버튼 저장 설치 동의 - 다음 설치위치선택 패스 안 바꿔도 됨 다음 시작메뉴폴더선택 패스 안 바꿔도 됨 다음
lshjju.tistory.com
VS Code settings
https://lshjju.tistory.com/808
VS Code settings
VS Code를 나만의 개발 맞춤 공간으로 만드는 가장 기초적이면서도 중요한 설정들입니다.코드의 가독성을 높이고 작업 효율을 극대화할 수 있는 세 가지 핵심 세팅 방법을 정리해 드릴게요.Live Ser
lshjju.tistory.com
VScode frontend new project
https://lshjju.tistory.com/792
VS Code frontend new project
새로운 웹 프로젝트를 시작하는 것은 마치 깨끗한 도화지를 준비하는 것과 같습니다.VS Code를 활용하여 표준적인 웹 프로젝트 구조를 만드는 과정을 단계별로 안내해 드릴게요.🏗️ 웹 프로젝
lshjju.tistory.com
Chrome Developer Tools
https://lshjju.tistory.com/794
Chrome Developer Tools
크롬 개발자 도구(Chrome DevTools)는 프론트엔드 개발자에게 있어 '현미경'이자 '수술 도구'와 같습니다.브라우저에서 직접 코드를 수정하고, 성능을 측정하며, 버그를 찾아내는 핵심적인 사용 방법
lshjju.tistory.com
Coding font install
https://github.com/naver/d2codingfont
GitHub - naver/d2codingfont: D2 Coding 글꼴
D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub.
github.com
Code training
02-1 웹 개발, 어디서부터 시작할까
웹 개발을 위해 공부해야 할 기술
웹 개발의 기본 - HTML, CSS, 자바스크립트
웹 문서의 뼈대를 만드는 HTML
웹 문서를 꾸미는 CSS
사용자 동작에 반응하는 자바스크립트
프런트엔드 개발을 위한 기술
백엔드 개발을 위한 기술
02-2 웹 개발 환경 설정하기
웹브라우저
웹 편집기
실습 - VS Code 설치하고 환경 설정하기
1단계 VS Code 설치하기
2단계 한글로 설정하기
3단계 색 테마 선정하기
실습 - 작업 폴더 추가하기
1단계 자료실에서 예제 파일 내려받고 압축 풀기
2단계 VS Code에 예제 폴더 추가하기
3단계 작업 폴더에서 코드 파일 열고 닫기
실습 - 간단한 웹 문서 만들기
1단계 새파일 만들기
2단계 코드 입력하기
3단계 작성 결과 확인하기
4단계 마크업하기
5단계 실습 결과 확인하기
결과
https://github.com/lshjju/doit-hcj-new/blob/main/02/results/web.html
웹 개발자 도구 살펴보기
웹 개발자 도구 창 열기
웹 개발자 도구 한글로 표시하기
HTML 코드 살펴보기
코드 접기 및 펼치기
웹 개발자 도구 창의 위치 옮기기
https://github.com/lshjju/doit-hcj-new/blob/main/02/index.html
실습 - VS Code의 글꼴, 글자 크기, 탭 크기 변경하기
1단계 코딩 글꼴 설치하기
2단계 코딩 글꼴 변경하기
3단계 글자 크기 조절하기
4단계 탭 크기 조절하기
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! HTML 웹 표준의 정석' 카테고리의 다른 글
| Form and input tag (0) | 2025.11.06 |
|---|---|
| text / list / table / image / multi media / hyper link (0) | 2025.11.06 |
| HTML and Semantic tag (0) | 2025.11.06 |
| About Web (0) | 2025.11.06 |