목록2024/07 (59)
연습장
https://poiemaweb.com/js-hello-world Hello world | PoiemaWeb모든 브라우저는 자바스크립트를 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. 뿐만 아니라 Node.js도 자바스크립트 엔진을 내장하고 있다. 따라서 자바스크립트는 브라우저와 Node.js 환경poiemaweb.com 자바스크립트는 브라우저와 Node.js 환경에서 실행할 수 있다. 브라우저HTML, CSS, 자바스크립트를 실행하여 웹 페이지를 화면에 렌더링클라이언트 사이드 Web API를 지원 (DOM, BOM, Canvas, XMLHttpRequest, Fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web worker) N..
ESLintJavaScript 코드에서 문제를 식별하고 코드 스타일을 검사하는 도구입니다.일관된 코딩 스타일을 유지하고, 잠재적인 버그를 사전에 발견하여 코드 품질을 향상시키는 데 사용 ESLint의 주요 기능과 특징은 다음과 같습니다:문법 검사(Syntax Checking):ESLint는 JavaScript 코드의 문법을 엄격하게 검사하여 잘못된 구문이나 문법 오류를 식별합니다.예를 들어, 세미콜론 누락, 괄호의 정확한 사용 등을 검사합니다.코드 스타일 검사(Code Style Checking):ESLint는 설정 파일을 통해 정의된 코드 스타일 규칙을 기반으로 코드의 일관성을 검사합니다.들여쓰기, 공백 사용, 변수 선언 방식 등 여러 가지 스타일 규칙을 지원하며,개발 팀이 공통된 코딩 스타일을 유지할..
Webpack모듈 번들러(Module Bundler) , 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, 이미지 등)을 모두 모듈로 보고이를 번들링하여 하나의 또는 여러 개의 번들 파일로 만들어주는 도구프론트엔드 개발에서 모듈간의 의존성 관리와 번들링 작업을 효율적으로 수행하기 위해 사용 번들 파일 (Bundle file)하나로 묶어서 관리하고 제공하는 파일네트워크 요청 수를 줄이기 때문에 로딩 시간이 단축코드 최적화 및 압축이 가능하여 파일 크기를 줄이고 성능을 향상모듈 간의 의존성을 관리필요한 경우 코드 스플리팅(Code Splitting)을 통해 필요한 모듈만 로딩 지원 번들링 (Bundling)프론트엔드 개발에서 여러 개의 파일(예: 자바스크립트 파일, CSS 파일, 이..
https://poiemaweb.com/js-introduction Introduction | PoiemaWeb자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소중 하나로 웹브라우저에서 동작하는 유일한 언어로 1995년 Brendan Eich(Nescape)가 Navigator 2를 위하여 개발한 웹페이지에 포함되는 스크립트 언어poiemaweb.com 정적인 HTML을 동적으로 표현하기 위해 경량의 프로그래밍 언어“Mocha”로 명명되었다. 그해 9월 “LiveScript”로 이름이 변경되었고, 12월 “JavaScript”로 최종 명명 크로스 브라우징 이슈 : 브라우저에 따라 웹 페이지가 정상 동작하지 않음 모든 브라우저에서 동일하게 동작하는 표준화된 자바스크립트에 대한 필요성이 제기..
https://poiemaweb.com/coding Progmamming | PoiemaWeb프로그래밍은 수행되어져야 하는 명령을 컴퓨터에 전달하는 일종의 커뮤니케이션이다. 이때poiemaweb.com 1. 프로그래밍이란? 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이때 요구되는 것이 문제 해결 능력이다. 문제(요구사항)을 명확히 이해하는것 - 복잡함을 단순하게 분해 - 자료를 정리하고 구분 - 순서에 맞게 행위를 배열 2. 프로그래밍 언어 인간이 이해할 수 있는 구문으로 구성된 프로그래밍 언어를 사용하여 프로그램을 작성한 후번역기를 사용하여 (컴파일러, 인터프리터)컴퓨터가 이해할 수 있는 기계어로 변환 컴파일러(compiler)전체 파일을 스캔하여 한꺼번에 번역한다.초..
https://poiemaweb.com/bootstrap-basics Bootstrap Basics | PoiemaWebBootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다. HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, 이미poiemaweb.com Bootstrap은 빠르고 간편한 반응형 웹 디자인을 위한 open-source front-end framework이다. HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, ..
https://poiemaweb.com/css3-removing-white-space-image-element Typography | PoiemaWeb컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.poiemaweb.com 컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다. 문제 원인 : image 요소는 inline 요소로 텍스트 취급되어서 위와 같은 문제가 발생한다. 해결법 1. 해당 요소를 block 요소로 변환 해결법 2.vertical-align 프로퍼티의 기본값은 baseline인데 이를 변경하여 이미지 표시 위치를 조정하는 것이다. 해결법 3?img 의 상위 요소에 display : flex
https://poiemaweb.com/css3-centering CSS3 Horizontal & Vertical Centering | PoiemaWebCSS를 사용한 HTML 요소의 수평/수직 중앙 정렬 (Horizontal & Vertical Centering)poiemaweb.com 1. 수평 정렬(Horizontal Align) 1.1 inline/inline-block 요소 정렬 대상 요소(텍스트 또는 링크 등의 inline 레벨 요소 또는 inline-block 레벨 요소)의 부모 요소에 text-align: center;를 지정한다. 1.2 block 요소 정렬 대상 요소에 너비를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 auto를 지정한다. 정렬 대..
https://poiemaweb.com/css3-flexbox CSS3 Flexbox Layout | PoiemaWeb poiemaweb.com float 가 말그대로 둥둥 떠다니기 때문에 flex 를 배우고 나서는 거의 쓰지않았던거같다. 1. Introduction CSS3의 새로운 layout 방식이다.요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. Flexbox의 장점1줄의 코드 추가로 수평 정렬이 가능하다.요소의 상하좌우 정렬, 순서 변경이 간단하다.요소가 간격 조절이 간단하다.서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.비교적 최신 브라우저가 아니..