전체 글 (52) 썸네일형 리스트형 풀스택) JS란? 자바 스크립트(JavaScript, JS)는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어이다. 주로 사용자와의 상호작용(클릭, 입력 등)을 처리하거나, 서버와 데이터를 주고받고, 페이지의 내용을 실시간으로 변경하는 데 사용된다. 즉, 자바 스크립트(JavaScript, JS)는 웹에서 "작동" 변화를 만들어 준다.주요 기능을 간단하게 정리하면 아래와 같다. DOM 조작: HTML 요소를 추가, 수정, 삭제 (예: 버튼 클릭 시 항목 추가).이벤트 처리: 사용자 입력 처리 (예: 클릭, 키보드 입력).서버 통신 (AJAX/FETCH): 서버에 데이터 요청하고 응답 처리 (예: 사용자 정보 받아오기).동적 콘텐츠 로딩: 스크롤 시 추가 콘텐츠 로딩 (예: 무한 스크롤).상태 관리: 앱 상태를 동적으.. 풀스택) 태그의 중요성 🐳 태그의 중요성 html요소를 생성할 때, 모든 요소를 div로 만들어 class로 구분할 수 있다. 오래된 코드를 마주할 때 이런 경우가 많을 것이다. 그러나, html에 태그가 괜히 여러가지 있는게 아니다. 태그가 달라도 div 다를 바가 없는 경우가 많은데, 이럴 때의 태그는 구분을 위함이다. 📍 V1 : 모든 요소가 divmenu-box(v1) 메뉴 아이템 1 메뉴 아이템 2 메뉴 아이템 3 메뉴 아이템 4 📍 V2 : 덩어리 기준 전용태그 사용menu-box(v2) 메뉴 아이템 1 메뉴 아이템 2 메뉴 아이템 3 .. CSS Diner CSS Diner란?CSS Selector들에 대해 쉽고 재밌게 배울 수 있는 게임이다.정답이 꼭 한가지만은 아니여서, 자유롭게 생각할 수 있도록 잘 해놓은 것 같다.단계별로 내용을 정리해보았다.오른쪽 링크를 통해 플레이 할 수 있다.👉https://flukeout.github.io/ Level. 1 - 유형 선택자(Type Selector)유형 선택자는 노드 이름을 사용해 요소를 선택한다. 문서 내에서 주어진 모든 유형의 모든 요소를 선택한다.plate 유형의 모든 요소를 선택하고 있다.plate{/* Styles would go here. */} Level. 2 - 유형 선택자(Type Selector) 2bento 유형의 요소를 모두 선택하고 있다.bento{/* Styles would go h.. 풀스택 프론트 위키 🥰 수업페이지🥰https://codepen.io/hjyee/full/BaXMvZm 😊 수업 코드펜 & 개념😊 💎 1일차 개념 📍 메뉴 만들기 : 바로 이동하기 🎯 수업 코드펜 📌 n차 메뉴 만들기 💎 2일차 개념 📍 태그의 필요성 : 바로 이동하기 📍 position : 바로 이동하기 🎯 수업 코드펜 📌 태그의 필요성 📌 position 📌 텍스트 생략... 📌 가상요소 📌 transition 💎 3일차 개념 📍 flex 개구리 & flex-grow : 바로 이동하기 flex 디펜스 : 바로 이동하기 .. flex 디펜스 flex 디펜스는 flex 개구리를 이어서 flex를 연습할 수 있는 간단한 게임이다. 정답을 정리했고, 풀었을 때 조금 시간이 걸렸던 것만 부가적으로 글을 적었다. flex 디펜스 링크: http://www.flexboxdefense.com/ 1단계.tower-group-1 { display: flex; justify-content: center;} 2단계.tower-group-1 { display: flex; justify-content: flex-end;}.tower-group-2 { display: flex; justify-content: center;}.tower-group-3 { display: flex; justify-content: flex-end;} 3단계.tower-group-.. AJAX AJAX 간단 요약Asynchronous JavaScript And XML서버와 비동기적으로 데이터 주고받는 자바스크립트 기술을 의미 AJAX 이해에 필요한 사전지식: 서버서버: 데이터 요구하면 데이터 보내주는 프로그램필수 요구 정보: URL, 요청방식(GET, POST ), 파라미터, 리턴값 타입 새로고침없이 서버와 비동기 통신하는 JS코드비동기 통신: 프로세스의 완료를 기다리지 않고 동시에 다른 작업을 처리하는 방식장점: 새로고침이 없어 웹페이지 전환이 부드러워짐 사용예시1. 바닐라 JSdocument.getElementById('loadData').addEventListener('click', function() { const xhr = new XMLHttpRequest(); xhr.op.. 플로우 차트 웹5 수업페이지 기획, 스토리, 설계, 디자인 선택할 것디자인에 중점?기능에 중점? 눈에 잘 보이는 것불편한 것을 개선하는 사람 // 1차스터디모임 전용앱사교X, 공동의 목표에 집중하는 시간목표 달성 및 진행 공유기간 정해서 집중마음 잘 맞는 동료 구하기대면 or 비대면 선택 하나의 서비스를 만들어보고 싶은 욕심 + 개발 ▼ 신입) 개발 포폴 경력) 서비스 개발 최종 포폴 후반까지 보는 것이 좋긴 하지만 당장 지금 진행하고 있는 수업에 영향을 주지 않는 선에서 진행ㄴ전반적인 서비스를 담은 포폴 제작 그 내에서 구현 가능한 부분만 구현 // 2차(불편한 점) 단순하게 스터디모임 구하려고 하면 카톡 오픈채팅이나 앱들이 있으나 사교적인 목적에 더 집중되는 느낌이 강함 (크게 생각하는 기능) 스터디모임 전용앱사교X.. 이전 1 2 3 4 ··· 7 다음
