코딩공부중인블로그

가로 효과 전체 소스 1. const parallaxCont = document.querySelector(".parallaxs__wrap");: parallaxs__wrap 클래스를 가진 요소를 선택하여 parallaxCont 변수에 할당합니다. 이 요소는 패럴랙스 효과를 적용할 부분을 감싸는 컨테이너입니다. 2. let scrollTop = window.pageYOffset;: scrollTop 변수에 현재 스크롤의 수직 위치를 저장합니다. 3. let parallaxWidth = parallaxCont.offsetWidth;: parallaxCont 요소의 너비를 저장하는 parallaxWidth 변수를 생성합니다. 4. document.body.style.height = parallaxWidth +..

리빌효과 전체소스 HTML / CSS Javascript Parallax Effect07 패럴렉스 이펙트 : 리빌 효과 1 2 3 4 5 6 7 01 section1 삶은 탐구하는 모험이다. 02 section2 오늘 당신이 할 수 있는 최선의 일을 하라. 03 section3 비난은 쓸모없는 짓이다. 04 section4 우리의 삶은 우리가 생각하는 것처럼 빠르지 않고, 우리가 생각하는 것보다 짧다. 05 section5 머리로 생각하는 것보다는 마음으로 생각하고 행동하라. 06 section6 인생은 문제다. 그것을 해결해 나가는 과정에서 삶이 만들어진다. 07 section7 성공은 단순히 실패를 거듭하고 계속하는 것이다. 08 section8 기회는 항상 어려운 일 모습으로 찾아온다. 09 sec..

컴퍼넌트 - 리액트 컴포넌트(React component)는 리액트(React) 라이브러리에서 사용되는 재사용 가능한 UI 요소입니다. 리액트는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 개발을 지원합니다. - 리액트 컴포넌트는 UI를 구성하는 독립적인 모듈로, 각각의 컴포넌트는 자체적으로 상태(state)와 속성(props)을 가지며, 화면에 렌더링되는 UI 조각입니다. 컴포넌트는 재사용 가능하고, 계층 구조로 구성될 수 있어 복잡한 UI를 구성하는 데 유용합니다. ex 1) import React from "react"; import ReactDOM from "react-dom/client"; function Hello(){ return Hello, world ..

설치 방법 Node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org -우선 Node.js 설치한 후 코드 에디터 선택: React 코드를 작성할 수 있는 코드 에디터를 선택하고 설치합니다.(Visual Studio Code 등) - 새로운 React 프로젝트 생성을 위해 터미널 또는 명령 프롬프트를 열고 원하는 프로젝트 디렉토리로 이동후 아래 명령어로 새로운 React 프로젝트를 생성합니다. npx create-react-app 프로젝트 이름 이 명령은 Create React App을 사용하여 새로운 프로젝트를 생성합니다. 프로젝트 이름에 ..

HTML JS const allMusic = [ { name : "1. 저리가라", artist : "parrick parrick", img: "music_view01", audio: "music_audio01" },{ name : "2. 저리가라", artist : "parrick parrick", img: "music_view02", audio: "music_audio02" },{ name : "3. 저리가라", artist : "parrick parrick", img: "music_view03", audio: "music_audio03" } ]; - 음악에 정보를 allMusic에 배열안 객체로 저장합니다. //선택자 const musicWrap = document.querySelector(".mu..

전체 소스 보기 우선 jquery와 gsap의 라이브 러리를 가져와 줍니다. HTML WEBS GAME WORLD 빨강 음악 듣기 파랑 음악 듣기 초록 음악 듣기 노랑 음악 듣기 현재 맥을 사용하고 있으며, 화면 크기는 1920 X 760 입니다. 마우스 변경하기 window.onload = function(){ window.addEventListener("mousemove", e => { gsap.to(".cursor", { duration: 0, left: e.pageX -5, top: e.pageY -10 }); }); } gsap를 사용하면서 addEventListener로인해 마우스가 움직일때 .cursor가 마우스를 대신하게 됩니다. 시간 구현 //현재 시간 const printTime = (..

at() 사용법:"문자열".at(위치값) 배열과 문자열에서 사용가능 하지만 주로 배열에서 사용 합니다. 배열(Array) 객체의 메서드 중 하나로, 특정 인덱스(index)에 해당하는 요소(element)를 반환합니다. 배열의 인덱스가 유효하지 않을 경우 undefined를 반환하며, 배열의 범위를 초과하는 인덱스를 사용하려고 하면 RangeError를 발생시킵니다. { "javascript refercence".at(0); //"j" "javascript refercence".at(1); //"a" "javascript refercence".at(10); //" " "javascript refercence".at(-1); //"e" "javascript refercence".at(-12); //"t" ..

※패럴랙스 이펙트 전체 소스 hello World Javascript Fighting! - 스크롤에 반응 하여 css 데이터가 변하는 소스를 가져와서 적용해주도록 합니다. - 그후 스크롤이 값을 봐가며 자기가 어느곳에 어떻게 변화를 주고 싶은지 적어 줍니다. - 적을 때는 변하지 않는 요소는 style에 적어도 상관이 없습니다. javascript - 스크롤을 하였을때 스크롤의 Y의 값을 가져오도록 하였고 그것을 .scrollTop 에 넣어 주었습니다.

※패럴렉스 이펙트 메뉴 효과 전체소스 보러가기 css 보러가기 HTML 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 삶은 탐구하는 모험이다. 02 section2 오늘 당신이 할 수 있는 최선의 일을 하라. 03 section3 비난은 쓸모없는 짓이다. 04 section4 우리의 삶은 우리가 생각하는 것처럼 빠르지 않고, 우리가 생각하는 것보다 짧다. 05 section5 머리로 생각하는 것보다는 마음으로 생각하고 행동하라. 06 section6 인생은 문제다. 그것을 해결해 나가는 과정에서 삶이 만들어진다. 07 section7 성공은 단순히 실패를 거듭하고 계속하는 것이다. 08 section8 기회는 항상 어려운 일 모습으로 찾아온다. 09 section9..

10초마다 json에 담긴 명언 하나를 랜덤으로 가져오기 문제풀이 보러가기 ※10초마다 명언가져오기 + 배경화면 바꾸기 전체소스 명언 모음집 명언 - 10초 마다 명언을 json파일에서 가져오는 것에서 추가로 배경화면도 바뀌게 해주었습니다. const bgimg = () => { fetch(`https://source.unsplash.com/random/?wallpapers`) .then((imgs) => { let imgurl = imgs.url console.log(imgurl) document.body.style.backgroundImage = 'url('+imgurl+')' }); } 함수를 하나 더 만들어서 랜덤으로 이미지가 나오는 사이트를 가져와 필요한 정보를 가져온후 변수로 저장해줍니다. 그..

※set()을 이용해 중복없이 랜덤으로 로또 번호 생성하기 전체 소스 로또 번호 생성기 번호 생성 javascript ·우선 그곳에 값을 가져오거나 넣기위해 선택자를 만들어 줍니다. ·addEventListener()의 이벤트함수를 이용해 lottoBtn을 클릭했을때 함수가 실행 되도록 하였습니다. · set 변수하나를 만들어 new Set() 저장해준후 for문을 이용하여 변수안에 45개의 번호를 랜덤으로 6개 넣어줍니다.(이때 Set() 에 의해서 중복되는 값은 나오지 않게 됩니다.) ·randomNum 변수를 하나 더 만들어 Array.from()을 이용해 set을 배열로 변환하여 저장 해줍니다. ·randomNum를 forEach()함수로 실행해서 값(num)과 인덱스값(i)을 가져옵니다. ·조건..

※10초마다 json에 담긴 명언 하나를 랜덤으로 가져오기 전체 소스 명언 모음집 명언 - javascript ·텍스트를 넣을 곳을 querySelector을 이용하여 선택자로 만들어 가져옵니다. ·datawisesaying함수를 만들어 fetch를 통해 josn의 파일을 가져오고 then을 통해 파일을 res로변경후 res.json()으로 자바스크립트의 객체로 변경하고 dtas로 이름을 변경하여 쓸 수 있게 해줍니다. ·그후 그 안에 필요한 데이터를 가져와 변수로 저장을 해주었습니다. ·명언을 랜덤으로 보여주기위해 Math를 이용하여 데이터의 갯수만큼 랜덤 숫자가 나오게 저장해 주었습니다. ·데이터를 랜덤으로 가져오게 wisesaying[Random]를 변수로 저장해 주었습니다. ·이제 json에서 가..

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 전체소스 보러가기 Javascript Slider Effect07 슬라이드 이펙트 : 버튼,썸네일 1 2 3 4 5 6 7 prev next ghkddn132@naver.com slider__img와 slider__thumb에 이미지는 자바스크립트를 통해 넣어 주기 때문에 비워주시고,슬라이드 이펙트 6에서 사용했던 slider__btn을 사용하였습니다. 그후 각 영역의 간격을 정해줍니다. let images = [ "img/sliderEffect01-min.jpg", "im..

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트 6 버튼, 닷메뉴 전체소스 보러가기 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지 움직이는 ..

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트5 세로유형 (연속) 전체소스 보러가기 Javascript Slider Effect05 슬라이드 이펙트 : 위로 움직이기 (연속적으로) 1 2 3 4 5 6 ghkddn132@naver.com 슬라이드 이펙트4 가로유형(연속)에서 slider__inner의 width값을 주어 이미지들이 제대로 가로로 정렬 할수 있게 해주었지만 세로유형(연속)에서는 원래 세로정렬 되어있던 이미지들을 slider__inner에 display: flex, flex-wrap: wrap을 ..

슬라이드 이펙트1 기본유형 보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트4 가로유형 (연속) 슬라이드 이펙트2의 가로유형처럼 다시돌아가는것이 아닌 자연스럽게 슬라이드 되게 하였습니다. 전체소스 보러가기 Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이기 (연속적으로) 1 2 3 4 5 6 ghkddn132@naver.com .slider__inner 의 width 값을 첫번째의 이미지를 복사하여 나온거 까지 포함하여 4800으로 해줍니다. ※JAVASCRIPT 우선 GSAP 의 라이브러리를 가져옵니다. ..

슬라이드 이펙트1 기본유형보러가기 슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트3 세로유형 전체소스 보러가기 슬라이드 이펙트 가로 유형에서 가져와서 /* display: flex; */ /* flex-wrap: wrap; */ /* width: 4000px; */을 주석 처리 해주어서 가로에서 세로로 변경 하였습니다. ※JAVASCRIPT 가로유형에서 처럼 똑같이 setInterval함수를 쓰고 sliderInterval의 주기만큼 반복 하도록 하게 하였습니다. 그후 transfrom을 이용하여 이미지의 높이만큼 translateY의 ..

슬라이드 이펙트1 기본유형보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이드 이펙트2 가로유형 전체 소스 보러가기 Javascript Slider Effect02 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 ghkddn132@naver.com 우선 사진을 가로로 정렬 해주어야 하기 때문에 display: flex;를 사용해 이미지를 가로로 해줍니다. 그리고 overflow: hidden;을 이용해 잘리는 이미지는 안보이게 해줍니다. ※JAVASCRIPT GSAP를 사용하기위해 라이브러리를 가져오고 정해준 시간주기로 반복하고 변수..

슬라이드 이펙트2 가로유형 보러가기 슬라이드 이펙트3 세로유형 보러가기 슬라이드 이펙트4 가로유형 (연속)보러가기 슬라이드 이펙트5 세로유형 (연속) 보러가기 슬라이드 이펙트6 버튼,닷메뉴 보러가기 슬라이드 이펙트7 버튼,썸네일 보러가기 슬라이더 이펙트1 기본유형 전체소스 보러가기 Javascript Slider Effect01 슬라이드 이펙트 1 2 3 4 5 6 ghkddn132@naver.com 우선 html을 만들어 준후 css로 꾸며 줍니다. .slider:nth-child(1)::before {content: '이미지1';} .slider:nth-child(2)::before {content: '이미지2';} .slider:nth-child(3)::before {content: '이미지3';}..

전체 소스 보러가기 HTML 2020년 1회 정보처리기능사 기출문제 남은 시간 답안지 제출하기 수험자 : 전체 문제수 : 0문항 남은 문제수 : 0문항 기능사 시험 도전하기 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 2009년 5회 정보처리기능사 2010년 2회 정보처리기능사 2010년 5회 정보처리기능사 2011년 1회 정보처리기능사 2011년 2회 정보처리기능사 2011년 4회 정보처리기능사 2011년 5회 웹디자인기능사 2013년 5회 웹디자인기능사 2014년 1회 웹디자인기능사 2014년 4회 웹디자인기능사 2014년 5회 웹디자인기능사 2015년 1회 웹디자인기능사 2015년 3회 웹디자인기능사 2015년 4회 웹디자인기능사 2015..

퀴즈 이펙트 CBT확인 유형을 보충 하였습니다. 문제에 있는 정답 체크 들과 omr에 있는 정답 체크 들을 연동 시키기 위해 사용자가 체크를 하게 되면 체크된 정답의 값을 onclick의 answerSelect2을 통해 value를 가져 왔습니다. 그리고 그 value값 사이에있는 "_"를 구분자로하여 split 안에있는 숫자를 배열로 나워 주었습니다.그후 omr에 있는 전체 문항수를 가져오고 label 이라는 변수를 만들어 체크 되었을때 문제 밑에 있는 정답 4개중 하나를누르면 omr에 정답도 같은 숫자로 체크가 되게 할 수 있습니다. 밑에도 마찬가지로 omr을 눌렀을때 문제 밑에 있는 정답과 같은 번호로 체크가 되게 만들어 주었습니다. 그 후 남은 문제를 구하기 위해 체크한 값을 가져와 그값과 전체 ..

Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2020년 1회 정보처리기능사 기출문제 남은 시간 59분 10초 답안지 제출하기 수험자 : 전체 문제수 : 1문항 남은 문제수 : 1문항 class의 cbt 부분과 omr 부분을 주석처리 하고 script 부분에서 반복하여 나오게 하였습니다. ·json에 있는 데이터를 불러와서 itmes로 저장해준후 map으로 json파일에있는 데이터를 하나씩 빼와 questionAll에 저장 해주었습니다. ·newQuestion의 익명함수를 만듣후 빈배열이 있는 변수 두개를 만들고 그안에 forEach를 이용해 questionAll에있는 문제의 내용을 가져와 각배열 안에 넣어주면 문제가 여러게 나오게 됩니다. ·정답을 확인하기 위해 우선 사용자의 체크한 답을 ..

1.마우스를 이미지에 오버하면 이미지가 바뀌게 하기 마우스 오버하면 이미지 랜덤으로 바꾸기 우선 텍스트와 이미지을 넣어줍니다. 그 후 상수 cover를 만들어 querySelector를 이용해 아이디가container안에 img에 값을 가져오거나 변경 할 수 있습니다. 또 하나의 상수 covers 를 만들어 마우스를 오버 했을때 바뀔 이미지들을 배열에 넣어줍니다. 그리고 이벤트 함수인 'addEventListener' 를 이용해 이벤트 용어중 하나인 'mouseover'를 이용해 마우스를 오버 했을때 cover에 있는 이미지 src를 covers에있는 배열의 이미지로 랜덤하게 바뀌게 해주었습니다. 그리고 마우스가 이미지를 벗어낫을때 다시 원래 이미지로 바꾸기 위해 'mouseout' 을 사용하였습니다. ..

문자열의 길이를 알고싶을때 (length) 문자열의 길이를 찾을 때는 배열에서 처럼 length를 사용하여 문자길이를 가져올 수 있습니다. { let str ="Good morning!"; let lang = "반갑습니다!"; console.log(str.length); console.log(lang.length); } //str.length 출력:13 //lang.length 출력:6 문자열에 포함된 "공백"도 문자열의 길이에 포함 됩니다. 문자열의 문자의 위치 활용하기 charAt(), indexOf () 메서드 문자열은 여러개의 문자가 나열 되어 있으므르 배열 처럼 각 문자의 위치를 가리키는 인덱스가 있다고 가정하고, 그 위치와 관련된 주요 메서드에는 charAt()메서드와 indexOf()메서드가..

여러 문제를 한번에 보지 않고 다음 문제를 누르면 또 다른 문제가 나오게 하는 방법입니다. Quiz 객관식 여러 문제 확인하기 슬라이드 유형 1 2 3 4 5 6 맞힌갯수? 정답입니다! 틀렸습니다! 다음 문제 점수 확인하기 ghkddn132@naver.com //문제 정보 const quizInfo = [ { infoType: "정보처리 기능사", infoTime: "2008년 1회", infoNumber: "20080101", infoQuestion: "101101(2)의 2의 보수는 얼마인가?", infoChoice: ["110111(2)","110001(2)","111000(2)","010011(2)"], infoAnswer: "010011(2)", infoDesc: "2의 보수로 바로 바꾸는 방법..

여러 문제 확인하기 유형에 대해 알아 봅시다 Quiz 객관식 여러 문제 확인하기 유형 1 2 3 4 5 6 ghkddn132@naver.com 이제는 body에 직접 html에 적는게 아닌 문제를 push()를 이용해 html을 넣어 줄거기 때문에 body부분은 다 주석처리를 해주었습니다. 우선 quiz__wrap에 html에 적었던 문자열을 넣어주기 위해 quiz__wrap의 선택자를 만들어 줍니다. 그후 익명함수 updateQuiz를 실행시킨후 그안에 상수를 만들어 exam에 배열안에 객체를 저장한 quizinfo를 넣은 quizWrap을 반복하기 위해 forEach문을 사용하였고 push를 와 (`) 키를 이용해 html에 주석으로 표시한 곳을 복사해 가져와 배열안에 객체인 quizinfo를 넣어야..

1 2 3 4 5 6 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animation-direction : 애니메이션 움직임 방향을 설정합니다. animation-duration : 애니메이션 움직임 시간을 설정합니다. a..

GSAP 사용하기 전에 올렸던 마우스 이펙트1의 마우스는 버벅거리고 움직임이 이상하기에 이것을 보안해 주는 사이트의 소스를 가져와 보안해 주도록 합시다. 마우스 이펙트1 보러가기 https://coding23213.tistory.com/48 마우스 이펙트1 마우스 따라다니기 마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것 coding23213.tistory.com GSAP의 사이트는 버벅거리는 애니메이션 효과를 부드럽게 만들어 주는 사이트 입니다. https://greensock.com/gsap/ G..

전에 올렸던 마우스 이펙트를 이용해 이번엔 조명 효과를 만들어 보겠습니다. 마우스 이펙트1 https://coding23213.tistory.com/48 마우스 이펙트1 마우스 따라다니기 마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것 coding23213.tistory.com 마우스 이펙트 2 https://coding23213.tistory.com/50 마우스 이펙트 2 GSAP 이용하기 GSAP 사용하기 전에 올렸던 마우스 이펙트1의 마우스는 버벅거리고 움직임이 이상하기에 이것을 보안해 주는 사..

마우스 새로 커서 만들어서 이펙트 주기 마우스를 따라다니는 커서를 만들어 보도록 합시다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Living is a fierce battle. 산다는것 그것은 치열한 전투이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px ghkddn132@naver.com ※마우스 커서 만들기 기존마우스 커서를 대신할 마우스 커서를 만들어주었습니다. .mouse__coursor { position: absolute; left: 0; top: 0; width: 50px; heig..

옹알이 (1) ※풀이 1. validSounds 변수에 "aya", "ye", "woo", "ma"를 포함한 Set을 생성합니다. 이 Set은 유효한 발음을 저장하는데 사용됩니다. 2. reduce 함수를 사용하여 babbling 배열을 순회합니다. reduce 함수는 초기값으로 0을 설정하고, 각 단어를 처리하면서 유효한 발음을 확인하고 카운트를 증가시킵니다. 3. isValid 변수를 true로 저장 합니다. 이 변수는 현재 단어가 유효한 발음으로 이루어져 있는지 여부를 나타냅니다. 4. remainingWord 변수에 현재 단어를 할당합니다. 5. while 루프를 사용하여 remainingWord의 길이가 0보다 큰 동안 반복합니다. 6. foundValidSound 변수를 false로 초기화합니..

안전지대 ※풀이 1. 보드의 크기인 n을 구합니다. board.length를 통해 구할 수 있습니다. 2. 위험 영역을 탐색하기 위해 상대적인 좌표 차이를 저장하는 d 배열을 생성합니다. 각 요소는 [행의 변화량, 열의 변화량]을 나타냅니다. 3. 위험 영역을 저장할 dangerZone이라는 빈 Set을 생성합니다. 4. 이중 반복문을 사용하여 보드를 탐색합니다. · board[i][j] === 1인 경우, 현재 위치가 위험 영역임을 나타냅니다. · d 배열의 각 요소에 대해서, 현재 위치에서 변화량을 더한 새로운 위치 [col, row]를 계산합니다. · 새로운 위치 [col, row]가 보드 내에 있는 경우, 해당 위치를 dangerZone Set에 추가합니다. 5. n*n에서 dangerZone의 ..

저주의 숫자 3 ※풀이 1. 초기값으로 answer를 0으로 설정하고, 숫자들을 저장할 빈 배열 arr을 생성합니다. 2. 반복문을 사용하여 0부터 n까지의 수를 반복합니다. · answer를 1씩 증가시킵니다. · while 루프를 사용하여 answer가 3의 배수이거나 숫자 내에 3이 포함되어 있는 경우, answer를 1씩 증가시킵니다. · answer % 3 == 0: answer가 3의 배수인지 확인합니다. · answer.toString().split('').includes('3'): answer를 문자열로 변환한 후, split() 함수를 사용하여 각 자릿수로 분리한 배열에 '3'이 포함되어 있는지 확인합니다. · 위의 두 조건 중 하나라도 참일 경우, while 루프를 계속 반복하며 ans..

컨트롤 제트 ※풀이 1. s = s.split(' ') 코드는 주어진 문자열 s를 공백을 기준으로 분리하여 배열로 만듭니다. 이렇게 하면 s는 문자열 배열이 됩니다. 2. result라는 빈 배열을 선언합니다. 이 배열은 최종 결과를 저장할 배열입니다. 3. 반복문을 통해 s의 각 요소를 순회합니다. 반복문의 변수 i는 s의 각 요소를 차례대로 가리킵니다. 4. if(i === 'Z') 조건문은 현재 요소 i가 문자열 'Z'인지 확인합니다. 만약 그렇다면 result.pop()을 호출하여 result 배열에서 마지막 요소를 제거합니다. 이는 'Z'의 동작을 시뮬레이션하는 부분입니다. 5. else 블록은 i가 문자열 'Z'가 아닌 경우 실행됩니다. 이 경우, i를 숫자로 변환하여 result 배열에 추가..

외계어 사전 ※풀이 1. dic.some() 메소드는 dic 배열의 각 요소에 대해 주어진 콜백 함수를 실행합니다. 2. 콜백 함수는 v라는 변수를 가지고 있으며, v는 dic 배열의 각 요소입니다. 3.v를 배열로 변환하여 각 문자를 개별 요소로 가지는 새로운 배열을 만듭니다. ([...v]) 4.이 새로운 배열을 정렬합니다. ([...v].sort()) 5.정렬된 배열을 문자열로 변환합니다. ([...v].sort().toString()) 6. spell을 배열로 변환하여 위와 동일한 과정을 거칩니다. ([...spell].sort().toString()) 7.변환된 두 문자열을 비교하여 일치하는지 확인합니다. 8.일치하는 경우 dic.some() 메소드는 true를 반환하고, 그렇지 않은 경우 fa..

진료 순서 정하기 ※풀이 1. emergency.slice()를 사용하여 emergency 배열의 복사본인 order 배열을 생성합니다. 2. order 배열을 내림차순으로 정렬합니다. sort() 메소드에 콜백 함수를 전달하여 정렬 순서를 지정합니다. 3. emergency 배열의 각 요소 v에 대해 다음을 수행합니다: 4. order.indexOf(v)를 사용하여 v의 인덱스를 order 배열에서 찾습니다. 5. 해당 인덱스에 1을 더한 값을 반환하는 새로운 배열을 생성합니다. 6. 생성된 배열을 반환합니다. slice() JavaScript 배열 객체의 내장 메소드입니다. 이 메소드를 사용하면 배열의 일부분을 추출하여 새로운 배열을 반환할 수 있습니다. sort() JavaScript 배열 객체의 ..

한 번만 등장한 문자 ※풀이 1. [...s]를 사용하여 문자열 s를 배열로 변환합니다. 이렇게 하면 문자열의 각 문자가 배열의 요소로 들어갑니다. 2. filter() 메서드를 사용하여 배열의 각 요소 c에 대해 다음 조건을 검사합니다: ·s.match(new RegExp(c, 'g'))는 정규 표현식 c와 매치되는 문자열의 배열을 반환합니다. ·s.match(new RegExp(c, 'g')).length는 c와 매치되는 문자열의 개수를 반환합니다. ·s.match(new RegExp(c, 'g')).length == 1는 c와 매치되는 문자열의 개수가 1인 경우를 검사합니다. 3. 조건을 만족하는 요소들로 이루어진 새로운 배열이 반환됩니다. 4. sort() 메서드를 사용하여 반환된 배열을 알파벳 ..

k의 개수 ※풀이 1. Array(j-i+1)을 사용하여 길이가 j-i+1인 빈 배열을 생성합니다. 2 .fill(i)를 사용하여 빈 배열의 모든 요소를 i로 채웁니다. 3. map((v,index) => v + index)를 사용하여 각 요소에 인덱스를 더합니다. 이로써 배열은 [i, i+1, i+2, ..., j]의 숫자들을 가지게 됩니다. 4. join('')을 사용하여 배열의 요소들을 문자열로 결합합니다. 숫자들이 하나의 문자열로 이어집니다. 5. split(k)를 사용하여 문자열을 k를 기준으로 분리합니다. 이를 통해 k가 등장하는 부분들이 배열로 분리됩니다. 6. length - 1을 사용하여 분리된 배열의 길이에서 1을 뺍니다. 이는 k가 등장한 횟수를 나타냅니다. 그후 리턴하여 결과값을 보..

A로 B 만들기 ※풀이 1. before와 after를 각각 문자 단위로 분리하여 배열로 변환합니다. 2. before.split('')와 after.split('')를 사용하여 문자열을 문자 단위로 분리한 배열을 생성합니다. 분리한 배열을 정렬합니다. 3. sort()를 사용하여 배열을 정렬합니다. 기본적으로는 유니코드에 따라 정렬됩니다. 정렬된 배열을 문자열로 결합합니다. 3. join()을 사용하여 배열의 요소를 문자열로 결합합니다. 기본적으로는 쉼표로 구분됩니다. 4. before와 after를 정렬 및 결합한 문자열을 비교하여 같은지 확인하여, 같으면 1을 반환하고, 다르면 0을 반환합니다. sort() JavaScript 배열의 메서드로, 배열의 요소들을 정렬하는 기능을 제공합니다. 이 메서드..

369 게임 ※풀이 1 1. order.toString()을 사용하여 order 값을 문자열로 변환합니다. 이렇게 함으로써 match 함수를 사용할 수 있습니다. 2. match(/[369]/g)는 정규 표현식을 사용하여 문자열에서 숫자 3, 6, 9와 일치하는 모든 문자를 찾습니다. g 플래그는 전역 검색을 의미합니다. 3. ?? []는 검색 결과가 null 또는 undefined인 경우 빈 배열([])을 반환하도록 합니다. 이는 검색 결과가 없는 경우를 처리하기 위한 방어적인 코드입니다. 4. value.length는 검색된 숫자 3, 6, 9의 개수를 반환합니다. ex1 ) { function solution(order) { let value = order.toString().match(/[369]..

배열 회전시키기 ※풀이 1. direction이 'right'인 경우: · numbers.pop()을 사용하여 numbers 배열에서 마지막 요소를 추출합니다. · 추출한 요소와 나머지 numbers 배열을 합치기 위해 전개 연산자(...)를 사용합니다. · 이렇게 이동한 배열을 numbers 변수에 할당합니다. 2. direction이 'left'(else)인 경우: · numbers.slice(1)을 사용하여 numbers 배열에서 첫 번째 요소를 제외한 나머지 요소들을 추출합니다. · numbers.shift()을 사용하여 numbers 배열의 첫 번째 요소를 추출합니다. · 추출한 첫 번째 요소와 나머지 요소들을 합치기 위해 전개 연산자(...)를 사용합니다. · 이렇게 이동한 배열을 number..

배열 유사도 ※풀이 1. s1.length는 문자열 s1의 길이를 나타냅니다. 2. s2.length는 문자열 s2의 길이를 나타냅니다. 3. [...s1, ...s2]는 문자열 s1과 s2의 문자들을 하나의 배열로 합칩니다. 이 때, 스프레드 연산자(...)를 사용하여 문자열을 개별 문자로 분리합니다. 4. new Set([...s1, ...s2])는 중복을 허용하지 않는 유일한 값만을 포함하는 Set 객체를 생성합니다. Set 객체는 중복된 값을 허용하지 않으므로, 중복된 문자들은 제거됩니다. 5. new Set([...s1, ...s2]).size는 Set 객체의 크기, 즉 유일한 문자들의 개수를 반환합니다. 6. s1.length + s2.length - new Set([...s1, ...s2])..

문자열 뒤집기 ※풀이1 1. my_string.split(''): 입력된 문자열 my_string을 각 문자로 분리하여 배열로 변환합니다. split('') 메서드를 사용하면 문자열의 각 문자가 배열의 각 요소가 됩니다. 2. .reverse(): 배열을 역순으로 뒤집습니다. 즉, 배열의 첫 번째 요소가 마지막 요소가 되고, 마지막 요소가 첫 번째 요소가 됩니다. 3. .join(''): 배열의 요소들을 빈 문자열('')로 이어서 하나의 문자열로 만듭니다. 이때, 각 요소 사이에는 구분자가 없으므로 문자열이 그대로 이어진 상태로 반환됩니다. ex1) { function solution(my_string) { return my_string.split('').reverse().join('') } consol..

짝수 홀수 개수 ※풀이 1. 함수 solution을 정의합니다. 이 함수는 num_list라는 매개변수를 받습니다. 2. answer라는 변수를 [0, 0]으로 초기화합니다. answer는 홀수와 짝수의 개수를 담은 배열로 [짝수의 개수, 홀수의 개수] 형태를 갖습니다. 3. for...of 루프를 사용하여 num_list의 각 요소를 순회합니다. ·item은 현재 순회 중인 요소입니다. ·item을 2로 나눈 나머지를 계산하여 홀수인지 짝수인지 판별합니다. ·item % 2가 0이면 짝수이고, 1이면 홀수입니다. ·answer[item % 2]를 증가시켜 해당 홀수 또는 짝수 카운터를 증가시킵니다. ·item % 2가 0인 경우, answer[0]인 짝수 카운터를 1 증가시킵니다. ·item % 2가 ..

중복된 숫자 개수 ※풀이 1. 함수 solution을 정의합니다. 이 함수는 array와 n라는 매개변수를 받습니다. 2. filter 메서드를 사용하여 array 배열에서 특정 조건을 만족하는 요소들을 걸러냅니다. ·filter 메서드의 인자로는 화살표 함수 (v) => v === n가 전달됩니다. ·v: 배열에서 순회하고 있는 현재 요소의 값입니다. ·v === n는 현재 요소 v와 n의 값이 일치 하는지를 평가하는 조건식입니다. ·filter 메서드는 조건을 만족하는 요소들로 새로운 배열을 생성하여 반환합니다. 4. filter 메서드로 걸러진 배열의 length를 반환 하여 개수를 구합니다. filter() filter() 메서드는 주어진 함수의 조건을 만족하는 배열의 요소들로 구성된 새로운 배열..

배열의 평균값 ※풀이 1. 함수 solution을 정의합니다. 이 함수는 numbers라는 매개변수를 받습니다. 2. reduce 메서드를 사용하여 numbers 배열의 모든 요소를 더합니다. 3. reduce 메서드의 첫 번째 인자로는 (a, c) => a + c라는 콜백 함수가 전달됩니다. ·a: 누적값으로서 각 요소를 더한 값이 누적됩니다. ·c: 배열에서 순회하고 있는 현재 요소의 값입니다. ·a + c는 현재 요소 c를 누적값 a에 더하는 연산을 수행합니다. ·reduce 메서드의 두 번째 인자로는 초기값 0이 전달됩니다. ·초기값이 제공되면, a는 초기값으로 초기화됩니다. ·초기값이 생략되면, numbers 배열의 첫 번째 요소가 초기값으로 설정됩니다. 4. reduce 메서드의 결과를 num..

양꼬치 ※풀이 1. 조건문 if문을 써서 n(양꼬치)이(가) 10 이상인 경우, k(음료수)에서 n을 10으로 나눈 몫을 빼줍니다. 이를 통해 k의 값을 갱신합니다. ~~ 연산자는 숫자를 정수로 변환하는 역할을 수행합니다. 2. answer 변수를 선언하고, answer에 12000*n과 2000*k를 더한 값을 할당합니다. 이를 통해 최종 결과를 계산합니다. 이렇게 하면 양꼬치와 음료수를 시킨 지출액에서 서비스 음료수 값을 뺀 값을 얻을수 있습니다. answer 값을 반환합니다. ex1) { function solution(n, k) { if(n >= 10){ k -= ~~(n/10) } var answer = 12000*n + 2000*k return answer; } console.log(solut..

나이출력 ※풀이 주어진 age에 따라 2023년(2022년에서+1을 해 주었습니다.)에서 해당 age를 뺀 값을 계산하여 반환하는 계산입니다. ex1) { function solution(age) { var answer = 2023- age; return answer; } console.log(solution(40)); //1983 } ex2) { function solution(age) { var answer = 2023- age; return answer; } console.log(solution(23)); //2000 } 각도기 ※풀이 조건문을 주어 angle이 90보다 작은 경우, 1을 반환합니다. 만약 첫번째 조건문이 맞지 않는다면 또 다시 조건문을 넣어angle이 90과 같은 경우, 2를 반환..

몫 구하기 ※풀이 1.num1과 num2라는 두 개의 매개 변수를 받습니다. 2.num1을 num2로 나눈 결과를 answer 변수에 저장합니다. 이때 ~~ 연산자는 소수점 이하의 값을 버리고 정수 부분만 남기는 역할을 합니다. (~가 하나만 있을 경우에는 -(n+1)을 합니다.) 3.최종 결과인 answer 값을 반환합니다. ex1) { function solution(num1, num2) { var answer = ~~(num1 / num2); return answer; } console.log(solution(10,7)) //1 } ex2) { function solution(num1, num2) { var answer = ~~(num1 / num2); return answer; } console...

같은 클래스 라도 추가로 넣는 class의 css의 값에 따라 적용되는 이미지 가 달라집니다. .cards__inner > div { width: 24%; } .cards__inner.col2 > div { width: 49%; } .cards__inner.col3 > div { width: 32.3333%; } .cards__inner.col4 > div { width: 24%; } .cards__inner.col6 > div { width: 15.6666%; } 전체 css .blog__wrap { padding: 100px 0; } .blog__wrap h2 { display: inline-block; border: 1px solid var(--color__black); font-size: 0.8e..

메뉴1 소스 보기 메뉴2 소스보기 슬라이더 1 소스 보기 슬라이더 2 소스 보기 슬라이더 3 소스 보기

전체 소스

지금까지 만든 사이트유형 들을 넣어서 하나의 사이트를 만들어 보도록 하겠습니다. 📖슬라이드유형 보러가기 https://coding23213.tistory.com/43 📖이미지 유형 보러가기 https://coding23213.tistory.com/38 📖이미지/텍스트 유형 보러가기 https://coding23213.tistory.com/42 📖카드유형 보러가기 https://coding23213.tistory.com/30 📖텍스트 유형 보러가기 https://coding23213.tistory.com/47 📖푸터유형 보러가기 https://coding23213.tistory.com/52 우선 새로운 html을 만들어 사이트에 필요한 정보를 적어 줍니다. meta 태그 HTML 문서의 헤더 부분에 포함되..

Figma를 이용해 틀을 만들어 준후 작업을합니다. 우선 body부분에 html을 해주도록 합니다. 그후 style로 가서 만들어 주도록 합니다. 푸터 쿠키 사이트 사이트 소개 정보 확인하기 사이트 도움 주기 쿠키 정보 공유 쿠키 사이트 사이트 소개 정보 확인하기 사이트 도움 주기 쿠키 정보 공유 쿠키 같이 만들기 내 근처 쿠키 모임 제과 학원 알아보기 영상을 통해 만들기 쿠키 나눔 하기 쿠키 주의점 자주 하는 실수 반죽 하는법 오븐 온도 확인하기 재료 확인하기 쿠키의 종류 사진 보기 만들어 보기 쿠키 정보 공유 쿠키 먹어본 후기 고객 문의 1:1 문의 자주 물어보는 질문 광고 문의 정보 수정 요청 2023 쿠키관련 사이트 Portfolio is Power All Right Reserved 푸터 유형01..

우선 FIgma를 이용해 만들고 싶은 텍스트 유형 사이트의 틀을 만들어 줍니다. notice 쿠키를 만들때 주의점 재료의 품질 확인하기 좋은 품질의 재료를 사용하는 것이 맛있는 쿠키를 만드는 핵심입니다. 신선한 재료를 사용하고, 유통기한을 확인하고, 가능한 경우 유기농 또는 천연 재료를 사용하는 것이 좋습니다. 더보기 정확한 양 계산하기 쿠키를 만들 때 정확한 양과 비율을 잘 지켜서 재료를 사용해야 합니다. 레시피에서 지정한 양과 비율을 잘 지켜서 누구든지 쉽게 따라할 수 있는 쿠키를 만들어보아요. 더보기 반죽을 과하게 섞지 않기 반죽을 과하게 섞으면 쿠키가 딱딱해지거나 지루해질 수 있습니다. 반죽이 잘 섞이도록 믹서기나 주걱 등을 사용해서 부드럽게 섞어주시기 바랍니다. 더보기 오븐 온도와 시간 조절하기..

figma를 이용해 만들고 싶은 슬라이드 유형의 사이트를 만든후, HTML로 가 박스 하나를 만들어 안에 들어갈 태그와 텍스트를 넣어 줍니다. 그후 텍스트의 글꼴을 바꾸기 위해 헤드부분에 을 넣고 박스에 class를 nexon 을 주고 css부분 style에.nexon을 만들어 와 밑에 코드와 같이 넣어 주시면 그박스의 모든 글꼴이 바뀝니다. 메인 슬라이드 영역 event 쿠키의 정보를 모아놓은 사이트 다양한 쿠키들에 대한 정보를 제공합니다. 쿠키의 기원부터, 다양한 종류와 특징, 그리고 제조 방법에 이르기 까지 상세한 정보를 제공합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 css작업을 해보겠습니다. /* slider__wrap */위에..

notice 쿠키의 종류 10가지 쿠키의 종류는 매우 다양합니다. 아래는 10가지 이상의 쿠키 종류를 알려드리겠습니다 ·초코칩 쿠키 (Chocolate Chip Cookie) ·오트밀 쿠키 (Oatmeal Cookie) ·스노우볼 쿠키 (Snowball Cookie) ·마들렌 (Madeleine) ·레몬 바 (Lemon Bar) ·마카롱 (Macaron) ·쇼트브레드 (Shortbread) ·스프링클 쿠키 (Sprinkle Cookie) ·맥아담 쿠키 (Macadamia Nut Cookie) ·글로스 쿠키 (Gloss Cookie) ·section안에 박스 3개를 만들어 넣어야 하는내용과 이미지를 넣습니다. ·class가 section__small인 곳에 폰트 사이즈와 border-radius 50px을..

저번에 했었던 카드 유형 사이트 처럼 figma 로 만들고 싶은 이미지 사이트 만들어 본 후에 body부분에 박스를 만들어 사이트에 들어갈 글과 링크를 넣고 class를 이용해 각 목록에 이름을 주고 묶어 줍니다. 그리고 head부분에 자기가 바꾸고 싶은 폰트의 링크를 가져와 올려줍니다. 쿠키 만드는 방법 다양한 종류의 쿠키가 있으며, 재료와 조리 방법에 따라 다양한맛을 느낄 수 있습니다. 쿠키의 종류 초코칩 쿠키, 오트밀 쿠키, 마키롱, 스노우볼 쿠키, 레몬 쿠키, 등이 있습니다. 자세히 보기 쿠키를 만들어봅시다 밀가루, 버터, 설탕 등을 사용하여 만들며, 다양한 재료를 넣어 맛과 향을 냅니다. 자세히 보기 에 위치한 /*img type*/ 위에 부분은 카드 사이트 유형과 같으므로 넘어가고 /*img ..

Figma로만들고 싶은 카드 사이트 만들어 보기 1. 피그마에 들어가서 Frame 을 크기를 설정합니다. 2. layout grid로 가서 count 12개를 만들어 주시고 color의 투명도를 10%, margin을 380 Gutter를 20으로 해줍니다. 3. 만들고 싶은 사이트의 주제와 내용들 그리고 카드 이미지를 Shift+R을 이용해 간격을 정하고 색도 넣어줍니다. ex) 그리고 HTML,CSS을 이용해 Figma를 통해 만들어본 사이트의 주제와 내용들 그리고 카드 이미지의 간격과 색을 설정해줍니다. 일단 코드를 보겠습니다. 쿠키 만드는 방법 쿠키 만드는 방법은 다양하며, 재료나 조리 방법을 바꿔서 다양한 종류의 쿠키를 만들 수 있습니다. 레시피를 찾아보거나 실험을 해보면서 자신만의 맛있는 쿠키..

font-familly 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 (' ')따옴표로 감싸고 여러 개의 글꼴을 (,)쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. ex) font-family:'돋움', Dotum, Arial, Helvetica, sans-serif; font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위는 다음과 같은 것들이있습니다. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. ex) font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위입니다. ex) font-size:..

grid레이아웃 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 우선 만들어야 할 레이아웃을 먼저 스케치 해놓고 만드는것이 가장 편합니다. 일단 레이아웃 결과물을 먼저 가져와서 보여 주었습니다. 처음으로 해야할 것은 박스를 만들기 입니다. 저 그림에는 박스를 7개를 사용한것이 보입니다. 그러므로 "body" 부분에 ""의 부모박스 밑에 7개의 박스를 만들고 각각 id를 주었습니다. 두번째로 "head" 부분에 " 네번째로 부모박스인 "#wrap"에 "gird- template-areas"를 만들어 레이아웃을 테이블 형태로 만들어줘어야합니다. 그리고 가로(grid-template-columns),세로(grid-template-rows) 범위를 정해 주어야하는데 이것은 밑에 이미지와 css를..

flex 레이아웃 요소들이 포함된 부모 박스에 display: flex 를 선언하고, 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. 다음 display: flex가 들어간 코딩으로 간단한 레이아웃을 만들어 보았습니다. 속성 flex flex는 세개의 요소 가 섞여 있습니다. flex-grow 자식 요소가 적거나 그 크기가 작아 공간이 남을 때 항목의 크기를 늘려 채워 주는 방법을 정의 합니다. 0 (기본값) 1 항목들이 모두 1이면 같은 크기임 양수 값을 높게 줄수록 더 늘어남 공간이 부족할 때는 어떤 값도 무의미 flex-shrink 자식 요소가 많거나 그 크기가 커서 공간이 부족할때 항목의 크기를 줄여 채워주는 방법을 정의 합니다. 0 공간이 부족해도 항목의 크기..

선택자(selector) ·선택자란 CSS로 UI 의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. ·선택자의 종류는 type선택자, id선택자, class선택자, 전체선택자, 하위선택자, 자식선택자, 인접선택자, 형제선택자, 그룹 선택자, 속성 선택자 ,가상 클래스 선택자 ,가상 요소 선택자, 종속 선택자 , 선택자의 우선순위 가있습니다. ·CSS로 속성을 부여하는 형식은 다음과 같습니다. type선택자 선택자중 가장 간단한 선택자입니다. html문서의 태그 이름을 선택자로 사용할 수 있습니다. id선택자 ※html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. ※html 요소에id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른..

float 블록 레벨 요소(Block-level Elements)는 원래 마크업을 할때 세로로 나열이 되지만, float을 이용하여 가로로 배치할수 있습니다. float은 레이아웃으 만들기 위한 필수 적인 속성 입니다. 우선 사진은 블록 레벨 요소 중 하나인 에 색깔과 크기를 주어 아래와 같이 여러개의 박스를 만들었습니다. 이처럼 세로로 블록 레벨 요소는 세로로 나열이 되기 때문에 이것을 자연스럽게 배치하기 위해 float을 사용합니다 . float의 속성값 에는 " left " 와 " right "가 있습니다. (자연스럽게 배치하고 싶은 요소에 넣으시면 됩니다.) ※left : 요소를 왼쪽에 배치하고 나머지 요소 들과 자연스럽게 배치 되도록 합니다. ※right : 요소를 오른쪽에 배치하고 나머지 요소..

ID 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 "id"로 이름을 붙을 때는 유일한 이름을 부여 해야 하며, 다른 요소에 같은 id명을 주어서는 안된다. See the Pen Untitled by jhwangwoo (@jhwangwoo) on CodePen. 예제를 보면 p태그 중 id 가 'ctxt'인 요소만 색을 파란색으로 표시 하도록 하였습니다. 그리고 id가 'txt'인 p요소는 id만 주어졌을뿐 스타일에 따로 지정된 색이 없어 p요소에 처음 지정된 빨간색으로 표시가 되었습니다. ID 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML요소에 같은 이름을 부여..

내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재 하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 .css확장자를 가진 별도파일로 저장하고, HTML에소는 태그를 이용합니다. 내부 스타일시트는 그 스타일이 기술된 페이지만 적용 하지만, 외부 스타일시트는 그 스타일을 선언한 모든 HTML에 적용됩니다. @import CSS안으로 다른 CSS 파일을 불러들일 경우 사용합니다. 또한 어떤CSS 파일 안에 공통 CSS를 불러들일 경우에도 사용합니다. @import 는 공통으로 들어가야 할 스타일을 따로 저장 하여 다른 CSS에 삽입 시켜 사용할 수 있도록 해줍니다. 그러나 CSS 파..

우선 ajax를 사용하기 위해 라이브 러리를 가져와야 합니다. ※이메일 유효성 검사 하기 let isEmailCheck = false; function emailChecking(){ // 이메일 유효성 검사 if($("#youEmail").val() == ''){ $("#youEmailComment").text("* 이메일을 입력해주세요!"); $("#youEmail").focus(); return false; } let getYouEmail = RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([\-.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i); if(!getYouEmail.test($("#youEmail").val())){ $("#youE..

모든 PHP 소스 보러가기 ※게시판 검색 (boardSearch.php) 전체소스 검색한 값의 개수 가져오기

※sessionCheck.php - 게시글보기(boardView.php) 맨 위에 부분에 include "../connect/sessionCheck.php";를 추가하여 로그인을 하여 memberID값이 있어야지만 게시글을 볼수 있게 하였습니다. ※게시판 수정하기(boardModify.php) echo "비밀번호"; - $result 로게시글 수정하기에 내용과 제목을 입력한곳에 위에 문장을 더 추가하여 회원의 비밀번호를 입력해야지 게시글을 수정할수 있게 해주었습니다. -게시판 수정저장하기boardModifySave.php

※게시판 (board.php) 전체소스

※메인 화면 어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다. 신입의 열정과 도전정신을 깊숙히 새기며 배움에 있어 겸손함을 유지하며 세부적인 곳까지 파고드는 개발자가 되겠습니다. main에 필요한 정보를 가져와 실행 해주거나 직접 입력하였습니다. - 맨 처음에 있는 이것은 sql에 에있는 회원 정보 와 php 세션을 시작하는 함수 가져오고 있습니다. connect.php - sql의 에 접속을 해 그곳에 있는 회원의 정보를 가져오고 있습니다. session.php - 세션을 시작하는 함수 입니다. - 웹 애플리케이션에서 사용자 상태를 추적하거나 데이터를 저장하기 위해 세션을 사용합니다 - 이 함수로 인해 로그인을 하면 회원의 값을 가져오거나 로그인이 된 상태 인지를 알수있게 해줍니다. ..

See the Pen Untitled by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen.

See the Pen Untitled by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen.

See the Pen Untitled by jhwangwoo (@jhwangwoo) on CodePen.

01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 답:190 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); } 답:50,10 03. 다음의 결괏값을 작성하시오. { function func(b..

01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 129 풀이 : let i = 0; ,let sum = 0; i = i+1 if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i i는 0에서 부터 시작 해서 9까지 i = i+1 0 i=1 (1% 3 == 1) 1 += 1; 1 i =2 ( i % 3 == 2) 2 *= 2 2 i =3 ( i % 3 == 0) 2 -= 3 3..

※ 01. 다음의 결과값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 답 0 ※ 02. 다음의 결과값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } 답 20 21 ※ 03. 결과값을 작성하시오. { function func(){ let a = []; for(i=1; i40 일때 true면 50을 반환하고 false면 40을 반환 합니다. 조건은 true이므로 50을 반환합니다. 그 후 두..

1. 다음 결괏값이 -1인 것의 합을 구하시오. { const str = "javascript refercence"; str.indexOf("javascript"); str.indexOf("javascripts"); str.indexOf("j"); str.indexOf("J"); str.indexOf("a"); str.indexOf("ja"); str.indexOf("jv"); str.indexOf("refercence"); str.indexOf("r"); str.indexOf("re"); str.indexOf("javascript", 0); str.indexOf("javascript", 1); str.indexOf("refercence", 0); str.indexOf("refercence", 11); ..

01.결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 답 1 3 true 02. 다음의 결괏값을 보고 빈칸을 채우시오. { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document.write("함수1가 실행되었습니다."); _______(); } callback(func); //함수1가 실행되었습니다. /..

1.결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 답: 함수가 실행되었습니다. 2.결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 답: 함수가 실행되었습니다. 3.결괏값을 작성하시오. { let sum = 0; for(var i=1; i

01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 정답:false 02. 결괏값을 작성하시오. { let num = 0; while( num

01. 다음의 출력값을 보고 빈칸을 채우시오! { var x = 100; var y = 200; var z = "javascript"; console.log(__); //출력 값 100이 나오려면 (x)를 넣어줘야합니다. console.log(__); //출력 값 200이 나오려면 (y)를 넣어줘야합니다. console.log(__); //출력 값 300이 나오려면 x와y를 더해줘야합니다.(x+y) //100 //200 //300 } 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100; let y = 200; let z = "javascript"; x = ___; //출력값이 300이 나오기 위해 x를 (300)으로 변경 시켜야 합니다. y = ___; //출력값이 400이 나오기 위..

섹션 (Section)이란? ◎블록 요소 입니다. ◎HTML 문서의 맥락이 같은 요소들을 주제별로 그룹화 해주는 태그 입니다. ◎ 연관된 문서의 단락이 아닌, 일반 컨테이너로 사용하면 안됩니다.(단순한 스타일을 줄 목적으면, 태그를 이용.) ◎섹션주제에 대한 제목 요소 ~을 포함 하는 것이 좋습니다. ◎ 텍스트, 인라인 요소 블록 레벨 요소를 포함 할수 있습니다. 섹션 관련 태그 ◈ · HTML 문서의 주요 콘텐츠 영역을 의미하는 태그 입니다. · 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. · 태그 안에서 태그를 사용 하면 안되고, 태그 안에서 태그 사용이 가능합니다. ◈ · HTML 문서의 헤더 영역을 의미하는 태그 입니다. · 제목이나 내비게이션, 검색 등의 내용을 포함 ..

ㅇㅇㅇㅇㅇㅇ

시멘틱 마크업(Semantic Makup) '시멘틱 (semantic)' 의 사전적 뜻은 '의미론적인' 뜻이며, '마크업(Makup)'은 HTML 태그로 문서를 작성하는 것을 말합니다. 즉 시멘틱 마크업은 '의미론적인 HTML 태그 문서를 작성' 하라는 뜻 입니다. 그 이유는 HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 그정보를 동일하게 받아 들일 환경이 아니거나, 작업자마다 콘텐츠의 의미를 해석 하는 것에 차이가 조금씩 생겨서 자신만 알아볼수 있게 되기 때문에 가급적 시멘틱하게 마크업을 해야 합니다. 장점 1. 검색 엔진이 시멘틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화에 유리합니다. 2. 시각 장애가 있는 사용자가 의미를 잘 파악할 수 있습니다..

인라인 요소 (Inline Element) 특징 1. 인라인 요소는 마크업을 할 때 줄 바꿈이 일어나지 않아 가로로 정렬이 된다. 2. 인라인 요소는 텍스트(문자)와 인리인 요소를 자식 요소로 포함 할수 있다. 3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없다. 4. 인라인 요소는 너비나 높이 값을 줄 수 없다.(width,height) 인라인 요소의 태그 : 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소 등을 URL로 연결할 수 있는 하이퍼 링크를 만들때 사용되는 태그 : 소리 콘텐츠를 포함할 때 사용하는 태그 : 인라인 요소들을 그룹으로 정의하는 태그 : 사용자로 부터 데이터 값을 입력 받기 위한 태그 : 이미지를 넣는 태그 : 클릭 가능한 버튼이 나타나는 태그 : 아래..