코딩하는 거북이

글의 내용에 따라 적을 수 있는 공간을 추가하기 게시글을 적을 때 적을 내용이 추가됨에 따라 적을 수 있는 공간을 추가하는 버튼을 만들어 보도록 하겠습니다. Javascript 작성하기 Javascript 정리해보기 내용을 추가하고, 삭제하는 버튼에 대한 선택자를 만들어 주었습니다. fieldset이 추가될 공간인 contents__addbox에 대한 선택자를 만들어 주었습니다. 게시글을 적을 수 있는 fieldset은 5개로 제한을 두기위해 fieldsetCount라는 변수를 만들어 초기값으로 1을 저장해주었습니다. contentsPlus에 대한 클릭함수 우선 클릭하면 fieldsetCount에 ++연산을 먼저 해줍니다. (fieldset 개수) fieldsetCount가 1보다 크다면 contents..

리액트 연습하기 리액트를 조금 더 연습해보도록 하겠습니다. 컴포넌트(component) 컴포넌트는 자바스크립트 함수로 구현됩니다. 일반적으로 컴포넌트의 이름은 대문자로 시작합니다. function Hello() { return ( Hello, Hooong ) } const element = ReactDOM.render(element, document.getElementById("root")); export default Hello 코드 정리해보기 태그를 사용한 문장을 반환하는 Hello라는 컴포넌트 함수를 만들었습니다. element에 JSX에서 컴포넌트 함수를 호출하는 문법으로 Hello함수를 호출하도록 저장합니다. element를 id("root")에 출력하도록 렌더링 합니다. Hello 컴포넌트를 ..

비동기 방식( ajax )로 가입페이지 만들기 ajax를 사용하여 비동기 방식 가입페이지를 만들어 보겠습니다. 중복검사 중복검사 알아보기 ( jQuery ) isEmailCheck와 isNickCheck 변수에 각각 false의 값을 저장합니다. (초기값) emailChecking()함수 youEmail 변수에 html문서에 있는 #youEmail의 value값을 가져와 저장합니다. youEmail이 null 혹은 공백이면 #youEmailComment에 이메일 작성요구 텍스트를 출력합니다. 공백이 아니라면 ajax를 사용해 POST방식으로 joinCheck.php로 아래의 데이터를 넘깁니다. "youEmail"에는 youEmail을 "type"에는 "isEmailCheck"의 데이터를 넘깁니다. 데이터..

비동기 방식(ajax)으로 가입페이지 만들기 ajax를 사용하여 비동기 방식으로 가입페이지 내에서 유효성 검사를 해보겠습니다. Javascript 작성( jQuery ) [이메일 중복확인] let isEmailCheck = false; function emailChecking(){ let youEmail = $("#youEmail").val(); if(youEmail == null || youEmail == ''){ $("#youEmail").val().text("* 이메일을 입력해주세요.") } else { $.ajax({ type : "POST", url : "joinCheck.php", data : {"youEmail" : youEmail, "type" : isEmailCheck}, dataType..

리액트 맛보기 리액트란 ? React는 Facebook에서 개발한 오픈소스 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위해 사용됩니다. React는 기존의 HTML, CSS 및 JavaScript 기술과 함께 사용됩니다. React는 빠르고 효율적인 UI 개발을 가능하게 하며, 동적인 웹 애플리케이션을 쉽게 작성할 수 있도록 해줍니다. React는 컴포넌트 기반 아키텍처를 사용하며, 재사용 가능한 UI 요소를 만들어낼 수 있습니다. 또한, React는 Virtual DOM이라는 기술을 사용하여 UI 업데이트를 빠르고 효율적으로 처리할 수 있습니다. 리액트 사용하기 React를 사용하려면 먼저 Node.js와 npm이 설치되어 있어야 합니다. Node.js는 자바스크립트 런타임입니다. Node...

코딩일기.(2) 첫 번째 코딩일기 이후 거의 두 달이 지났다. 코딩을 막 배우기 시작한 초반에는 익숙하지 않다보니 하루하루 정신없이 머릿속에 넣기 바쁘고, 겨우겨우 좀 넣었다 싶으면 또 새로운 내용이 쏟아져서 다시 머릿속에 넣느라 시간이 정말 빠르게 흘러갔다. 그렇지만 약 세 달 정도가 지난 지금은 예전에 머릿속에 넣어놨던 내용마저 빠져나가려 하고 새로운 내용으로는 더 빡센 친구들이 몰려와서 훨씬 더 정신없고 시간도 훨씬 더 빠르게 흐르는 느낌이다. 왜 코딩은 일을 하면서도 공부를 해야하는지 알 것 같다. 꽤나 많이 어렵고 힘들지만 더 열심히 하는 수 밖에 ...

PHP를 이용하여 게시판과 필요한 기능들 만들기(3) 게시글 검색기능 활성화 PHP 작성하기

마우스 오버했을 때 메뉴탭이 각각 나오도록 만들기 상단 메뉴에 마우스 오버했을 때 메뉴탭이 각각 나오도록, 혹은 한번에 나오도록 만들어 보겠습니다. HTML (메뉴바만) 작성하기 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 HTML 정리해보기 각각의 메뉴와 서브메뉴가 하나의 속 4개의 안에 들어있는 구조입니다. 각각의 서브메뉴는 한개의 과 4개의 로 구성했습니다. CSS 작성하기 .nav { width: 70%; background-color: #85d47e; padding: 30px 40px;..

웹디자인 기능사 실기를 대비해 기본적인 레이아웃 짜기 여러가지 유형의 레이아웃을 기본적인 틀 구성만 한번 해보도록 하겠습니다. A 유형 HTML + CSS (1번) D유형 HTML + CSS (1번) E유형 HTML + CSS (1번)

정보처리 연습문제 풀어보기 let num = [56, 4, 3, 65, 78]; let temp; for(let i=0; i

Game Effect 페이지 만들기 (2) 이번에는 음악 플레이어 기능을 만들어 보겠습니다. HTML 작성하기 Hoong Player🎧 노래 제목 가수 이름 0:00 3:55 HTML 정리해보기 html 문서에 추가된 내용은 뮤직 플레이어 부분입니다. 버튼은 각각의 span태그로 영역을 잡고 i태그를 사용해 배경이미지를 넣었습니다. 주석처리 부분은 스크립트로 처리하기 위한 영역입니다. Javascript 작성하기 const allMusic = [ { name : "I Found Her", artist : "Faime", img : "music__view01", audio : "music_audio01" },{ name : "Let", artist : "Vietra", img : "music__view02..

PHP를 이용하여 게시판과 필요한 기능들 만들기(2) 게시판 페이지 설정 PHP 작성하기

PHP를 이용하여 게시판과 필요한 기능들 만들기 게시판 PHP 작성하기

Game Effect 페이지 만들기 여러가지 게임 효과들이 있는 페이지를 만들어보겠습니다. 이번 포스팅에는 메인 화면을 만들어보도록 하겠습니다. HTML 작성하기 HOONG GAME ZONE 현재 시간이 나옵니다 ! 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 운영체제와 화면크기가 나옵니다 ! HTML 정리해보기 html문서상의 구조는 아주 간단합니다. 헤더, 메인, 푸터 세 부분으로 구성되어있고 헤더에는 제목과 시간표시, 푸터에는 운영체제 정보와 화면크기를 나타냈습니다. CSS 작성하기 * { cursor: none; } body { width: 100%; height: 100vh; overflow: hidden; color: #fff; } .cursor { width: 15px; position: ab..

디자인툴 Figma를 사용하여 만들고자 하는 사이트의 디자인 시안 작업 여러 많은 사이트를 참고하여 만들고자 하는 사이트의 디자인을 구상해 보았습니다. 각 영역 정리해보기 헤더부분 간단하게 사이트 로고와 검색바, 메뉴 부분으로만 구성하였고 position: fixed 속성입니다. 메인부분 구글 형식으로 메인의 첫 부분에서 얻고자 하는 정보를 검색할 수 있도록 했습니다. 사이트 내의 카테고리에 대한 미리보기가 있는 부분을 바로 아래 배치했습니다. 사이트에서 진행하는 이벤트 혹은 전하고자 하는 정보를 슬라이더 형식으로 마련했습니다. 좀 더 친근하게 알아볼 수 있는 영상이나 혹은 중요한 정보가 담긴 영상 자료가 들어가는 부분을 넣었습니다. 사이트 방문자들이 많이 궁금해하는 분리수거의 내용에 대해 순위를 매겨 ..

문자열 메서드 알아보기 문자열 메서드에 대해서 몇 가지 더 알아보도록 하겠습니다. at() at() 메서드는 문자열에서 지정된 인덱스에 해당하는 요소를 반환합니다. at() 메서드는 배열과 문자열에서 모두 사용 가능합니다. "문자열".at(숫자) console.log("javascript reference".at("0"));//j console.log("javascript reference".at("1"));//a console.log("javascript reference".at("2"));//v console.log("javascript reference".at("11"));//r console.log("javascript reference".at("12"));//e console.log("javas..

플러그인을 사용하여 패럴랙스 효과 만들기 이번에는 skroll.js를 사용하여 패럴랙스 효과를 준 페이지를 만들어 보도록 하겠습니다. HTML 작성하기 HOONG Gooo Class Fighting Together HTML 정리해보기 스크립트 부분에서 skroll.js 플러그인을 사용하기 때문에 html문서 내의 각각의 요소들의 속성이 변해야 하는 데이터 값과 속성을 모두 적어주었습니다. 기본적으로 속성 변화가 있는 시작점의 데이터는 각각의 요소가 처음에 있어야 하는 모습 그대로의 속성을 가지고 있어야합니다. 데이터의 흐름에 따라 속성에 변화를 주기 위해서는 모든 데이터에 해당하는 속성을 같이 적어주어야 합니다. (변화의 유무과 상관없이) CSS 작성하기 * { margin: 0; padding: 0; ..

PHP를 사용하여 회원가입과 로그인 기능 만들기 html로 먼저 구성한 회원가입과 로그인 화면을 php로 기능을 추가하여 만들어보도록 하겠습니다. 접속 $host = "localhost"; $user = "root"; $pw = "root"; $db = "phpClass"; $connect = new mysqli($host, $user, $pw, $db); $connect -> set_charset("utf-8"); if(mysqli_connect_errno()){ echo "Database Connect false"; } else { // echo "Database Connect True"; }; connect.php의 내용입니다. 메인 어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다..

각 섹션의 좌표와 스크롤 좌표를 이용한 패럴랙스 이펙트 만들기 스크롤의 좌표와 각 컨텐츠들의 좌표를 이용하여 패럴랙스 효과를 만들어 보도록 하겠습니다. HTML 작성하기 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 네가 모든 사람을 사랑할 수 없듯이 ..

명언이 넘어감과 동시에 배경 이미지도 같이 바뀌도록 스크립트를 추가해보겠습니다. Javscript 추가하기 const quotesData = () => { fetch("json/quest415.json") .then(quotes => quotes.json()) .then(saying => { // console.log(saying); quoteAll = saying.quotes.map((el, index) => { const formattedSaying = { id : el.id, quote : el.quote, author : el.author } // console.log(formattedSaying) return formattedSaying; }); // 명언 출력 실행문 updateQuote();..

무작위 숫자 여섯개를 가져오는 로또번호 추첨기 만들기 버튼을 누르면 1부터 45까지의 무작위 숫자를 가져오는 스크립트를 만들어보도록 하겠습니다. Javascript 작성하기 바로 스크립트로 넘어 가겠습니다 ! const Button = document.querySelector(".btn"); const noticeNum = document.querySelector(".number"); const lottoNum = new Set(); const drawLot = () => { for(i=1; i

Json파일을 불러와 계속 넘어가는 명언 만들기 시간이 지남에 따라 계속 명언이 바뀌는 효과를 만들어보도록 하겠습니다. HTML 작성하기 HTML 정리해보기 html문서 상의 구조는 배경이미지를 넣어 전부를 감쌀 wrap부분과 명언이 들어갈 상자인 saying__box 부분, 명언 번호, 문구, 저자를 포함하는 saying 부분으로 만들었습니다. CSS 작성하기 * { margin: 0; padding: 0; } body { background-color: #000007 } #wrap { width: 80%; height: 100vh; margin: 0 auto; background-image: url("img/city.jpg"); background-position: center; background-..

썸네일 이미지와 버튼이 있는 슬라이드 효과 만들기 이번에는 버튼과 썸네일 이미지가 있는 슬라이드 효과를 만들어보도록 하겠습니다. HTML 작성하기 prev next 변경된 HTML 알아보기 이번에는 스크립트를 통해 이미지를 넣어줄 것이기 때문에 slider__image 부분을 비워놨습니다. 썸네일이 들어갈 slider__thumb 부분에도 같은 이미지를 스크립트를 통해 넣어주기 위해 비워놨습니다. CSS 작성하기 /* slider__wrap */ .slider__wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800px; height: 450px; box-shadow: 0 50px 100px r..

버튼을 눌렀을 때 넘어가는 슬라이드 효과 만들기 이번에는 버튼을 눌렀을 때 이미지가 좌 혹은 우로 넘어가도록 만들어보겠습니다. HTML 작성하기 prev next 추가된 html 알아보기 이미지의 기본틀을 동일합니다. 이미지의 좌 우에 버튼을 만들기 위해 slider__btn의 부분을 만들어 주었습니다. 페이지의 하단에 dot메뉴를 만들기 위해 slider__dot의 부분을 만들어 주고, 스크립트를 통해 이미지의 개수와 동일하게 dot을 만들어 줄 것이기 때문에 html의 구조상에는 아무것도 넣지 않았습니다. CSS 작성하기 .slider__btn a { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px..

연속적으로 위로 넘어가는 슬라이드 효과 만들기 이번에는 사진이 연속적으로 끝 없이 위로 넘어가는 슬라이드 효과를 만들어 보도록 하겠습니다. HTML 작성하기 HTML 알아보기 translateX를 사용할 때와 다르지 않습니다. CSS 작성하기 변경된 css translateX를 이용하여 좌로 이동할 때는 사진이 가로 정렬되어야 하기 때문에 slider__inner에 display : flex의 속성을 주었지만 지금은 사진을 가로 정렬할 필요가 없기 때문에 slider__inner의 속성을 없애주었습니다. 나머지는 동일합니다. Javscript 작성하기 ( javascript 사용 ) javscript 정리해보기 sliderHeight라는 변수를 하나 더 만들어 clientHeight를 사용하여 각 이미지..

연속적으로 좌로 넘어가는 슬라이드 효과 만들기 이번에는 사진이 연속적으로 끝 없이 좌로 넘어가는 슬라이드 효과를 만들어 보도록 하겠습니다. HTML 작성하기 HTML 정리해보기 html문서 상의 구조는 이전에 만들었던 translateX를 사용하여 좌로 보내는 슬라이드 페이지와 동일합니다. CSS 작성하기 변경된 css 기존 스타일과 동일합니다. Javascript 작성하기 ( javascript 사용 ) javascript 정리해보기 sliderWidth와 sliderClone이라는 변수를 추가했습니다. sliderWidth = clientWidth를 사용하여 [0] 번째 slider(순서 무관)의 width 값을 저장합니다. sliderClone = cloneNode(true)를 사용하여 slider..

TranslateY의 값으로 슬라이드 효과 만들기 이번에는 translateY의 값을 조절하여 이미지가 좌로 넘어가는 효과를 만들어보겠습니다. HTML 작성하기 변경된 HTML 알아보기 X축 이동에서 Y축 이동으로만 변한 것이기 때문에 html문서 상의 구조는 변하지 않습니다. CSS 작성하기 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slid..

TranslateX의 값으로 슬라이드 효과 만들기 이번에는 translateX의 값을 조절하여 이미지가 좌로 넘어가는 효과를 만들어보겠습니다. HTML 작성하기 변경된 HTML 알아보기 main의 구조만 살짝 바뀌었는데, 각각의 이미지 전체를 감싸고 있는 slider__inner를 추가했습니다. CSS 작성하기 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidde..

Transition 으로 슬라이드 효과 주기 이미지의 opacity를 조절하여 이미지 슬라이드 효과를 주도록 하겠습니다. HTML 작성하기 Javascript Slider Effect01 슬라이드 이펙트 1 2 3 4 5 6 gnsrdbi@naver.com HTML 정리해보기 이 전에 작성했던 마우스 효과의 기본적인 틀을 가져와 main의 구조만 변경하였습니다. main에는 슬라이드 효과를 받을 이미지를 다섯장 넣어주었습니다. CSS 작성하기 @import url('https://webfontworld.github.io/NexonFootballGothic/NexonFootballGothic.css'); @import url('https://webfontworld.github.io/NexonLv1Gothi..

웹디자인 기능사 기출문제 색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비 색의 3속성 색을 규정하는 3가지 지각 성질 색상, 명도, 채도로 색을 느끼는데 중요한 역할 지각 순서는 명도 > 색상 > 채도 디자인의 원리 중 비례에 대한 설명 비례(비율) 등차수열 비례 등비수열 비례 상가수열 비례 정수비 황금비례 ( 1 : 1.16184) 모듈 ( 건축가 르꼬르뷔지에가 인체의 신체적 특성을 고려하여 만든 건축 공간의 척도) 피보나치 ( 수열비례, 자연이나 식물의 구조와 번식에서 응용) 가시광선에 대한 설명 빛의 정의 전자파의 일종으로 인간이 볼 수 있는 가시광선을 의미 시지각의 근본이 되며, 형태, 색채, 질감 등을 보이도록 함 가시광선 : 380nm ~ 780nm 380nm 이하 : 자외선,..