나는야 이미 발등튀김

안녕하세요! 2025년 6월 30일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 25일차 수업 내용을 정리해보았습니다.6월 23일(21일차)부터 6월 27일(24일차)까지는 진도체크와 모작을 진행하여, 따로 진도를 나가지 않았습니다.그래서 오늘은 랜만에 다시 자바스크립트의 새로운 부분인 반복문 'for'을 배웠습니다. --- 25일차 학습내용 JS - 8강 ## for문: for 문은 반복 횟수가 명확할 때 자주 사용하는 반복문입니다.: 초기값 → 조건식 → 증감식을 한 줄에 작성할 수 있어 가독성이 좋다.for (초기값; 조건식; 증감식) { // 조건식이 참일 때 실행되는 코드}예제- 1~5까지 출력하기for (let i = 1; i // 실행 결과12345## for문 동작 순서초기값 설정 → ..

안녕하세요! 2025년 6월 24일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 21일차 수업 내용을 정리해보았습니다. 오늘은 다중 while문에 대 배웠습니다. --- 20일차 학습내용 JS - 7강 ## 다중 while문이란?: 다중 while문은 while문 안에 또 다른 while문이 있는 구조를 말한다.: 중첩 while문을 사용하면 2차원 배열 처리, 별 찍기, 게임 루프 등 다양한 구조를 만들 수 있다.while (조건1) { // 바깥 반복 실행 while (조건2) { // 안쪽 반복 실행 }}출력 예시- 별 찍기let row = 1;while (row ** while문과 다중while문 주의점 **개념설명while문조건이 참인 동안 반복 실행다중 while문while문 안..

안녕하세요! 2025년 6월 23일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 20일차 수업 내용을 정리해보았습니다. 오늘은 JS 6강 문제 풀이를 진행했습니다. --- 20일차 학습내용 JS - 6강 문제 풀이 예제 문제1- while문을 사용해 구구단 8단을 출력해주세요.let i = 1;while (i : 반복 변수 i를 1부터 9까지 증가시키면서, 8 x i = 결과 형식으로 출력된다.예제 문제2- while문을 사용해 1부터 100까지 출력해주세요.let i = 1;while (i 예제 문제3- while문을 사용해 1부터 100까지의 합을 출력해주세요.let i = 1;let sum = 0;while (i > 누적합을 저장할 sum 변수를 사용해야 함에 주의!--- 마무리 오늘 whil..

안녕하세요! 2025년 6월 20일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 19일차 수업 내용을 정리해보았습다. 오늘은 본격적으로 자바스크립트에서 반복을 처리하는 기본 구조 중 하나인 while문을 배웠습니다. --- 19일차 학습내용 JS - 6강 ## 반복문: 같은 작업을 여러 번 반복할 때 사용하는 프로그래밍 구조이다. > 사람이 수작업으로 코드를 여러 번 복사하지 않고도 조건을 만족할 때까지 자동 반복되게 할 수 있다.## while문: while 문은 조건이 참(true)인 동안 코드 블록을 계속 실행하는 반복문이다.while (조건) { // 조건이 참(true)인 동안 반복 실행}> 조건이 false가 될 때까지 반복한다.> 무한 반복에 주의 (조건이 멈추지 않으면 브라우저가..

안녕하세요!2025년 6월 19일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 18일차 내용을 정리해보았습니다. 오늘은 반복문 준비 단계 정리인 자바스크립트의 4대 구성요소에 대해 배웠습니다. --- 18일차 학습내용 JS - 5강 ## 자바스크립트의 4대 구성요소조건문반복문변수값(데이터)의 자료형# 요약본항목설명조건문상황에 따라 다르게 실행 (if)반복문코드를 반복해서 실행 (for, while)변수데이터를 저장하는 이름표자료형데이터의 종류 (숫자, 문자, 불린, 객체 등)객체복잡한 데이터 묶음, 버스처럼 좌석(속성) 존재함수작업을 정의한 코드 덩어리지역변수함수 안에서만 쓰이는 변수매개변수함수로 값을 전달하는 방법return함수 결과를 돌려주는 출구## 조건문: 조건에 따라 다르게 행동하기 # i..

안녕하세요!2025년 6월 18일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 17일차 내용을 정리해보았습니다. 오늘은 자바스크립트의 가장 기본이자 핵심인 조건문 if, else if, else와&&, || 같은 논리 연산자, 그리고 이를 활용한 실습 문제 풀이를 정리했습니다. --- 17일차 학습내용 JS - 3강## 조건문(if, else if, else): 조건문은 프로그램 흐름을 제어하고, 상황에 따라 다르게 동작하도록 만드는 기본 도구이다.if (조건) { // 조건이 true일 때 실행} else if (다른 조건) { // 첫 조건이 false이고 이 조건이 true일 때 실행} else { // 모든 조건이 false일 때 실행}: 조건은 true 또는 false로 판별된다. ..

안녕하세요!2025년 6월 17일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 16일차 내용을 정리해보았습니다.드디어 오늘부터 자바스크립트(JS) 기초 수업이 시작되었습니다..!HTML/CSS와는 달리, 웹페이지에 동적인 기능을 넣을 수 있는 프로그래밍 언어인 만큼, 조금 어렵지만 흥미롭고 중요한 첫걸음이었습니다.오늘은 자바스크립트 기초 개념과 Visual Studio Code를 사용하기 위해여 필요한 과정을 배웠습니다. --- 16일차 학습내용 JS - 1강 ## 자바스크립트의 개념과 역할## 자바스크립트(JS)란?: 웹페이지에 동작과 반응을 넣어주는 언어이다.: 자바스크립트는 마치 감독처럼 HTML과 CSS를 제어하고 조작할 수 있다. - HTML → 구조 (배우)- CSS → 디자인 (스타일리스트..

안녕하세요!2025년 6월 16일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 15 일차 내용을 정리해보았습니다.오늘은 @media 개념과 flex 반응형 메뉴 정리를 배웠습니다. --- 15차 학습내용 33강## @media: 디바이스(기기)의 조건에 따라 CSS스타일을 다르게 적용할 수 있게 해주는 기능: 보통 CSS 파일 제일 아래에 둔다.: 순서대로 적용되니까, 나중에 나올수록 우선순위가 높아진다. 예를 들어화면이 작은 스마트폰이면 글자 크기 작게화면이 큰 데스크탑이면 넓은 레이아웃 사용이런 식으로 조건을 설정할 수 있다. /* 기본 문법 */@media (조건) { /* 조건을 만족할 때 적용할 CSS */} --- #예제1- 화면이 600px 이하일 때 배경색 바꾸기body { backg..

안녕하세요!2025년 6월 14일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 14 일차 내용을 정리해보았습니다.오늘은 HTML 구조 중 flex 문제 풀이, 웹 폰트 적용 방법(`Google Fonts`, `눈누`)에 대해 배웠습니다. --- 14차 학습내용 31강## flex 문제 풀이: flex 레이아웃 만들기 문제 레이아웃 배우기 li*4>a[href="#"]{메뉴 아이템 $} --> 메뉴 아이템 1 메뉴 아이템 2 메뉴 아이템 3 메뉴 아이템 4 Lorem, ipsum dolor sit amet consectetur 추가적인 내용 ..

안녕하세요! 2025년 6월 12일, UI·UX 반응형 웹퍼블리셔 국비 수업 13일차 내용을 정리해보았습니다. 오늘은 반응형 레이아웃 설계에 자주 사용하는 `display: flex`의 기초 개념과 주요 속성들을 배웠습니다.그리고 Flex & Grid 관련 실습 사이트 추천도 맨 아래에 있습니다! --- 13일차 학습내용 30강 ## Flex: flex`는 CSS에서 레이아웃을 가로 방향(주축 중심)으로 배치할 때 사용하는 속성이다. : 기본적으로 자식 요소들이 한 줄로 나란히 정렬된다. /* CSS */#pond { width: 300px; height: 300px; background-color: green; display: flex;}: display: flex;를 부모에..