반응형 프로그래밍9 문서 객체 모델(DOM)과 노드의 기본 개념 문서 객체 모델(DOM)은 웹 개발에 있어서 매우 중요한 역할을 합니다. DOM을 자바스크립트로 제어하여 화면에 새로운 요소를 추가하거나 기존 구성 요소를 변경하는 등 다양하게 활용할 수 있습니다.이 글은 DOM의 기본 개념을 설명합니다.문서 객체 모델(DOM)이란?DOM이란, 웹 브라우저가 html 문서를 해석한 것을 객체화한 모델 구조를 의미합니다. html의 구성 요소인 등을 트리 구조의 객체 모델로 변환하여 이 트리 구조를 DOM 트리라고 합니다. 각 구성 요소들은 노드라고 하며 서로 부모, 자식, 형제 관계를 형성하게 됩니다. 자바스크립트로 DOM을 조작해 페이지 요소를 변경하거나 추가하는 등의 동적으로 다룰 수 있습니다.노드의 종류와 예시DOM은 html 문서의 각 요소를 노드로 나타냅니.. 2024. 10. 6. 스마트폰 크기에 맞추는 반응형 웹 디자인하기 | 미디어쿼리 화면 크기가 다양한 기기에서 웹페이지를 볼 때 모두 같은 크기의 요소와 디자인을 본다면 한 화면에 내용이 잘리거나 너무 작게 표시되어 보는 데 불편함을 겪을 것입니다. 이 글은 다양한 기기에서 최적화된 웹페이지를 구현하는 반응형 웹 디자인의 기본 개념을 설명합니다.반응형 웹 디자인이란?반응형 웹 디자인은 다양한 디바이스 (데스크톱, 태블릿, 스마트폰 등)에서 웹 페이지의 콘텐츠가 디스플레이 크기에 맞게 최적화된 스타일로 조정되도록 하는 디자인 기법입니다. html, css, 미디어쿼리를 사용하여 구현되며, viewport를 설정하고 미디어쿼리를 정의하는 방식으로 화면의 요소들을 유동적으로 조정시킵니다.viewport 설정하기viewport는 디바이스의 화면 크기를 의미하는 것으로, viewport를 설.. 2024. 10. 6. 비주얼 스튜디오 코드 글씨 크기,UI 크기 변경 방법 비주얼 스튜디오 코드 글씨 확대/축소비주얼 스튜디오 코드에서 코드를 작성하다 보면 화면의 글씨가 너무 작아 불편할 때가 있다. 그럴 때 수행할 수 있는 글씨 크기를 확대 및 축소하는 방법과 단축키, 인터페이스 UI 크기 변경 방법들을 정리하였다.목차메뉴 탭을 이용하여 글씨 크기 변경단축키를 이용하여 글씨 크기 변경에디터 글씨 크기 변경Zoom Level을 통한 인터페이스 크기 변경메뉴 탭을 이용하여 글씨 크기 변경메뉴 탭을 이용한 글씨 크기 변경으로 실시간으로 글씨 크기를 조절할 수 있다. 메뉴, 탐색기 등의 전체적인 UI 크기 변경에 해당한다. 영어비주얼 스튜디오 코드 상단 메뉴바의 'View'를 클릭한다.'Apperance' 탭의 'Zoom in'을 눌러 글씨를 확대한다.'Zoom Out'을 눌러 .. 2024. 7. 29. 비주얼 스튜디오 코드 한영 언어 변경하기 비주얼 스튜디오 코드 한영 언어 변경하기비주얼 스튜디오 코드에서 인터페이스 언어를 한글 또는 영어로 변경하는 방법을 설명한다. 원하는 언어 팩을 설치하여 언어를 변경할 수 있다.영어를 한국어로 변경하는 방법비주얼 스튜디오 코드 언어를 한국어로 변경하기 위해서는 먼저 한국어 언어 팩을 설치해야 한다.비주얼 스튜디오 코드를 연다.왼쪽 사이드바의 'Extentions' 아이콘을 클릭하거나 단축키 'Ctrl + Shift + X' 키를 눌러 확장 메뉴를 연다."korean language pack"을 검색한다."Korean Language Pack for Visual Studio Code"를 찾아 'install'을 클릭해 설치한다. 언어 팩을 설치했다면 비주얼 스튜디오 코드의 기본 언어를 변경할 수 있다. 우.. 2024. 7. 29. 리액트 App.js 수정 반영안됨, UI 변경 안될 때 해결 방법 문제 발생 시점리액트 초반 수업 중 App.js 내용을 변경 후 저장 해도 웹서버에서 UI가 변경되지 않는 문제가 발생했다. 문제 발생 경위에러메세지가 발생하게 된 경위를 기록하였다. 1) 서비스를 위한 배포본 어플리케이션을 만들기 위해 build 폴더를 생성하였다.실행 과정 : 비주얼 스튜디오 - 리액트 앱 - 터미널에 명령어 입력 -빌드 명령 실행npm run build2) 빌드 폴더에 있는 index.html을 서비스하는 웹서버를 실행시키는 명령어를 입력하였다.npx serve -s build3) 결과물인 'localhost:3000' 를 ctrl + 우클릭하여 웹서버에 접속하였다.4) 컴포넌트를 생성하고 실습하기 위해서 REACT-APP의 src-App.js의 내용 수정 및 저장하였다.5) 새로.. 2024. 7. 18. npm error code ENOENT | 비주얼스튜디오 코드 에러메세지 해결 방법 에러 발생 시점 리액트 초반 수업 중 리액트 앱 개발 서버 시작부터 에러가 발생했다. 에러 발생 경위 에러메세지가 발생하게 된 경위를 기록하였다. 1) 비주얼 스튜디오 코드에서 'react-app' 폴더를 연 후 상단 메뉴의 터미널 - 뉴 터미널을 누른다.2) 터미널에 입력한 명령어 :npx create-react-app .3) 발생한 에러메세지 : npm error code ENOENTnpm error path C:\Users\user\AppData\Roaming\npmnpm error errno -4058npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\user\AppData\Roaming\npm'npm error enoent T.. 2024. 7. 17. 생활코딩 WEB2-JAVASCRIPT 필기 자바스크립트 이 수업은 총 37개의 동영상, 4시간 24분의 재생시간으로 이루어진 수업입니다. 1. 수업소개 web1 html을 먼저보고 이 수업을 보아야한다. html의 등장만으로 혁명적이지만, 사용자와 상호작용하는 웹페이지를 만들고 싶다는 욕망. html은 정적이다. 게임은 사용자의 조작에 반응해서 프로그램이 움직인다. 사람들은 웹페이지가 게임처럼 동적으로 사용자와 상호작용할 수 있게 되기를 원함. 그래서 태어난 기술이 javascript. 이제 웹은 html을 이용해서 웹페이지를 우선 만든 후에, 그렇게 만들어진 웹페이지를 javascript를 이용해서 사용자와 상호작용할 수 있도록 기능을 추가함으로써 html의 정보와 javascript의 기능을 모두 갖춘 유일무이한 시스템으로 성장했다. 예를.. 2024. 7. 16. 생활코딩 WEB2-CSS 필기 1. web2-css 수업소개 web1 html을 보고나서 이 수업을 들어야한다. html-전자문서, 컴퓨터로 정보를 표현하고 인터넷을 통해 전세계 누구나 볼 수 있게됨. css- 웹페이지를 좀더 아름답고 보기좋은 형태로 만들기 위한 수업. 수업의 내용 1. CSS의 기본 문법 (선택자와 속성) 2. Grid를 이용한 현대적인 레이아웃 제작 방법 3. MediaQuery를 이용해서 다양한 크기의 스크린에 대응하는 방법 2. css가 등장하기 전의 상황 html의 한계 >html에 꾸미는 태그를 추가해도 한계가 있음> 근본적인 한계를 극복하기위해 CSS 등장. html은 검색엔진에게 중요한 정보를 전달. css는 디자인을 나타낼 뿐. 3. css의 등장 * : 기호 사이의 컨텐츠 무시 html과 css는.. 2024. 7. 3. 생활코딩 WEB1-HTML 필기 기본html코드 web html css javascript https://www.w3.org/TR/2011/WD-html5-20110405/index.html"target="_blank"title="html5 specification">html5 specification html5 specification html5 specification html5 specification html5 specification html5 specification html5 specif.. 2024. 7. 1. 이전 1 다음 반응형
