반응형 잡동사니/Javascript Project6 Porfolio Page - (6) Javascript: DOM Index 1. DOM 2. Node 3. CSSOM 4. Rendering 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. DOM DOM(Document Object Model) - 2. Node DOM Node - EventTarget을 상속 (EventTarget Method) - EventTarget.addEventListener(): 이벤트 추가 - EventTarget.removeEventListener(): 이벤트 제거 - EventTarget.dispatchEvent() (Node Property) - (Node Method) - 3. CSSOM CSSOM(CSS Object Model) - CS.. 2024. 2. 11. 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 - (4) Javascript: 기본 Index 1. 1 2. 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. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. Reference [Type: Title(Subtitle)] URL [Type: Title(Subtitle)] URL 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. [Project] Porfolio Page - (2) HTML, CSS Index 1. HTML: 뼈대 잡기 2. HTML 예제 3. CSS: 꾸미기 4. CSS Layout 5. CSS Flex Box 6. CSS Grid 7. CSS 예제 8. CSS 새기능(2022) Reference 1. HTML: 뼈대 잡기 HTML - HTML은 웹 페이지 표시를 위해 개발된 마크업 언어 - 마크업 업어: 태그를 이용한 구조적 언어 - HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타냄 - 링크, 인용, 그외의 항목으로 구조적 문서를 만들 수 있는 방법을 제공 - 웹을 이루는 가장 기본적인 구조 - 웹의 구조와 의미를 표현 - W3C에서 표준화 - 브라우저 호환성에 따라 사용 가능한 tag가 다름. (HTML 구성 요소) - !DOCTYPE: 지원되는 파일 .. 2024. 2. 11. [Project] Porfolio Page - (1) 환경설정, GitHub Blog Index 1. 환경설정 2. GitHub Blog 생성 3. Emmet Reference 1. 환경설정 개발 도구 - VSCode 설치 - command palette 단축키(cmd + shift + P) VSCode Extension 설치 - Material Theme - Material Icon Theme: - Prettier: 코드 포맷을 유지 - Bracket Pair Colorization Toggler - Indent Rainbow: 들여쓰기 정도를 구분 - Auto Rename Tag: 시작태그 변경시 종료태그도 변환 - Css Peek: HTML 파일에서 Css 선택시 해당 위치로 이동 - HTML CSS Support - Live Server: 실시간으로 HTML 파일 변화를 보여줌 -.. 2024. 2. 11. 이전 1 다음 반응형
