html (6) 썸네일형 리스트형 AngularJS, HTML Rendering AngularJS가 DOM 트리를 먼저 구성합니다.Directive, Component들 중에 Custom Tag를 Brower Engine이 이해할 수 있는 HTML Element로 변환합니다.이 때는 DOM을 조작할 수 있지만 아직 지시자와 컴포넌트 간에 연결이 되지 않은 상태이자 아직 Data가 반영되지 않은 상태이기 때문에 실제 View라고 볼 수 없습니다. 그저 DOM 덩어리들이라고 보면 됩니다.자신의 컴포넌트 혹은 지시자의 scope를 생성하고 Data와 Element를 링크하여 View를 만듭니다.자식 요소들까지 링크가 됩니다.초기 DOM Parsing → Directive, Component 찾기→ HTML 변환 → Controller Scope 초기화 → Data Binding → Vie.. HTML, Input 파일탐색기, Finder FileFormat 지정 서론 파일을 올릴 수 있는 웹사이트를 만들며 이전에는 조건문을 이용해 직접 파일형식을 지정해주었습니다. input 태그에 대한 공식문서를 찾아보니 이미 HTML에 기능이 있기에 가볍게 정리해보려 합니다. (이래서 공식문서 참조가 참 중요해 그냥 막 갖다 쓰면 안대) input 태그는 다양한 값을 사용자로부터 입력받습니다. File, Date, Number, CheckBox, radio 등이 올 수 있습니다. 블로그, 학교, 정부기관, 채용사이트등 웹사이트에서는 사용자가 파일을 첨부할 일이 생깁니다 위에 코드와 같이 type을 파일로 지정하면 사용자의 로컬환경에서 파일을 첨부할 수 있게 됩니다. 이 때 사용자로부터 특정 파일의 형식만을 지정하고 싶다면 어떻게 해야하는가? (필자는 멍청하게 자바스크립트로 직.. Browser Rendering 웹사이트를 방문할 때 서버측에 static 파일들(html, css, js 파일 등)을 요청합니다 이 때 static 파일들을 어떻게 클라이언트의 화면에 렌더링 하는가 알아봅시다. ※ 여기서 잠깐 렌더링이란? -> HTML, CSS, JS로 작성된 문서를 Parsing하여 브라우저에 시각적으로 출력하는 것을 말한다 Index.html 네트워크적인 개념을 간단히 설명하겠습니다 (네트워크 지식이 있다면 스킵해도 좋습니다) 인터넷이란 사용자와 사용자간에 통신, 곧 데이터를 주고 받는 일입니다. 우리가 친구 집을 찾아가기 위해서는 친구의 주소를 알아야 하듯 서로간의 연결을 위해서는 I.P Address를 알아야 합니다. 하지만 모든 이의 I.P Address를 외울 수 없을 뿐더러 숫자로 각 주소를 구분하기가 .. html, css, javascript 정적파일 생성 쉘 스크립트 본격적인 JS 공부와 프로젝트들을 진행하며 매 번 세가지 파일을 만드는 것이 귀찮았습니다. 매 번 동일한 형식의 파일을 만드는걸 자동화할 필요성을 느꼈고 실행에 옮겼습니다. 참고로 환경은 macOS(Unix) 기준입니다 1. 쉘 스크립트 #!/bin/bash echo " Hello, World! " > index.html touch script.js touch styles.css echo "Files created: index.html, script.js, styles.css" 빈 css, js 파일을 만들고 해당하는 css, js파일과 연결된 index.html 파일을 만드는 쉘 스크립트입니다. 2. PATH 설정 해당하는 코드를 가진 yourScript.sh 파일을 /usr/local/bin 경로 폴.. Intersection Observer let observer = new IntersectionObserver((entries) => { # 요소 발견시 함수 실행 -> Call back 함수 entries.forEach((entry) => { # 요소가 화면에 진입했는지 확인 if (entry.isIntersecting) { entry.target.style.opacity = 1; } else { entry.target.style.opacity = 0; } }); }) let div = document.querySelectorAll('div') observer.observe(div[0]) let observer = new IntersectionObserver(callback, options); 브라우저 제공 API로 특정 요소들을 관찰 혹은.. Live Server 설치 및 실행 1. VSCode Extention 이동 2. Live Server 검색 및 설치 3. Go Live Click 실행 html, CSS, JS 코드 수정시 새로고침없이 반영가능합니다. 이전 1 다음
