반응형 잡동사니14 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. 읽어볼 글 목록 https://wikidocs.net/197539 02) Django REST Framework 설정 [TOC] Django REST Framework는 Django 프로젝트에서 RESTful API를 구축하기 위한 필수 도구입니다. 이 도구는 강력하고 유연한 툴킷을 제공하여… wikidocs.net https://yozm.wishket.com/magazine/detail/2093/ “개발자가 수학에 투자하는 시간은 절대 낭비가 아닙니다” C++ 창시자 인터뷰 | 요즘IT 본문은 ‘Evrone’이라는 해외 IT 아웃소싱 기업이, C++ 제작자이자 최초 구현자인 비야네 스트롭스트룹(Bjarne Stroustrup)을 인터뷰한 글입니다. 비야네 스트롭스트룹은 1978년부터 C++를 개발하였고, C+ yozm.. 2023. 12. 18. [CLI] Mac OS 터미널 명령어 1. caffeinate: 절전모드 방지 -d(디스플레이) - t 숫자(몇초) 2. defaults write com.apple.finder CreateDesktop 0; kill all Finder: 0(숨기기) 1(보이기) 3. textutil -connvert 형식 무서.docx: 파일 변환 4. networkQuality: 속도 확인 5. screencapture -T 3(3초 대기) -t pdf(형식) -c test.png(클립보드) ~ ....jpg: 원하는 폴더에 형식 자유 6. sips -Z 888(가로크기) 이미지파일 7. say 내용 -v 화자(kyoko) -o ~.png 8. jot 숫자 -r(랜덤) -w(문자): 랜덤 숫자 9. ~ | pbcopy : pbpaste 10. ~ | j.. 2023. 10. 21. [일상 스킬] PT발표 스킬 1. 어그로 끌기 - 의미 부여 / 과거성과를 숫자로 표현 / 흥미 있는 이야기 2. 어려운 이야기는 개념 정리부터 시작 3. 중간 중간에 유머로 환기하기 4. 그래프와 이미지를 활용(마주한 문제를 그래프를 통해 단순하게 보여줌) 5. 문제점 파악 -> 해결방안을 빠르게 전달 6. 다른 사람의 말을 효과적으로 인용(신뢰성있게 느껴짐) 7. 중간 중간 정리를 하면서 내용을 복습 => 대본을 최소화하여 자연스럽게 발표 - 발표의 제왕 스티브 잡스의 PT 스킬 7가지 | 미키피디아 2023. 9. 24. [환경 설정] M2에서 가상환경 구축 도구 설치 Docker 이용하기 1) Docker on Mac 을 사용하여 설치 2) brew install --cask docker을 사용하여 설치 UTM 이용하기 - https://mac.getutm.app/ 에서 UTM 다운로드(App Store 이용시 유료) 2023. 9. 9. 이전 1 2 다음 반응형
