우당탕탕 코딩생활

환경오염 문제가 대두되는 시점에서 분리수거를 제대로 할 수 있게 도움을 주는 사이트를 구상해보았습니다! 물건의 분리수거 방법을 알려주는 것이 목적입니다. 피그마로 시안 작업하였습니다. 참고 사이트

웹디자인 실기 준비를 위한 개인공부입니다! 완성화면 코드 작성 순서 1. HTML에서 전체적인 구조를 잡는다. 여기서 id를 정확하게 정해준다. 각 컨텐츠가 들어갈 전체 페이지 wrap rogo와 nav가 들어갈 header 슬라이드 형식의 이미지가 들어갈 banner 컨텐츠1이 들어갈 content1 컨텐츠2가 들어갈 content2 푸터가 들어갈 footer 2. 구조가 잡혔다면 각 부분에 들어갈 부분들을 작성한다. 즐길거리 요금/우대혜택 참여프로그램 이용가이드 소통서비스 가장 상단의 로고가 들어가는 부분에는 a태그를 사용하여 링크를 걸을 수 있게 하고 alt를 꼭 작성해준다. 메뉴는 id가 아닌 class 속성을 사용하여 nav라고 명명해주고, 각 메뉴들을 ul과 li를 통해 작성한다. 롯데월드 소..

01. SQL문의 빈칸의 완성하시오. [학생] 테이블에서 전화번호가 NULL 값이 아닌 학생명을 모두 검색하기 위한 SQL문을 작성하시오. SELECT 학생명 FROM 학생 WHERE 전화번호 _____; 더보기 02. SQL문의 빈칸의 완성하시오. 사용자 "HWANG"에게 테이블을 생성할 수 있는 권한을 부여하기 위한 SQL문을 작성하시오. _____ CREATE TABLE _____ HWANG 더보기 03.SQL문의 빈칸의 완성하시오. [성적] 테이블에서 점수가 90점 이상 95점 이하인 '컴퓨터공학과' 학생의 정보를 검색한 SQL문을 작성하시오. SELECT * FROM 성적 WHERE (점수 _____ 90 _____ 95) AND 학과 = '컴퓨터공학과'; 더보기 04.SQL문의 빈칸의 완성하시..

01. 다음 빈칸의 내용을 작성하시오. ( ① ) : 물리(Physics) 계층에서 데이터 전송을 하기 위해 사용하는 데이터 단위 ( ② ) : 네트워크(Network) 계층에서 데이터 전송을 하기 위해 사용하는 데이터 단위 더보기 답 : 비트 / 패킷 해설 : * OSI 모델은 인터넷의 작동을 설명하는 모델로, 7개의 계층으로 나뉘어집니다. 1. OSI 7계층의 제 1계층 물리계층의 데이터 단위는 비트입니다. 물리적 계층에서는 주로 전기적, 기계적, 과학적, 기능적인 등 이러한 특성을 통해 통신 케이블로 데이터를 전송합니다. 2. OSI 7계층의 제 3계층 네트워크 계층의 데이터 단위는 패킷입니다. 인터넷을 통해 발송되는 모든 데이터는 패킷이라는 작은 조각으로 나뉘어집니다. 예를 들어 철수가 영희에게 ..

이번 포스팅은 스크롤과 좌표를 이용해서 패럴랙스 효과를 줘보도록 하겠습니다! 다시 한 번 복습하는 개념으로 패럴럭스에 대해 알아보자면, ParallaxEffect란? 패럴랙스 효과(Parallax Effect)란, 물체의 거리 차이에 따라 시차를 느끼게 하는 시각적인 효과를 말합니다. 웹 디자인에서는 패럴랙스 효과를 사용하여 웹페이지의 다양한 요소들이 서로 다른 속도로 움직이도록 하여 깊이감을 부여하는 효과를 줄 수 있습니다. 이를 통해 사용자에게 더욱 생생한 경험을 제공할 수 있습니다. 예를 들어, 스크롤을 내리면서 배경 이미지와 전경의 텍스트가 서로 다른 속도로 움직이면서 깊이감 있는 느낌을 줄 수 있습니다. 이 포스팅에서는 언스플래쉬와 스크롤라이브러리를 사용합니다! 이미지와 텍스트를 사용하기 위해 ..

parallax effect - pageYoffset || scrollY || scrollTop HTML 1 Javascript Parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 신은 용기있는자를 결코 버리지 않는다. 02 Section2 피할수 없으면 즐겨라. 03 Section3 자신감 있는 표정을 지으면 자신감이 생긴다. 04 Section4 계단을 밟아야 계단 위에 올라설수 있다. 05 Section5 고통이 남기고 간 뒤를 보라! 고난이 지나면 반드시 기쁨이 스며든다. 06 Section6 마음만을 가지고 있어서는 안된다. 반드시 실천하여야 한다. 07 Section7 꿈을..

CSS 명언과 명언을 말한 사람이 나오는 박스, 배경에 대한 CSS 입니다. 사진이 더 잘 보일 수 있도록 명언을 오른쪽 아래에 배치했습니다. HTML 구조 코드의 특징은 unsplash라는 홈페이지의 api를 이용하는 부분입니다. 랜덤한 이미지를 unsplash에서 가져와 사용합니다! 그래서 지난 포스팅과는 다르게 이미지에 대한 구조 부분을 추가해주었습니다. 그래서 명언이 나오는 부분과 명언, 명언을 말한사람, 그리고 이미지 부분으로 구성되게 됩니다. Script 스크립트 부분입니다! 지난 번과 크게 달라진 부분은 없으나 이미지를 가져오기 위한 변수가 추가 되었습니다. function imgLoad(){ let bgImg = document.querySelector(".bgImg"); bgImg.src..

CSS Scritp 🍀Lotto🍀 Click! 이 JavaScript 코드는 "Click!" 버튼을 클릭하면, "lottoNumber" 함수가 호출되어 무작위 6개의 숫자를 생성하고, 생성된 숫자를 "result" 요소의 innerText로 할당하여 화면에 출력합니다. 첫째 줄에서는, HTML에서 button 요소를 선택하여 "button" 변수에 할당합니다. 이를 통해 이벤트 리스너를 추가하고, 클릭 이벤트가 발생했을 때 함수를 호출할 수 있습니다. 둘째 줄에서는, HTML에서 결과를 출력할 div 요소를 선택하여 "result" 변수에 할당합니다. 이를 통해 결과를 표시할 수 있습니다. 셋째 줄에서는, "lottoNumber" 함수를 정의합니다. 이 함수는 새로운 Set 객체를 만들고, 1부터 45 ..

'모던자바스크립트'의 502페이지 예제입니다! 목표 dummyjson.com/quotes 사이트의 json 데이터를 가져온 후 콘솔 창에 결과를 표시해 봅니다. 가져온 데이터가 어떤 구조로 이루어져 있는지 확인하고 그 중에서 명언과 말한 사람 정보를 가져올 수 있는 방법을 생각해봅니다. 1. JSON 데이터를 가져온 후 콘솔창에 결과를 표시해 보세요. .then(이름) 까지가 json을 활용하는 기본적인 문법입니다. 2. JSON데이터에서 명언 1개를 가져와 내용과 말한 사람을 표시해 보세요. let currentIndex = 0; function quotes(){ fetch("json/quotes.json") .then(res => res.json()) .then(items => { const resu..

CSS 추가된 부분은 썸네일의 slider tuhmb과 active입니다. 썸네일 이미지를 의미하며 클릭했을 시 활성화 및 동작을 위한 active부분입니다. script 이번 스크립트에서는 선택자를 일일히 만들어주는 것이 아니라, 함수안에 객체 형식으로 넣어보겠습니다. 먼저 images라는 변수안에 각각의 이미지를 넣어줍니다. let images = [ "img/sliderEffect03.jpg", "img/sliderEffect04.jpg", "img/sliderEffect02.jpg", "img/sliderEffect01.jpg", "img/sliderEffect06.jpg" ]; // 선택자 만들기, 함수안에 객체 형식, 선택자를 변수화 function imageSlider(parent, imag..