june blog

반려묘을 키우는 방법 반려묘을 키우는 것은 책임감 있는 일입니다. 경제적 능력 반려묘가 아플떄 병원도 가야하고 사료,모래 끊이지 않게 공급해야함 아무튼 돈이 많이 들어감 자세히보기 고양이 알레르기 고양이는 생각보다 털이 많이 날리는 동물임 천식있으시면 정말 신중하게 생각 해야함 자세히보기 완성 보통 홈페이지에서 많이 쓰이는 section 구조이다. 일단 html 과 css 만으로 구성을 했고 동적 요소는 다음에 자바스크립트를 이용해서 추가 할 예정입니다. 내가 생각 했을때 홈페이지를 구성할때 중요한건 구성인거 같다. 구성을 잘 짜야지 나중에 큰일이 없을꺼 같다. 구성을 잘못 짜면 나중에 유지보수 할떄 많이 힘들꺼 같다. 그리고 시멘틱 태그는 아직 쓰임새가 익숙하지 않다. 더 공부를 해야겠다.

1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색등의 내용들을 포함 할수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없습니다. See the Pen header tag by ture403 (@ture403) on CodePen. 1. HTML 문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함 할수 있습니다. See the Pen nav tag by ture403 (@ture403) on CodePen. 1. HTML 문서에서 맥락이 같은 요소들은 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소 ( ~ )를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 요소,..

힛힛힛

시멘틱 마크업 시멘틱 (semantic) 의 사전적 뜻은 '의미론적인' 정도로 해석할 수 있는데, 이것은 마크업 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 시멘틱 마크업 종류 시멘틱 마크업 태그의 종류는 엄청 다양하지만, 주로 사용되는 태그에 대해서만 알아보도록 하겠습니다. header : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼 등의 요소가 포함될 수 있습니다. nav : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 내비게이션을 말합니다. 메뉴, 목차, 색인 등에 사용됩니다. main : 문서 의 주요 콘텐츠를 나타냅니다. article : 문서, 페이지..

인라인 레벨 요소 (Inline Element) 인라인 요소는 마크업을 할떄 가로롤 정렬이 됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다. 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다. 인라인 요소 특징 인라인 요소는 줄 바꿈이 일어나지 않습니다. 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다. 블록 레벨 요소(Block-level Elements) 블록 레벨 요소는 마크업을 할 떄 줄이 바뀌는 특성을 가지고 있습니다. 블록요소는 하나의 박스라고 생각하면 됩니다. 하나의..

지금까지 완성된 화면입니다. HTML 화면입니다. hello Game World 2023년 4월 24일 16시 50분 뮤직 듣기 아이 듣기 소리 듣기 사운 듣기 music player 노래 제목 노래 작가 0:00 3:55 뮤직 리스트 현재 맥을 사용하고 있으면, 화면크기는 1920 X 760 입니다. JS코드입니다. //전체 이미지와 오디오 객체에 저장 const allMusic = [ { name : "1. 저리가라", artist : "partick", img : "music_view01", audio : "music_audio01" },{ name : "2. 저리가라", artist : "partick", img : "music_view02", audio : "music_audio02" },{ n..

완성된 화면 입니다. HTML 화면입니다. hello Game World 2023년 4월 24일 16시 50분 뮤직 듣기 아이 듣기 소리 듣기 사운 듣기 music player 노래 제목 노래 작가 0:00 3:55 현재 맥을 사용하고 있으면, 화면크기는 1920 X 760 입니다. css 코드입니다. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap'); .music_inner { width: 350px; /* background: rgba(0,0,0,0.5); */ filter: blur(0.3); backdrop-filter: blur(20px); position: absolute; left: 50%..

완성된 화면 입니다. HTML 화면입니다. hello Game World 2023년 4월 24일 16시 50분 뮤직 듣기 아이 듣기 소리 듣기 사운 듣기 현재 맥을 사용하고 있으면, 화면크기는 1920 X 760 입니다. css 코드입니다. * { cursor: none; } body { width: 100%; height: 100vh; overflow: hidden; } .cursor { width: 20px; position: absolute; left: 0; top: 0; z-index: 1000; pointer-events: none; user-select: none; cursor: none; } #header { position: fixed; left: 0; top: 0; background-c..

at() ES2021에서 도입된 문자열 메서드 중 하나입니다. 이 메서드는 문자열에서 특정 인덱스의 문자를 반환합니다. charAt()과 비슷하지만, at()은 유니코드 코드 포인트의 인덱스를 사용한다는 점에서 다릅니다. 반환할 문자의 위치를 나타내는 0부터 시작하는 정수 값입니다. 만약 인덱스가 문자열 길이를 벗어난 경우, undefined를 반환합니다. 구문 at(index) 예시 const str = 'Hello, world!'; console.log(str.at(1)); // 출력 결과: "e" console.log(str.at(2)); // 출력 결과: "l" console.log(str.at(3)); // 출력 결과: "l" console.log(str.at(4)); // 출력 결과: "o" ..

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)..

완성된 화면 입니다. HTML 화면입니다. hello javascript,react,php 남은시간 잘보내서 행복하게 삽니다. 그럼이만 skrollr.js의 양식을 이용해서 작성해주었습니다. data-0은 스크롤이 0일때 의 효과를 주는 코드입니다. 이런식으로 각각 주어서 노다가 방식으로 css효과를 주었습니다. css 코드입니다. * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Cookie"; } body { /* height: 20000px; */ background-color: #E0E4DD; } .scrollTop { position: fixed; left: 10px; top: 10px; z-index: 1000; width: 4..

완성된 화면 입니다. HTML 화면입니다. Javascript parallax Effect01 패럴랙스 이펙트 - 메뉴 효과 1 2 3 4 5 6 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 결과도 중요하지만, 고정을 더 중요하게 생각한다. 02 Section2 산다는것 그것은 치열한 전투이다. 03 Section3 언제나 현재에 집중할수 있다면 행복할것이다. 04 Section4 고통이 남기고 간 뒤를 보라! 고난이 지나면 반드시 기쁨이 스며든다. 05 Section5 행복한 삶을 살기위해 필요한 것은 거의 없다. 06 Section6 좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다 07 Section7 평생 살 것처럼 꿈을 꾸어라.그리..

문제입니다. 명언 데이터를 가져옵니다. 그중에서 1개의 명언만 가져와서 문서의 #result 영역안에 있는 quote에 명원 내용을 author 안에는 말한 사람을 넣으세요 그리구 10마다 바뀌게 출력하세요. 길라잡이 무작위 수를 사용해서 명언을 가져온 후 명언 부분과 말한 사람 이름을 나눠서 화면에 영역에 표시힙니다. 완성화면 입니다. HTML 코드입니다. HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다. JS 코드입니다. const num = document.querySelector(".num"); const quote = document.querySelector(".quote"); const author = document.querySelector(".author"); cons..

문제입니다. 자바스크립트에서 자동으로 복권 번호를 생성해 주는 프로그램을 작성하려고 합니다. 번호는 중복되면 안되므로 셋을 이용할 것이고 숫자는 1부터 45까지 범위안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 버튼을 클릭했을떄 모든 조건을 반영해서 6개의 숫자를 추출하는 소스를 작성해보세요. See the Pen Untitled by ture403 (@ture403) on CodePen. 완성화면 입니다. HTML 코드입니다. 로또 번호 생성기 클릭 HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다. JS 코드입니다. const result = document.querySelector('#result'); const button = document.querySelector..

문제입니다. 명언 데이터를 가져옵니다. 그중에서 1개의 명언만 가져와서 문서의 #result 영역안에 있는 quote에 명원 내용을 author 안에는 말한 사람을 넣으세요 그리구 10마다 바뀌게 출력하세요. 길라잡이 무작위 수를 사용해서 명언을 가져온 후 명언 부분과 말한 사람 이름을 나눠서 화면에 영역에 표시힙니다. See the Pen 숙제 by ture403 (@ture403) on CodePen. 완성화면 입니다. HTML 코드입니다. HTML은 그냥 result 안에 감싸여진 div박스 3개가 있습니다. JS 코드입니다. const num = document.querySelector(".num"); const quote = document.querySelector(".quote"); const..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect07 슬라이드 이펙트 - 썸네일 슬라이드(버튼,썸네일) 1 2 3 4 5 6 7 prev next ture403@gmail.com css 코드입니다. /* silder_wrap */ .slider_wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%); width: 800px; height: 450px; box-shadow: 0 50px 100px rgba(0,0,0,0.4); } .slider_img { position: relative; width: 100%; height: 100%; overflow: hidden; } .sl..

완성된 화면 입니다. HTML 화면입니다. Javascript slider Effect06 슬라이드 이펙트 - 이미지 슬라이드(버튼,닷메뉴) 1 2 3 4 5 6 css 코드입니다. /* silder_wrap */ .slider_wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .slider_img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider_inner { /* 전체 이미지를 감싸고 있는 부모박스 : 움직이는 영역 */ display: flex; flex..

무슨 수업시간에도 못끝내는 수준의 노가다.... 지지

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

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

font-family: 글자의 폰트를 지정합니다. font-family: 'arial'; font-size: 글자의 크기를 지정합니다. font-size: 10px; font-weight: 글자의 굵기를 지정합니다. font-weight: bold; font-style: 글자의 기울기를 지정합니다. font-style: italic; font-variant: 글자의 작은 대문자로 설정하거나 재설정을 지정합니다. font-variant: small-caps; line-height: 글자의 줄간격을 지정합니다. line-height: 1.4; font:한줄로 쓰는 표기법입니다. font: bold 12px/1.4 "arial"; color:글자의 색을 지정합니다. color : aqua; letter-spa..

Grid란? CSS에서 제공하는 레이아웃 모듈 중 하나로, 복잡한 레이아웃을 구현할 수 있는 강력한 기능을 제공합니다. CSS Grid를 사용하면 여러 열과 행을 사용하여 레이아웃을 만들 수 있으며, CSS Grid를 사용하려면 먼저 그리드 컨테이너를 정의해야 합니다. display: grid 속성을 사용하여 그리드 컨테이너를 만들고, grid-template-columns 및 grid-template-rows 속성을 사용하여 그리드의 열과 행을 정의합니다. 각각의 열과 행은 크기를 지정할 수 있으며, fr, auto, minmax(), repeat() 등의 값으로 지정할 수 있습니다.이를 통해 유연하고 반응형인 웹 페이지를 만들 수 있습니다. 아래는 CSS Grid의 주요 속성들입니다. display:..

Flex란? CSS에서 제공하는 레이아웃 모듈 중 하나로, 유연하고 반응형인 웹 페이지 레이아웃을 만드는 데 도움이 됩니다. Flexbox 모델을 사용하면 가로 또는 세로 방향으로 유연한 컨테이너를 만들고, 그 안에 배치되는 유연한 아이템들을 쉽게 배치할 수 있습니다. Flexbox는 간단하고 직관적인 레이아웃 설계를 가능하게 하며, 반응형 웹 디자인에서 매우 유용합니다. Flexbox 레이아웃은 컨테이너 엘리먼트와 그 안에 들어가는 자식 엘리먼트들을 정의하는 것으로 시작합니다. display: flex 속성을 사용하여 컨테이너 엘리먼트를 정의합니다. 컨테이너 안에 있는 자식 엘리먼트들을 Flex 아이템이라고 하며, flex-direction, justify-content, align-items, ali..

선택자 : css로 UI의 어는 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. css로 속성을 부여하는 형식은 다음과 같습니다. 01.type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 다음예제에서는 p 태그 안의 글자들을 파란색으로 표시하도록 속성을 부여하고 있습니다. See the Pen type 선택자 by ture403 (@ture403) on CodePen. 02.id선택자 html 문서의 요소중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. html 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다. css에서는 id 선택자 앞에 #을 붙여야 합니다. id명이나 cl..

1.float 개요 float 속성은 요소를 좌우 방향으로 띄워서 배치하는 데 사용됩니다. 일반적으로 이미지나 텍스트를 주변에 감싸는 레이아웃을 구현하는 데 많이 사용됩니다. float 속성은 다음과 같은 값을 가질 수 있습니다. 기본식 float : left; 속성값 속성설명 left 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록함 right 요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록함 none float을 취소할때 사용합니다. 2.float 사용 예제 2-1 float : left 예문 See the Pen flaot 예제 by ture403 (@ture403) on CodePen. 2-2 float : right 예문 See the Pen Untitled by ture..

ID 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 합니다. 다른 요소에 같은 id명을 또 주어서는 안됩니다. css에서는 id선택자 앞에 '#'dmf 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다. See the Pen css id by ture403 (@ture403) on CodePen. CLASS 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML 요소에 이름을 부여할 때에는 class로 이름을 붙입니다. 즉, 여러 개의 요소에 같은 class명을 부여할수 있습니다...

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

CSS(cascading style sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트 만으로도 사용할 수도 있습니다. 또한 인라인 스타일시트는 태체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다. 01.내부 스타일 시트 CSS를 HTMl 문서 안에 태그로 기재하여 HTML 문서안에 CSS가 함께 저장되도록 하는 형태입니다. See the Pen Internal Style Sheet by ture403 (@ture403) on CodePen. 02.외부 스타일 시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 ..

전체 소스 보기 https://ture403.github.io/web2023/webd/index.html

전체 소스 보기 https://ture403.github.io/web2023/webd/index.html

시안 싸이트 입니다. 참조 사이트 아이허브 : https://iherbkr.com/ 오플닷컴 : https://www.ople.com/mall5/ 필리 :https://pilly.kr/ 비타민샵 :https://vitaminshop.co.kr/ GNC : https://www.gnc.com/ 필라이즈 :https://www.pillyze.com/ 닥터피앤티 :https://www.pntmall.com/ 만개의레시피 :https://www.10000recipe.com/ 82cook :https://www.82cook.com/ 램프쿡 :http://www.lampcook.com/ 레시피뱅크 :https://www.recipebank.co.kr/ 오키친 : https://ottogi.okitchen.co.kr..

완성된 화면입니다. html코드입니다. 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 Cat 소개 입양문의 주의할점 지점 공지사항 찾아오시는길 로그인 슬라이드 영역 event 반려묘와 함께하는 싸이트 고양이와 놀기, 고양이와 함께 책읽기 ,고양이와 함께 TV 시청, 고양이와와 함께 산책, 고양이와 함께 요리, 고양이와 함께 수면, 고양이와 함께 휴식을 공유 합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번쨰 이미지 두번쨰 이미지 세번째 이미지 플레이 정지 이미지 영역 고양이를 키우는 방법 반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다. 경제적 능력 반려묘..

피그마 화면 입니다. html코드 입니다. 푸터 고양이 사이트 소개하기 고양이 이야기 유기묘 도움주기 반려묘 만들기 고양이 음식 건식사료 습식사료 캣잎 츄르 고양이 놀이 장난감 캣휠 스크래처 캣타워 고양이 자랑하기 앨범 사진올리기 장기자랑 고양이 주의점 책임감 털날림 비용의 측면 물건 치우기 안내사항 찾아오시는길 회사소개 2023 ture403 고양이 사이트 PortFoilo is Power All Right Reserved footer_memu 안에 div 박스를 만들어서 그안에 내용을 적어주었습니다. 맨마지막에 address 태그를 써서 마지막 글을 만들었습니다. css 코드입니다. *{ margin: 0; padding: 0; } a{ text-decoration: none; color: #000;..

피그마에 만든 텍스트 유형입니다. HTML 코드 입니다. notice 고양이를 키울떄 주의할점 건강 검진 새로운 고양이를 입양하면 즉시 수의사를 방문하여 건강 검진을 받도록 하십시오. 정기적으로 예방 접종, 통합 검진, 벼룩 예방 등을 시행하십시오. 더보기 실내 환경 고양이는 실내에서 살아가므로 안전한 실내 환경을 제공해야 합니다. 미끄러운 바닥이나 위험한 물건을 없애고, 고양이에게 안전한 장소를 마련하십시오. 캣타워와 스크레처는 꼭 준비하세요. 더보기 적절한 사료 고양이는 고양이 전용 사료를 먹어야 합니다. 고양이에게 인간 식품을 주면 안 되며, 물과 식사 그릇은 매일 청소하십시오.물과 식사 그릇은 매일 청소하십시오. 그릇은 매일 청소하십시오. 더보기 꼬리 취급 고양이의 꼬리는 중요한 신호입니다. 꼬리..

피그마에서 작업한 프레임 입니다. HTML 코드입니다. 메인 슬라이드 영역 event 반려묘와 함께하는 싸이트 고양이와 놀기, 고양이와 함께 책읽기 ,고양이와 함께 TV 시청, 고양이와와 함께 산책, 고양이와 함께 요리, 고양이와 함께 수면, 고양이와 함께 휴식을 공유 합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번쨰 이미지 두번쨰 이미지 세번째 이미지 플레이 정지 코드정리 일단 section 태그를 만들어 주었고 class를 silder_wrap 과 nexon을 넣어 주었습니다. 그리고 그안에 h2태그를 넣어서 글씨를 써 주었습니다. h2안에 class를 blind를 추가해서 가렸습니다. 그다음 div태그 만들어서 class silder_inner 로 지정해 주었습니다. 그안에 EVENT..

피그마에서 작업한 화면입니다. 넓이를 1920 으로 지정 해주고 높이를 800로 지정해 주었습니다. 그리드 카운트를 12개로 설정하고 마진을 380으로 지정했습니다. HTML 코딩 입니다. notice 고양이 종류 10가지 GPT한테 물어본 고양이 종류가 10가지가 있습니다.다음은 그 목록입니다. 샴 고양이 (Siamese Cat) 페르시안 고양이 (Persian Cat) 스코티시 폴드 고양이 (Scottish Fold Cat) 먼치킨 고양이 (Manx Cat) 시베리안 고양이 (Siberian Cat) 아비시니안 고양이 (Abyssinian Cat) 브리티시 쇼트헤어 고양이 (British Shorthair Cat) 미묘 (Munchkin Cat) 벵골 고양이 (Bengal Cat) 러시안 블루 고양이..

피그마를 이용한 그리드 지정 해준 화면 입니다. 넓이를 1920 으로 지정 해주고 높이를 1058로 지정해 주었습니다. 그리드 카운트를 12개로 설정하고 마진을 380으로 지정합니다. 그럼 분홍색으로 12개 선이 생깁니다. 글자의 line-hegiht를 1.5 로 피그마는 150 으로 넣어 주면 됩니다. HTML 코드입니다. 고양이를 키우는 방법 반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다. 경제적 능력 반려묘가 아플떄 병원도 가야하고 사료,모래 끊이지 않게 공급해야함 아무튼 돈이 많이 들어감 자세히 보기 고양이 알레르기 고양이는 생각보다 털이 많이 날리는 동물임 천식있으시면 정말 신중하게 생각 해야함 자세히 보기 css 코드입니다. css을 보시면 .container 위까지 리셋과 많이 ..

카드 타입 유형 피그마를 이용한 그리드 지정 해준 화면 입니다. 넓이를 1920 으로 지정 해주고 높이를 1058로 지정해 주었습니다. 그리드 카운트를 12개로 설정하고 마진을 380으로 지정합니다. 그럼 분홍색으로 12개 선이 생깁니다. 글자의 line-hegiht를 1.5 로 피그마는 150 으로 넣어 주면 됩니다. 카드 타입 유형 코딩 입니다. 고양이를 키우는 방법 반려묘를 키울려면 돈과 열정과 시간과 관심도 많아야 합니다. 예방접종 및 기본검사로 돈이 많이 듭니다. 키울실려면 신중하시길 바랍니다. 경제적 여건 다치거나 아프게 되고 병원에서 입원/수술을 하는경우는 100만원 단위 이상으로 발생할 수 있습니다. 그러므로 돈을 많이 벌어야 합니다. 신중신중신중 자세히 보기 집에서 보내는 시간 반려동물은..

퀴즈 이펙트 5번 입니다. 완성된 화면 입니다. html코드입니다. Quiz객관식 확인하기(여러문제) 유형 1 2 3 4 5 ture403@gmail.com 다중으로 문제를 만들때 일일이 HTML에 입력해서 표출하는건 너무 노다가 작업입니다. 자바스크립트를 이용해서 반복을 해서 문제를 계속 표출하게 하는게 더 효율적일 것입니다. JS코드입니다. const quizInfo = [ { infoType : "정보처리 기능사", infoTime : "2011년도 5회", infoNumber : "20110501", infoQuection : "JK 플립플롭(Flip Flop)에서 보수가 출력되기 위한 J, K의 입력 상태는?", infoChoice : { 1: "J=1, K=0", 2: "J=0, K=1", 3..

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

완성된 사진입니다. HTML 코드 입니다. Quiz객관식 확인하기 1 2 3 4 5 정답입니다. 틀렸습니다! 정답 확인 하기 ture403@gmail.com div박스를 만들어서 quiz_choice 클래스를 만들어서 거기안에 4개의 inupt박스를 만들었습니다. input type을 라디오로 하고 그안에 이름을 choice로 설정 하고 각각 value값을 넣어주었습니다. 정답확인하기 버튼을 button태그를 써서 만들었습니다. quiz_desc 를 만들어서 해설을 넣었습니다. CSS코드 입니다. 강아지는 전에 있는 코드를 봐주세요 /* header */ #header { position: fixed; left: 0; top: 0; background-color: #262626; color: #fff; ..

위에는 완성된 화면입니다. HTML 코드입니다. Quiz객관식 확인하기 1 2 3 4 정답입니다. 틀렸습니다! 정답 확인 하기 ture403@gmail.com CSS 코드입니다. /* header */ #header { position: fixed; left: 0; top: 0; background-color: #262626; color: #fff; padding: 10px; margin-bottom: 100px; width: 100%; z-index: 1000; display: flex; justify-content: space-between; } #header::before { content: ""; border: 4px ridge #a3a3a3; position: absolute; left: 5px..

퀴즈 이펙트 02 번 결과 화면 입니다. HTML 코드입니다. Quiz주관식 확인하기 유형 1 2 . 정답 확인 하기 설명 ture403@gmail.com css 코드 입니다 (강아지 이미지는 전에 있는 퀴즈 블로그 를 참조 하세요.) /* header */ #header { position: fixed; left: 0; top: 0; background-color: #262626; color: #fff; padding: 10px; margin-bottom: 100px; width: 100%; z-index: 1000; display: flex; justify-content: space-between; } #header::before { content: ""; border: 4px ridge #a3a3a..

퀴즈 이펙트 초기 구성 만들기 HTML 코드 Quiz정답확인하기 유형 . 정답 확인 하기 ture403@gmail.com reset.css 코드 @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; color: #222; } h1,h2,h3,h4,h5,h6 { font-weight: normal; } ul,ol,li { list-style: none; } img { vertical-align: to..

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문의 빈칸을 완성하시오. [성적] 테이..

MYSQL MYSQL MySQL은 가장 많이 사용되는 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS) 중 하나입니다. MySQL은 가장 많이 사용되는 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS) 중 하나입니다. MySQL은 오픈 소스이며, 다양한 운영 체제에서 사용할 수 있습니다. MySQL은 일반적으로 웹 응용 프로그램, 데이터 분석 및 기업 응용 프로그램과 같은 다양한 분야에서 사용됩니다. MySQL은 SQL(Structured Query Language)을 사용하여 데이터를 관리하며, 데이터를 효율적으로 저장, 검색, 수정 및 삭제할 수 있습니다. MySQL은 다중 사용자, 다중 스레드 및 다중 플랫폼 지원을 제공하여 대규모 응용 프로그램에서도 효과적으로 작동할 수 있습니다. My..

GSAP를 이용해서 마우스를 따라다니는 조명 효과입니다. 완성된 화면 입니다. HTML 코드입니다. javascript 데이터 저장하기 데이터 불러오기 데이터 실행하기 데이터 제어하기 문자열 객체 배열 객체 수학 객체 숫자 객체 브라우저 객체 요소 객체 이벤트 객체 데이터 효과 검색 효과 퀴즈 효과 마우스 효과 슬라이드 효과 패럴랙스 효과 게임 효과 01. 마우스 이펙트 : 정답 확인하기 유형 마우스를 따라 다니는 기본적인 효과입니다. 데이터 실행하기 : 함수 데이터 저장하기 : 변수 데이터 불러오기 : for(), forEach() 이벤트 객체 : mousemove 이벤트 속성 : clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY 요..

GSAP를 이용해서 마우스를 따라다니는 효과입니다. 완성된 화면 입니다. HTML 코드입니다. Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 If all the year were playing holidays; To sport would be as tedious as to work. 만약 매일매일이 휴일과 같다면 노는 것도 일하는 것 만큼이나 지루할 것이다. ture403@gmail.com css 메인 코드입니다. body { width: 100%; height: 100vh; overflow: hidden; background-position: center center; background-size: cover; } body.img01 { back..

마우스 이펙트 01번 입니다. 완성된 예제 입니다. HTML 코드입니다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Love looks not with the eyes, but with the mind. 사랑은 눈으로 보지 않고 마음으로 보는 거지. clientX : 0 clientY : 0 offsetX : 0 offsetY : 0 pageX : 0 pageY : 0 screenX : 0 screenY : 0 ture403@gmail.com reset.css코드입니다. @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); @import url('http..

캐릭터의 좌표 문제 머쓱이는 RPG게임을 하고 있습니다. 게임에는 up, down, left, right 방향키가 있으며 각 키를 누르면 위, 아래, 왼쪽, 오른쪽으로 한 칸씩 이동합니다. 예를 들어 [0,0]에서 up을 누른다면 캐릭터의 좌표는 [0, 1], down을 누른다면 [0, -1], left를 누른다면 [-1, 0], right를 누른다면 [1, 0]입니다. 머쓱이가 입력한 방향키의 배열 keyinput와 맵의 크기 board이 매개변수로 주어집니다. 캐릭터는 항상 [0,0]에서 시작할 때 키 입력이 모두 끝난 뒤에 캐릭터의 좌표 [x, y]를 return하도록 solution 함수를 완성해주세요. 정답풀이 function solution(keyinput, board) { // 1. x,y ..

잘라서 배열로 저장하기 문제 문자열 my_str과 n이 매개변수로 주어질 때, my_str을 길이 n씩 잘라서 저장한 배열을 return하도록 solution 함수를 완성해주세요. 정답풀이 function solution(my_str, n) { let strArr = my_str.split(""); let ans = []; while(strArr.length > 0){ ans.push(strArr.splice(0,n).join("")); } return ans; } 문자열 my_str을 split("")을 사용하여 한 글자씩 분할하여 배열 strArr로 변환합니다. 빈 배열 ans를 선언합니다. 이 배열은 분할된 문자열을 저장하기 위한 배열입니다. while 루프를 사용하여 배열 strArr의 길이가 0..

한 번만 등장한 문자 문제 문자열 s가 매개변수로 주어집니다. s에서 한 번만 등장하는 문자를 사전 순으로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. 한 번만 등장하는 문자가 없을 경우 빈 문자열을 return 합니다. 정답풀이 function solution(s) { let ans = []; let sArr = s.split(""); sArr.forEach((item) => { if(s.indexOf(item) === s.lastIndexOf(item)){ ans.push(item); } }) return ans.sort().join(""); } 초기화 부분에서는 빈 배열 result와 나누는 수인 divisor를 2로 설정합니다. while 루프는 n이 2 이상인 동안 ..

소인수분해 문제 소인수분해란 어떤 수를 소수들의 곱으로 표현하는 것입니다. 예를 들어 12를 소인수 분해하면 2 * 2 * 3 으로 나타낼 수 있습니다. 따라서 12의 소인수는 2와 3입니다. 자연수 n이 매개변수로 주어질 때 n의 소인수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요. 정답풀이 function solution(n) { let result = []; let divisor = 2; while (n >= 2) { if (n % divisor === 0) { result.push(divisor) n = n / divisor; } else divisor ++; } return [...new Set(result)]; } 초기화 부분에서는 빈 배열 result와 나..

공 던지기 문제 머쓱이는 친구들과 동그랗게 서서 공 던지기 게임을 하고 있습니다. 공은 1번부터 던지며 오른쪽으로 한 명을 건너뛰고 그다음 사람에게만 던질 수 있습니다. 친구들의 번호가 들어있는 정수 배열 numbers와 정수 K가 주어질 때, k번째로 공을 던지는 사람의 번호는 무엇인지 return 하도록 solution 함수를 완성해보세요. 정답풀이 function solution(numbers, k) { let ansIndex = 0; for(let i = 0; i numbers.length){ ansIndex -= numbers.length; } } return numbers[ansIndex - 2]; } ansIndex 변수..