개발 무지렁이

vh (view height) 보여주는 크기만큼 꽉차게 💡 min-height: 100vh? 화면높이와 같거나 크도록 (더 늘어날 여지가 있다) [index.html] 1차메뉴아이템 1 1차메뉴아이템 2 1차메뉴아이템 3 메인 [style.css] #container { min-height: 100vh; display: flex; flex-direction: column; } #main { flex-grow: 1; } 📌 푸터(footer) : footer는 화면 밑에 딱 붙어야 한다. (main content의 크기와 상관없이) 최소높이를 화면높이만큼 설정해놓고, main을 flex-grow로 커질수 있는만큼 커지게 하면 메인의 크기가 얼마큼이던 footer는 항상 화면 밑에 붙는다.

𐂂 자바스크립트 (JavaScript) 웹페이지의 보조적 기능을 수행하기 위한 경량 프로그래밍 언어로 시작 프론트엔드(front-end)와 백엔드(back-end)를 모두 다루는 '범용 프로그래밍 언어'로 성장 ➼ 🦔 JavaScript의 표준화 모든 브라우저에서 동작하기 위한 버전관리 [🗿 ECMA: 컴퓨터 시스템 표준을 관리하는 기구] ECMAScript6(ES6) : 범용 프로그래밍 언어로써 갖춰야할 기능을 대거 도입한 표준화된 자바스크립트 버전 JavaScript = ECMAScript🦴 + 클라이언트사이드 Web API (브라우저 별도지원) 𖠃 V8 자바스크립트 엔진 자바스크립트 코드를 빠르게 컴파일 및 실행, JIT(Just-In-Time) 컴파일러 도입 (그 밖에도 옵티마이저[코드 실행패턴 ..

인터프리터 언어, JavaScript 웹페이지의 보조적 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어로 시작하여 브라우저의 '표준 프로그래밍 언어'로 자리잡았다. ⚠️ 되도록이면 뒤에쓴다 or onload를 사용하거나 ⚠️ 📌. JavaScript의 최고조상 window 🌝 인터프리터 언어 -> 매번 런타임에 한줄씩 바이트코드로 변환후 실행 (코드 실행속도 느림) -> 실행파일 생성x 🌚 컴파일러 언어 -> 컴파일 타임과 실행단계 분리 (코드 실행속도 빠름) -> 실행파일 생성 크로스 브라우징 이슈와 표준화된 ECMAScript6 ❗ 크로스 브라우징(Cross Browsing) 이슈 : 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 현상을 말한다. 모든 브라우저에서 정상적으로 동작..

프로그래밍 언어란 컴퓨터에게 실행을 요구하는 일종의 '커뮤니케이션' 수단이다. (이를, 컴파일러/인터프리터(번역기)를 통해 기계어로 변환한다.) 프로그래밍이란 요구사항 -> (컴퓨팅적사고) -> 분해,패턴화,추출 -> (문맥, 문법) -> 코드 프로그래밍이란 '요구사항'을 명확히 이해한후, 작은 단위로 분해, 패턴화, 추출하여 (단, 평가가능하도록 정의, 판단상태/판단시기/판단기준) => 컴퓨팅적 사고 의미있는 '문맥'안에서 올바른 '문법'을 통해 코드로 표현하는 것을 말한다. 문법 (1) 변수와 값 => 저장, 참조 (2) 키워드 (3) 연산자 => 연산, 평가 (4) 표현식과 문 (5) 조건문, 반복문에 의한 흐름제어 => 의미 (6) 함수 => 재사용 (7) 객체 / 배열 => 자료구조화

기능 무효화 javascript:void(0); [~.html] javascript:void(0); 으로 a태그의 '기능을 무효화' 시키고 getElementsByClassName을 이용하여 해당 element을 찾은 다음, addEventListener를 이용하여 클릭했을 시, 알림창(confirm)이 뜨게한 다음, location.href의 값으로 this.dataset.uri를 넣어주어 th:data-uri로 넣어주었던 값을 불러들인다. [layout.html]

nth-child() div:nth-child(1) {} # div이면서, 전체 태그 기준 첫번째 child div:first-child {} div:nth-last-child(1) {} # div이면서, 전체 마지막 태그 기준 첫번째 child div:last-child {} div:nth-child(2n+1) {} # div이면서, 전체 태그 기준 홀수번째 child div:nth-child(2n) {} # div이면서, 전체 태그 기준 짝수번째 child