반응형 웹10 [포트폴리오 페이지] 2단계: About Me 섹션 추가 2단계: About Me 섹션 추가2.1 About Me 섹션 HTML 작성index.html 파일에서 About Me 섹션에 내용을 추가합니다.index.html (수정된 부분) About Me 안녕하세요! 저는 프론트엔드 개발자 홍길동입니다. 웹 개발에 열정을 가지고 있으며, 최신 기술을 배우고 활용하는 것을 좋아합니다. HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 사용자 친화적이고 반응형 웹사이트를 만드는 데 관심이 있습니다. 저는 다양한 프로젝트를 통해 문제 해결 능력을 키워왔으며, 팀워크와 커뮤니케이션 스킬을 중요하게 생각합니다. 앞으로 더 많은 경험을 쌓고, 더욱 성장하는 개발자가 되고자 합니다.2.2 About Me 섹션 스타일링styles.css 파일에.. 2024. 6. 16. [포트폴리오 페이지] 1단계: 프로젝트 초기 설정 1단계: 프로젝트 초기 설정1.1 프로젝트 디렉토리 생성로컬 환경에서 프로젝트 디렉토리를 생성합니다.mkdir MyPortfoliocd MyPortfolio1.2 Git 초기화생성된 프로젝트 디렉토리에서 Git 저장소를 초기화합니다.git init1.3 기본 파일 생성프로젝트의 기본 파일을 생성합니다.touch index.html styles.css scripts.js README.md LICENSE1.4 README.md 작성README.md 파일을 작성하여 프로젝트 설명을 추가합니다. 다음 내용을 추가합니다. # MyPortfolioMyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다. 이 웹사이트는 나의 경력, 프로젝트, 연락처 정보를 포함하고.. 2024. 6. 16. Porfolio Page - (5) Javascript: Web API Index 1. Web API 2. 브라우저 구조 3. 3 4. 4 5. 4 6. 4 7. 4 8. 4 9. 4 10. 4 11. 4 12. 4 13. 4 14. 4 15. 4 16. 4 Reference 1. Web API Web API - API(Application Programming Interfaces)는 - Web API (Web API 종류) - DOM APIs: 웹 페이지의 요소를 생성/삭제/스타일변경 조절 - Network APIs: 서버와 통신 기능 제공 - Graphics APIs: 그래픽 관련 기능 제공 - Audio/Video APIs: 멀티미디어 관련 기능 제공 - Device APIs: 디바이스 상태 정보 확인 - File APIs: 사용자의 파일 정보 확인 - Storage .. 2024. 2. 11. Porfolio Page - (3) 반응형 웹 Index 1. 반응형 웹 2. 반응형 웹 예제 3. PWA 4. PWA 예제 5. 4 Reference 1. 반응형 웹 반응형 웹 디자인(Responsive Web Design) - 반응형 웹사이트를 통해 사이즈에 따라 content가 유동적으로 변화하게 구성 - 컨테이너에 맞게 보여짐 - Fluid Layout - flex grid / flex box / % / vw / vh로 구현 - Media Queries로 구현 가능 - Desktop(1024px~) / Tablet(768px~1024px) / Mobile(320px~480px)로 디자인 (사용법) - screen 대신 all, print, speech 가능 - and 대신 not, only, comma(,) 가능 @media screen an.. 2024. 2. 11. [진행 계획표] Year03. 프로그래밍 기본 JavaScript / TypeScript (선택이유) - 웹 개발에 있어 주요 언어 - 프론트 엔드 / 백엔드 모두 사용 가능 (환경 설정) - Windows: Visual Studio Code + Node.js - Mac OS: Visual Studio Code + npm 1) Javascript 기본 문법 - Vanilla Javascript - Modern Javascript - Javascript documentation - Node.js - Node.js documentation - npm 2) Typescript 기본 문법 - Typescript - Typescript 가이드북 3) Frontend - HTML / CSS - CSS documentation - CSS Style Sheet -.. 2023. 9. 16. [컴공 학습 순서] 4. Javascript Javascript + Typescript + Visual Studio Code + Node.js - Vanilla Javascript - Modern Javacript - Node.js - MDN Web Docs - Typescript / Typescript(ko) - npm (Frontend) - Fetch API - Vue / Vue(ko) - React - NextJS - tailwind CSS - styled-components (Backend) - Express - NestJS (AI) - TensorflowJS - Three.js - 생활 코딩 - HEROPY 블로그 - DreamCoding Academy 2023. 8. 19. [컴공 학습 순서] 3. Python Python + Visual Studio Code - Visual Studio Code - 코딩 도장(Python) - Python Docs - pip - 홍정모 연구소(파이썬 추월코스) (Web) - Bootstrap - Django - Django Rest Framework - Flask / Flask(ko) - Fast API (Data Analysis) - Numpy - Statsmodel - Pandas - Matplotlib - Seaborn - Scikit-Learn - Kaggle - Selenium - Requests - Beautiful Soup (AI) - Tensorflow - Pytorch / Pytorch(ko) - 생활 코딩(python 입문) - 나도 코딩(파이썬 프로젝트) .. 2023. 8. 19. [로드맵] 9. 풀스택 1. Javascript + Typescript 2. Javascript 알고리즘 3. 생활 코딩 - HTML: https://www.youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb - CSS: https://www.youtube.com/playlist?list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B - Javascript: https://www.youtube.com/playlist?list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf 4. Frontend - 링크(입문자에게 추천하는 HTML, CSS): https://heropy.blog/2019/04/24/html-css-starter/ - Reac.. 2023. 7. 31. [로드맵] 8. 웹 백엔드 1. Java + Kotlin 2. Spring - 링크(김영한의 Spring): https://www.inflearn.com/roadmaps/373 2023. 7. 31. [Javascript 로드맵] 자바스크립트 로드맵 - Notion Tutorial : https://www.notion.so/ko-kr/help/guides - Git Tutorial : https://git-scm.com/book/en/v2 - Visual Studio Code : https://code.visualstudio.com/docs - VSCode Extension: Liver Server / Javascript Code Snippets / Prettier / ESLint - (MacOS)NVM으로 Node 관리: https://dev-yakuza.posstree.com/ko/environment/nvm/ - 생활코딩 : https://opentutorials.org/course/3084 - Heropy 블로그 : https://heropy.. 2023. 4. 16. 이전 1 다음 반응형
