꿈트(GGUMT)

웹디자인기능사 실기 레이아웃 만들기 완성화면

웹사이트 만들기 유형별로 나누어 만들었던 웹페이지의 HTML, CSS를 합쳐 하나의 웹사이트로 만들어 보려고 합니다. 그동안 공통css와 reset.css는 같은 걸로 작업해 왔기에 잘 조합만 하면 쉽게 만들 수 있겠죠?. 아직 좀 더 다듬어야 하지만 @media 태그를 적용하여 반응형으로도 만들 예정 입니다. 🏁. 완성화면 ✈. HTML 헤더영역바로가기 슬라이드영역바로가기 이미지영역바로가기 이미지/텍스트영역바로가기 카드영역바로가기 배너영역바로가기 텍스트영역바로가기 푸터영역바로가기 슬라이드영역 event 식물 건강하게 키우기 이번 식물은 죽이지 마세요. 건강하게 오래오래 잘 키울 수 있어요. 처음 보는 식물도 잘 키울 수 있어요! 자세히보기 상담신청 이전이미지 다음이미지 첫번째이미지 두번째이미지 세번째이..

텍스트 타입 웹페이지 만들기 여섯개의 텍스트컨텐츠가 들어있는 웹페이지를 만들어 보려고 합니다. ✈. 완성화면 ✈. FIGMA 디자인화면 ✈. 소스링크 https://github.com/aimeekwon/web2023/blob/main/site/textTypeType/textType01.html GitHub - aimeekwon/web2023: 수업시간 예제 수업시간 예제. Contribute to aimeekwon/web2023 development by creating an account on GitHub. github.com `✈. 작업순서 작업할 내용 수집하고 정리하기 -> 피그마로 정확하게 디자인 -> VS코드에서 코딩 🏁. HTML body> NOTICE 나에게 맞는 반려식물 고르기 건강 관심형..

/ 리액트 입문서 intro 대상 - 리액트 입문자 - 자바스크립트도 리액트도 어려운 프론트앤드 개발 입문자 index 1- 3장 : 리액트 전 알아야 할 자바스크립트 기초 4장- 끝 : 리액트기본, 리액트에서 CSS다루기, 재랜더링,글로벌State관리, 리액트 개발에 타입스크립트 사용하기 등 참고 예제 다운로드 https:github.com/moseskim/book-react-code / 1장. 모던자바스크립트 기초 1-1. 모던자바스크립트 개요 모던자바스크립트의 특징 - 리액트, 뷰 앵귤러 등 가상 DOM을 이용하는 라이브러리/ 프레임워크를 사용 (최근에는 스벨트 처럼 가상 DOM을 이용하지 않는 기술도 등장) - npm, yarn 등 패키지 관리자 사용 - 주로 ES6이후의 표기법 사용 - 웹팩 등..

자바스크립트를 이용하여 GAME EFFECT 뮤직플레이어 만들기 완성화면 script -음악에 대한 정보 저장하기 const allMusic = [ { name : "1. summer", artist : "Joe Hisaishi", img : "music_img01", audio : "1.mp3" },{ name : "2. spring", artist : "Joe Hisaishi", img : "music_img02", audio : "2.mp3" },{ name : "3. hello", artist : "patric", img : "music_img03", audio : "3.mp3" },{ name : "4. hello", artist : "patric", img : "music_img04", aud..

게임 이펙트 웹 페이지 만들기 완성화면 script ✈. 운영체제 정보 보여주기(하단) function printAgent(){ // 운영체제 정보 알아내기 let os = navigator.userAgent.toLowerCase(); let sw = screen.width; let sh = screen.height; let info = document.querySelector(".info"); if (os.indexOf("windows") >= 0) { info.innerHTML = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다." } else if (os.indexOf("macintosh") >= 0) { info.innerHTML = "현재 맥을 사용하..

WebGL을 이용한 애니메이션 만들기 WebGL은 웹기반의 그래픽 라이브러리 입니다. 자바스크립트 프로그래밍 언어를 통해서 사용할 수 있으며 호환성이 있는 웹 브라우저에서 인터랙티브한 3D 그래픽을 사용할 수 있도록 제공됩니다. ✈. CDN 🏁. 코드보기

See the Pen Tail Animation by aimee418 (@aimee418) on CodePen.

font style 문자 스타일 정리집 font-style .normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } font-family font-family속성은 하나 이상의 글꼴 모음을 쉼표로 구분하여 나열합니다. 각 글꼴 패밀리는 또는 값 으로 지정됩니다 . 아래 예에는 두 개의 글꼴 모음이 나열되어 있습니다. 첫 번째는 a 이고 두 번째는 a 입니다 . 글꼴 모음의 이름입니다. 예를 들어 "Times"와 "Helvetica"는 글꼴 모음입니다. 공백이 포함된 글꼴 패밀리 이름은 따옴표로 묶어야 합니다. 예: "Comic Sans MS". 일반 글꼴 패밀리는 지정된 글꼴을 사용할 수..

선택자 (selector) HTMl문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있다. 선택자의 종류는 type선택자, id선택자, class선택자, 등이 있다 / id와 class의 차이점 " id선택자 HTML 요소에 id 로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른요소에 같은 id명을 또 주면 안된다. CSS에서는 id선택자앞에 #을 붙여야 한다. *id명이나 class명은 숫자로 시작할 수 없고, 주로 영문으로 시작한다. " class선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있다. HTML요소에 같은 이름을 부여할 때에는 class로 이름을 붙인다. 즉, 여러개의 요소에 같은 class명을 부여 할..

" CSS 기본문법 CSS(Cascading Style Sheet)를 정의하는 방법으로는 내부 스타일시트, 외부스타일시트, 인라인 스타일시트 등이 있습니다. 01 / 내부 스타일시트 CSS를 HTML문서 안에 로 기재하여 HTML문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 02 / 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 03 / 인라인 스타일시트

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) } 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); } 03. { function func(begin, diff, n){ cnt = 1; ret = begin; while(true){ cnt += 1; r..

scrollr.js 라이브러리를 이용하여 패럴랙스 페이지 만들기 -scrollr.js 라이브러리를 이용하여 스크롤값에 따라 화면이 다양하게 보여지는 패럴랙스 페이지 만들기 scrollr.js "scrollr.js"는 스크롤 이벤트를 사용하여 패럴랙스 효과를 만드는 자바스크립트 라이브러리입니다. 스크롤 이벤트에 따라 요소의 위치, 크기, 회전 등의 CSS 속성을 변경하여 패럴랙스 효과를 구현합니다. 또한, 요소의 위치나 속성을 스크롤 위치에 따라 동적으로 계산하고 조작할 수 있어서 매우 다양한 효과를 구현할 수 있습니다. scrollr.js는 jQuery를 기반으로 작성되었으며, 사용하기 쉬운 API와 다양한 설정 옵션을 제공 🏳‍🌈. 패럴랙스 란? 패럴랙스 효과(Parallax Effect)는 웹사이트에..

정보처리기능사 시험을 대비해서 기출문제를 풀고 오답노트를 만들어 보자 전자계산기 일반 / pc운영체제 채널장치 입출력 장치와 중앙처리장치 장치 사이 속도 불균형보완(주기억 장치사이에서 입출력 전담기) opcode 명령어 형식-첫번째 바이트에 기억되는 것OP-code + Operand(코드부+주소부) AND 반가산기 자리올림 절대번지 기억장치 고유-16진수로 순서대로 정한 번지 0100 2진수 1011의 1의 보수 1+A =1, 1˙A=A, 0+A =A, 0’A=0 불대수정리 immediate address 주소지정방법 : 처리속도 가장 빠른 것 ASCII코드 -7비트구성 통신제코드/ 128가지문자표현/ -16비트코드는 유니코드 멀티플렉서 -출력이 오직 1개 : 입력은 여러개 -입력이 오직 1개 (출력선 ..

PHP 를 이용하여 게시판의 검색 페이지 만들기 board.php ✈. 게시판의 검색창 영역 : 검색 될 키워드와 검색 옵션 선택 정보를 input과 select 태그에 넣어줍니다. : name과 id를 달아줍니다 : 검색창이 빈칸이 되지 않도록 require를 넣습니다 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 boardSearch.php ✈. 게시판 검색 게시판에 총 게시글 갯수를 보여주는 코드입니다

PHP 웹사이트 게시판 페이지 만들기 게시판 한 페이지에 20개씩 보이기 // $page = 1; if(isset($_GET['page'])){ $page = (int) $_GET['page'];//숫자로 인식해서 오류 없도록 선언해줌 } else { $page = 1; } $viewNum =20; $viewLimit = ($viewNum * $page) - $viewNum; //1페이지부터 페이지당 2-개씩 내림차순으로 보여줌(최근이 먼저나와야하니까) //1~20 DESC LIMIT 0, 20 -->page1 (viewNum * 1) - viewNum //21~40 DESC LIMIT 20, 20 -->page2 (viewNum * 2) - viewNum //41~60 DESC LIMIT 40, 20 ..

엑셀 문서 여러개 열었을 때 PC가 버벅거릴 때 해결 방법 1. 엑셀에서 '파일' 클릭 2. '옵션' 클릭 3. '고급' 클릭 4. 스크롤 중간까지 내리면 '하드웨어 그래픽 사용안함'에 체크 이렇게 설정하면 해결

웹로그( Web Log) 란? 자사의 사이트를 방문한 사용자들의 행동과 활동에 대한 기록을 담은 파일을 말한다. 이 파일은 각 사용자가 언제, 어디서, 어떤 페이지를 방문 했는지에 대한 정보를 포함함며, 웹사이트의 성과와 트래픽 흐름을 분석하는 데 사용된다. 페이지뷰(Page View): 사용자가 특정 페이지를 방문한 횟수를 나타냅니다. 세션(Session): 특정 사용자가 웹사이트에 접속하여 떠나기까지의 활동 기간을 나타냅니다. 방문수(Visitor): 웹사이트를 방문한 고유한 사용자의 수를 나타냅니다. 쿠키(Cookie): 사용자의 브라우저에 저장되는 작은 데이터 조각으로, 사용자를 식별하고 추적하는 데 사용됩니다. 반송수(Bounce Rate): 한 페이지만 방문한 후 웹사이트를 떠난 사용자의 비율..

웹 접근성을 고려한 HTML 접근성을 고려한 HTML 을 작성하는 방법을 배워 보자. HTML과 접근성 의도와 목적에 맞게 올바른 HTML을 구현하는 것은 왜 중요할까? 예를 들어, 비디오를 재생하는 버튼을 html로 작성해 보자. 1) div태그 로 작성 Play video​ 2) 웹 접근성을 고려하여 button태그로 작성 Play video HTML에는 요소마다 의미가 내장되어 있다. button태그는 키보드 접근성이 내장되어 있어 tap으로 탐색가능하다. 웹접근성을 고려한 HTML을 작성한다면 시간적으로도 효율적이고 간결한 코드를 작성 할 수 있다. 장점 1. 개발하기가 더 쉽다. 일부 내장된 기능이 제공되어 이해하기도 더 쉽다. 2. 모바일에서 더 좋다. 시맨틱HTML은 의미없는 코드보다 파일이..