수달이네 기술 블로그

개발자가 생성형 AI의 도움을 받아 코드를 작성하는 것.결과물을 만들어내는 주체와 주도건이 사람보다 생성형 인공지능에 있다.도구github Copilot: gitHub와 OpenAI가 공동 개발한 AI 코딩 도구https://github.com/features/copilot?locale=ko-KRCursor: 코파일럿을 통해서 AI기반 코드 생성기가 핫하니 다른 여러 회사들이 코파일럿과 유사한 AI코드생성기를 만들었는데 이중 하나Codex: OpenAI에서 개발한 AI코딩 에이전트Gemini, Calude Code, ChatGPT….진행단계HTML 뼈대 작성Index.html : 로그인 버튼, 회원가입 버튼, 메인페이지signup.html: 회원가입 폼login.html: 로그인 폼CSS 스타일링색상, ..

DOM(Document Object Model)html태그를 하나씩 객체화 한것을 의미한다.html 페이지 내용과 모양을 제어하기 위해 사용하는 객체로 html태그당 DOM객체가 하나씩 생성된다.html태그의 포함관계에 따라 부모, 자식, 형제관계로 구성된다.html요소들은 모두 (Node)라는 객체로 구조화된다.DOM APIDOM을 다루기 위한 프로그래밍 인터페이스(메소드, 속성)브라우저가 제공하는 JavaScript 객체.메소드 집합document.getElementById(), document.querySelect(), element.innterHTML등DOM Tree구조문서 순서를 트리 형태로 표현최상위노드: document주요노드요소노드(Element Node) -HTML태그속성노드(Attrib..

자바스크립트웹 브라우저에서 동작하는 언어인터프리터 언어, 스크립트 언어브라우저 에서 제공하는 엔진에 의해 실행됨.Node.js자바스크립트가 웹 브라우저 없이도 작동할 수 있는 환경을 제공크롬의 v8엔진을 기반으로 작동한다.Node.js가 나오면서 자바스크립트는 독립적인 언어로 사용 가능해졌다.웹 브라우저와 상관없는 여러 앱도 만들 수 있고, 서버도 만들 수 있다.한가지 프로그래밍 언어로 웹사이트 전체를 만들 수 있다.설치Node.js웹사이트 :https://nodejs.org/ko/download해당 웹사이트에서 설치VSCODE 내에 확장 runner사용Node.js테스트.js파일을 만든 후 아래와 같은 코드를 작성해 저장>실행 해본다.console.log("hello");// [Running] node..

display: flex:부모 요소에 display:flex; 를 주면 그 안의 직계 자식들을 한 줄에 정렬하는 레이아웃 모드가 된다.부모: flex컨테이너자식: flex아이템 A B C .box{ border:1px solid black; width: 500px; height: 500px; display:flex;}.div-box{ border: 1px solid black; width:100px; height: 100px;}flex를 적용하면 위와 같이 변한다.왼쪽은 적용 전, 오른쪽은 적용 후이다.기본적으로 flex를 적용하게 된다면(display:flex)메인축(main axis = 좌 우교차축(cross ax..

태그종류 html 주석/* */ css주석 ~ ~ 제목태그 - 블록요소, 굵은글씨-인라인요소 인라인요소 기울임 글씨 - 인라인요소 한줄 전체 가로선-블록요소 줄바꿈 - 블록요소,, 리스트 태그-블록요소, , , 테이블태그-블록요소 링크태그 - 인라인요소 이미지태그-인라인요소, 입력태그-인라인요소 블록요소블록요소와 인라인요소블록 요소: 한줄을 전부 차지함자동 줄바꿈, 안에 인라인요소, 다른 블록요소를 포함함.인라인요소: 줄바꿈 없이 같은 줄에 이어짐텍스트 일부, 작은 단위를 꾸밀 때 사용블록 요소안에서만 정상적으로 꾸밈CSS(Cascading Style Sheets)HTML로 만든 웹 문서의 스타일 담당인라인 스타일스타일을 적용시킬 태그에 style속성을 사용내부 스타일영역에 태그를 추가하여 사..