코딩하는 거북이

패럴랙스 이펙트로 가로로 스크롤 하듯 만들기 패럴랙스 이펙트로 스크롤할 때 가로로 넘어가는 것처럼 보이게 만들어 보겠습니다. HTML 작성하기 Javascript Parallax Effect08 패럴랙스 이펙트 : 가로 효과 1 2 3 4 5 6 7 8 9 10 01 02 03 04 05 06 07 08 09 scrollTop : 0px Javascript 작성하기 Javascript 정리해보기 scroll 함수 window.pageYoffset을 사용해 현재 보이는 화면의 Y값(스크롤값)을 구합니다. 패럴랙스 내용이 담겨있는 parallaxs__wrap의 선택자를 만들어 넓이를 구해 parallaxWidth변수에 저장합니다. 문서 body의 height를 pallaxWidth값과 동일하게 만듭니다. g..

패럴랙스 이펙트로 각각의 효과 주기 각각의 스타일 애니메이션을 만들어 메세지에 효과를 줘보겠습니다. HTML 살펴보기 Javascript Parallax Effect06 패럴랙스 이펙트 : 텍스트 효과 1 2 3 4 5 6 7 8 9 10 01 Section1 과정도 중요하지만, 결과도 꽤나 중요하다. 02 Section2 후회하기 싫으면 그렇게 살지 말고, 그렇게 살거면 후회하지마라. 03 Section3 인생은 곱셈이다. 어떤 찬스가 와도 내가 제로면 아무런 의미가 없다. 04 Section4 꿈에 눈이 멀어라 시시한 현실 따위 보이지 않게. 05 Section5 네가 모든 사람을 사랑할 수 없듯이 모든 사람이 널 사랑할 수도 없다. 06 Section6 내안에 빛이 있으면 스스로 빛나는 법이다. 0..

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

비동기 방식( 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..

마우스 오버했을 때 메뉴탭이 각각 나오도록 만들기 상단 메뉴에 마우스 오버했을 때 메뉴탭이 각각 나오도록, 혹은 한번에 나오도록 만들어 보겠습니다. 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;..

정보처리 연습문제 풀어보기 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..

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

문자열 메서드 알아보기 문자열 메서드에 대해서 몇 가지 더 알아보도록 하겠습니다. 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; ..

각 섹션의 좌표와 스크롤 좌표를 이용한 패럴랙스 이펙트 만들기 스크롤의 좌표와 각 컨텐츠들의 좌표를 이용하여 패럴랙스 효과를 만들어 보도록 하겠습니다. 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-..

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

레이아웃 실전 종합 이번에는 만들어놓은 레이아웃들을 한 곳에 합쳐 웹페이지를 만들어보도록 하겠습니다. (슬라이드 제외) 슬라이드 유형은 다음에 따로 만들도록 하겠습니다. 만들어진 페이지 보러가기 https://dlgnsrb227.github.io/web2023/site/site1/index.html HTML 작성하기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 사이트 로고 Han-River. 전경 소개 역사 위치 주변 공원 로그인 EVENT 한강 무료 아메리카노 여의도 한강공원 여의나루역 5번출구로 나와 전방 300m 부근에서 무료 아메리카노 시식 이벤트가 진행됩니다. 자세히 ..

레이아웃 실전 _ 배너 유형 이번에는 웹페이지 안에 들어가는 배너유형을 작업해 보도록 하겠습니다. 배너유형 디자인하기 HTML 작성하기 한강을 제대로 즐기는 방법 한강에서 보내는 시간을 더 아름다운 추억으로 남길 수 있는 방법을 알려드립니다. 아래 블로그를 참고하여 한강에서의 추억을 더욱 값지게 만들어보세요. https://hoong-co.tistory.com/ HTML 정리해보기 이번 배너 유형은 다른 section들과 달리 하나의 article만 만들었습니다. 하나의 article에 h3, p, a 태그를 사용하였습니다. CSS 작성하기 * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1,h2,h3,h4,h5,h6 { f..

레이아웃 실전 _ 푸터유형 이번에는 웹페이지의 가장 하단에 부분에 들어가는 푸터 유형에 대해 작업해 보겠습니다. 푸터유형 디자인하기 구상한 디자인 기반으로 코딩 HTML 작성하기 한강 주변 식당 소개하기 방문 예약하기 사진 보기 식당 구경하기 식당 등록하기 커뮤니티 한강 주변 카페 소개하기 방문 예약하기 사진 보기 카페 구경하기 카페 등록하기 커뮤니티 한강공원 화장실 위치보기 안내보기 시설보기 가까운 시설 안내 한강 배달존 위치보기 배달점 검색 주소받기 가까운 자리 보기 한강 대여소 대여물품 대여하기 사진 보기 반납존 위치 보기 가격문의 신고하기 불법행위 소란행위 민원안내 안내소 위치 2023 한강공원 나들이 프로젝트 HanRiver Picnic All Right Reserved HTML 정리해보기 이번..

레이아웃 실전 _ 슬라이드 유형 이번에는 웹페이지에 들어갈 텍스트 유형의 레이아웃을 만들어 보겠습니다. 텍스트유형 디자인하기 구상한 디자인 기반으로 코딩 HTML 작성하기 HISTORY 한강의 역사 한국의 한강 한강은 대한민국에서 가장 중요한 강 중 하나로, 서울을 비롯한 수도권 지역의 생명선이기도 합니다. 한강의 역사는 매우 오래되었으며, 이 지역을 거주하던 선사시대부터 현재까지 ... 더보기 한강의 과거 선사시대에는 한강 주변 지역에 선사 문화가 발전하였으며, 이후 백제와 고구려가 이 지역을 통제하였습니다. 고려시대에는 한강이 경제와 군사의 중요성을 가졌으며, 성종 때에는 ... 더보기 기준이 되는 한강 조선시대에는 한강 주변 지역이 국가 발전의 중심지가 되었으며, 여러 대목으로 이루어진 다목적 수로..

레이아웃 실전 _ 슬라이드 유형 이번에는 웹페이지에 들어갈 슬라이드 유형의 레이아웃을 만들어 보겠습니다. 슬라이드유형 디자인하기 구상한 디자인 기반으로 코딩 HTML 작성하기 메인 슬라이드 영역 EVENT 한강 무료 아메리카노 여의도 한강공원 여의나루역 5번출구로 나와 전방 300m 부근에서 무료 아메리카노 시식 이벤트가 진행됩니다. 자세히 보기 참여 하기 이전 이미지 다음 이미지 첫 번째 이미지 두 번째 이미지 세 번째 이미지 플레이 정지 HTML 정리해보기 슬라이드 유형의 경우 전체 배경에 이미지가 들어가기 때문에 별도의 container 안에 작업하지 않았습니다. slider__inner 클래스의 박스에 크게 세 부분으로 나누어 작업하였습니다. 이미지와 주제, 설명 등의 글이 들어가는 한 부분, 슬..

레이아웃 실전 _ 이미지/텍스트 유형 이번에는 텍스트와 이미지가 같이 있는 유형을 한번 만들어보도록 하겠습니다. 이미지/텍스트 유형 디자인하기 만들고자 하는 사이트의 디자인을 구상해봅니다. 구상한 디자인 기반으로 코딩 HTML 작성하기 park 한강을 끼고있는 공원 한강 주변에는 다양한 공원이 있습니다. 여기에 몇 가지 추천 공원을 알려드리겠습니다. 반포 한강공원 여의도 한강공원 이촌 한강공원 뚝섬 한강공원 난지 한강공원 잠원 한강공원 망원 한강공원 잠실 한강공원 광나루 한강공원 강서 한강공원 양화 한강공원 HTML 정리해보기 하나의 컨테이너에 이미지들을 감쌀 수 있는 하나의 박스를 만들고 그 안을 세 개의 로 나누어 주었습니다. 두 번째, 세 번째 은 준비한 이미지를 넣어주고, 첫 번째 에는 태그를 사..

레이아웃 실전 _ 이미지 유형 이미지 유형 레이아웃 디자인하기 우선 만들고자 하는 웹 사이트의 디자인을 구상해 봅니다. 구상한 디자인 기반으로 코딩하기 구상해놓은 레이아웃 디자인을 보며 HTML문서에 작성합니다. HTML 문서 작성 한강의 전경 한강은 평소에 봐도 저녁에 봐도 이쁩니다. 낮의 한강 맑은 날 밝을 때 한강을 가면 산뜻하고 웅장한 느낌을 받을 수 있습니다. 자세히보기 저녁의 한강 노을이 지는 저녁에 한강을 가면 맥주를 안 마시고는 버틸 수 없는 전경이 펼쳐집니다. 자세히보기 HTML 정리해보기 하나의 section에 제목과 이미지로 크게 두 부분으로 나누어 구조를 짜봤습니다. 이미지의 부분에는 다시 두 부분으로 나누어 각각의 이미지를 넣어주었습니다. CSS 정리해보기 * { margin: 0..

레이아웃 실전 _ 카드유형 카드유형 레이아웃 디자인하기 우선 만들고자 하는 웹 사이트의 레이아웃을 구상해봅니다. 구상한 디자인 기반으로 코딩하기 구상해놓은 레이아웃 디자인을 보며 HTML문서에 작성합니다. 한강을 알아보자 한강은 낮에도 밤에도 아름다운 광경이 펼쳐지지만, 특히 맑은날 저녁 노을이 지는 무렵의 한강의 모습은 하루의 고단함을 저절로 잊게 만들어주곤 합니다. 한강 주변 관광지 한강 주변에는 대표적으로 한강공원이 위치하며, 주요 관광지로는 남산타워, 경복궁, 국립중앙박물관, 63빌딩, 덕수궁 등이 있습니다. 또한, 한강을 따라 자전거도로와 산책로가 조성되어 ... 자세히 보기 한강의 중요성 한강은 또한 한반도의 역사와 문화를 반영하는 중요한 상징 중 하나입니다. 특히, 1950년대 한국전쟁에서 ..

반응형 레이아웃 웹사이트의 레잉아웃을 만들 때, 방문자가 사용하는 모니터의 화면 해상도에 따라 레이아웃의 크기를 변경하게끔 하는 반응형 레이아웃에 대해서 알아보겠습니다. 레이아웃 틀 짜기 기본적으로 레이아웃의 틀을 flex 유형으로 만든 방법입니다. 반응형 추가하기 @media(max-width:1280px){ .container{ width: 96%; display: flex; flex-wrap: wrap; flex-direction: column; } .container1{ width: 33.3333%; height: 780px; } .container2{ width: 66.6666%; height: 390px; } .box{ width: 66.6666%; height: 390px; } } @medi..

레이아웃 grid 유형으로 만들기 grid 방식으로 만들기 grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. display : grid를 적용하여 만들고자 하는 레이아웃을 칸칸이 쪼개어 크기를 설정해주어 만들어주면 됩니다. 레이아웃 코드 해석하기 위의 레이아웃을 예로 들면 칸칸을 쪼개어 보았을 때, 세로로 4줄 가로로 2줄이 나오게 됩니다. grid-template-area : header header // nav nav // aside section // footer footer (// 줄 바꿈)의 형식으로 나누어준 칸의 영역에 들어갈 요소를 선택해줍니다. grid-template-columns : 400px 800px 두칸으로 설정해주고, grid-template..

레이아웃 flex 유형으로 만들기 flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것을 말합니다. 기본 틀 구성하기 기본 틀을 만들어 준 코드입니다. 기본 틀의 결과를 보면 위 처럼 나오는데 aside와 section을 나란히 정렬해주기 위해서, aside와 section이 포함되어 있는 전체를 감싸고 있는 wrap에게 display:flex; / flex-wrap:wrap;의 속성을 부여합니다. #wrap { width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; } 다음과 같이 속성을 부여하게 되면 맨 위의 완성본과 같은 모양이 되는 것을 확인할 ..

문자 관련 스타일 CSS에서 문자를 스타일링하는 다양한 방법이 있는데, 다음은 CSS에서 일반적으로 사용하는 문자 관련 스타일입니다. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. 단위는 ? px 해상도에 따라 상대적으로 달라지는 기본 단위 % 부모 요소의 글자 크기를 100%로 계산한 단위 em 부모 요소의 글자 크기를 100%로 계산한 100분의 1단위 rem 최상위 요소의 글자 크기를 100%로 계산한 100분의 1단위 vw,..

Css에 있는 Id선택자, Class선택자를 Type선택자와 함께 다른 선택자들에는 어떤 것들이 있는지 알아보겠습니다 ! CSS 선택자 전체 선택자 모든 HTML 요소를 선택합니다. (*) 요소 선택자 HTML 요소의 태그 이름을 기반으로 선택합니다. (tagname) 클래스 선택자 HTML 요소의 class 속성 값을 기반으로 선택합니다. (.classname) ID 선택자 HTML 요소의 id 속성 값을 기반으로 선택합니다. (#idname) 속성 선택자 HTML 요소의 속성 값을 기반으로 선택합니다. ([attribute] 또는 [attribute=value]) 자식 선택자 HTML 요소의 직계 자식 요소를 선택합니다. (parent > child) 자손 선택자 HTML 요소의 모든 하위 요소를 선..

Css 레이아웃을 만들 때, 정렬을 위한 방법 중 float 유형을 알아보겠습니다. 위 사진을 표본으로 레이아웃을 구성해 보겠습니다. 기본 틀 Float 사용 float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. 결과를 보시면 좌우로 나열된 것을 볼 수 있지만, footer가 사라진 것을 확인하실 수 있습니다. float을 사용한 다음 컨텐츠가 주변을 흐르게 되어 깨짐 현상이 나타나는 것인데 clear 속성을 이용해 float을 해제시켜주는 과정이 필요합니다. footer에 clear 속성을 추가해주니 깨지지 않고 원래 모양을 유지하며 결과가 출력되는 것을 보실 수 있습니다. clear..

프로그래머스 문제풀기 25일차. 1. 문자열 "hello"에서 각 문자를 오른쪽으로 한 칸씩 밀고 마지막 문자는 맨 앞으로 이동시키면 "ohell"이 됩니다. 이것을 문자열을 민다고 정의한다면 문자열 A와 B가 매개변수로 주어질 때, A를 밀어서 B가 될 수 있다면 밀어야 하는 최소 횟수를 return하고 밀어서 B가 될 수 없으면 -1을 return 하도록 solution 함수를 완성해보세요. function solution(A, B) { let last = A.at(A.length - 1); let result = A.padStart(A.length + 1, last).slice(0, A.length); if(A == B) return 0; for (let i = 1; i

프로그래머스 문제풀기 24일차. 1. 프로그래머스 치킨은 치킨을 시켜먹으면 한 마리당 쿠폰을 한 장 발급합니다. 쿠폰을 열 장 모으면 치킨을 한 마리 서비스로 받을 수 있고, 서비스 치킨에도 쿠폰이 발급됩니다. 시켜먹은 치킨의 수 chicken이 매개변수로 주어질 때 받을 수 있는 최대 서비스 치킨의 수를 return하도록 solution 함수를 완성해주세요. function solution(chicken) { let coupon = chicken; let service = 0; while (coupon >= 10) { service += Math.floor(coupon / 10); coupon = Math.floor(coupon / 10) + (coupon % 10); } return service; ..

프로그래머스 문제풀기 23일차. 1. 정수 n을 기준으로 n과 가까운 수부터 정렬하려고 합니다. 이때 n으로부터의 거리가 같다면 더 큰 수를 앞에 오도록 배치합니다. 정수가 담긴 배열 numlist와 정수 n이 주어질 때 numlist의 원소를 n으로부터 가까운 순서대로 정렬한 배열을 return하도록 solution 함수를 완성해주세요. function solution(numlist, n) { let arr = []; numlist.sort((a,b) => b-a); for(let i=0; i b-a); score.forEach((e, i) => { if(!rank[e]){ rank[e] = i+1; } }); arr = arr.map(e => rank[e]); return arr; } 3. 머쓱이는 ..

프로그래머스 문제풀기 22일차. 1. 3x 마을 사람들은 3을 저주의 숫자라고 생각하기 때문에 3의 배수와 숫자 3을 사용하지 않습니다. 3x 마을 사람들의 숫자는 다음과 같습니다. 10진법 3X 마을에서 쓰는 숫자 10진법 3X 마을에서 쓰는 숫자 1 1 6 8 2 2 7 10 3 4 8 11 4 5 9 14 5 7 10 16 정수 n이 매개변수로 주어질 때, n을 3x 마을에서 사용하는 숫자로 바꿔 return하도록 solution 함수를 완성해주세요. function solution(n) { let num = 0; for(let i=1; i { count[el] = (count[el] || 0) + 1; }); for (let cou in count) { if (count[cou] > 1) { an..

프로그래머스 문제풀기 21일차. 1. 문자열 my_string이 매개변수로 주어집니다. my_string은 소문자, 대문자, 자연수로만 구성되어있습니다. my_string안의 자연수들의 합을 return하도록 solution 함수를 완성해주세요. function solution(my_string) { let sum = 0; my_string.split(/[a-zA-Z]/g).forEach(e => { if(parseInt(e)){ sum += parseInt(e); } }); return sum; } 2. 다음 그림과 같이 지뢰가 있는 지역과 지뢰에 인접한 위, 아래, 좌, 우 대각선 칸을 모두 위험지역으로 분류합니다. 지뢰는 2차원 배열 board에 1로 표시되어 있고 board에는 지뢰가 매설 된 지..

프로그래머스 문제풀기 20일차. 1. 2차원 좌표 평면에 변이 축과 평행한 직사각형이 있습니다. 직사각형 네 꼭짓점의 좌표 [[x1, y1], [x2, y2], [x3, y3], [x4, y4]]가 담겨있는 배열 dots가 매개변수로 주어질 때, 직사각형의 넓이를 return 하도록 solution 함수를 완성해보세요. function solution(dots) { let wiarr = [], hearr = []; dots.forEach(e => { wiarr.push(e[0]); hearr.push(e[1]); }); let wid = Math.max(...wiarr) - Math.min(...wiarr); let hei = Math.max(...hearr) - Math.min(...hearr); re..

프로그래머스 문제풀기 19일차. 1. 머쓱이는 행운의 숫자 7을 가장 좋아합니다. 정수 배열 array가 매개변수로 주어질 때, 7이 총 몇 개 있는지 return 하도록 solution 함수를 완성해보세요. function solution(array) { return (array.join('').match(/[7]/g) !== null) ? array.join('').match(/[7]/g).length : 0; } 2. 문자열 my_str과 n이 매개변수로 주어질 때, my_str을 길이 n씩 잘라서 저장한 배열을 return하도록 solution 함수를 완성해주세요. function solution(my_str, n) { let answer = []; for(let i=0; i { (e == n) ..

프로그래머스 문제풀기 18일차. 1. 문자열 str1, str2가 매개변수로 주어집니다. str1 안에 str2가 있다면 1을 없다면 2를 return하도록 solution 함수를 완성해주세요. function solution(str1, str2) { let inc = str1.indexOf(str2); return (inc !== -1) ? 1 : 2; } 2. 어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 정수 n이 매개변수로 주어질 때, n이 제곱수라면 1을 아니라면 2를 return하도록 solution 함수를 완성해주세요. function solution(n) { for(let i=0; i

프로그래머스 문제풀기 17일차. 1. 정수 num과 k가 매개변수로 주어질 때, num을 이루는 숫자 중에 k가 있으면 num의 그 숫자가 있는 자리 수를 return하고 없으면 -1을 return 하도록 solution 함수를 완성해보세요. function solution(num, k) { let index = num.toString().indexOf(k); return (index != -1) ? index+1 : -1; } 문제풀이 Tip 정수로 받아온 num에서는 indexOf를 사용할 수 없어서 toString()을 사용하여 문자열로 바꾸어 주었습니다. 2. 정수 n과 정수 배열 numlist가 매개변수로 주어질 때, numlist에서 n의 배수가 아닌 수들을 제거한 배열을 return하도록 s..

프로그래머스 문제풀기 16일차. 1. 머쓱이는 할머니께 생신 축하 편지를 쓰려고 합니다. 할머니가 보시기 편하도록 글자 한 자 한 자를 가로 2cm 크기로 적으려고 하며, 편지를 가로로만 적을 때, 축하 문구 message를 적기 위해 필요한 편지지의 최소 가로길이를 return 하도록 solution 함수를 완성해주세요. function solution(message) { let arr = message.split(''); return (arr.length) * 2; } 2. 정수 배열 array가 매개변수로 주어질 때, 가장 큰 수와 그 수의 인덱스를 담은 배열을 return 하도록 solution 함수를 완성해보세요. function solution(array) { let num = 0, index..

프로그래머스 문제풀기 15일차. 1. 영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요. function solution(numbers) { let answer = numbers.replaceAll("zero", 0).replaceAll("one", 1).replaceAll("two", 2).replaceAll("three", 3).replaceAll("four", 4).replaceAll("five", 5).replaceAll("six", 6).replaceAll("seven", 7).replaceAll("eight", 8).replaceAll("ni..

프로그래머스 문제풀기 14일차. 1. 정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요. function solution(array, n) { let ans = []; array.forEach((item) => { ans.push(Math.abs(item - n)); }) const min = Math.min(...ans); let check = []; for(let index = 0; index < ans.length; index++){ if(ans[index] === min){ check.push(array[index]); } } return Math.min(...check); } 풀이..

프로그래머스 문제풀기 13일차. 1. 숫자와 "Z"가 공백으로 구분되어 담긴 문자열이 주어집니다. 문자열에 있는 숫자를 차례대로 더하려고 합니다. 이 때 "Z"가 나오면 바로 전에 더했던 숫자를 뺀다는 뜻입니다. 숫자와 "Z"로 이루어진 문자열 s가 주어질 때, 머쓱이가 구한 값을 return 하도록 solution 함수를 완성해보세요. function solution(s) { let sum = 0; let arr = s.split(" "); for(let i=0; i { answer.push(str.length); }); return answer; } 3. 문자열 my_string이 매개변수로 주어집니다. my_string에서 중복된 문자를 제거하고 하나의 문자만 남긴 문자열을 return하도록 sol..

프로그래머스 문제풀기 12일차. 1. 영어에선 a, e, i, o, u 다섯 가지 알파벳을 모음으로 분류합니다. 문자열 my_string이 매개변수로 주어질 때 모음을 제거한 문자열을 return하도록 solution 함수를 완성해주세요. function solution(str){ let answer = str.split('a').join(''); answer = answer.split('e').join(''); answer = answer.split('i').join(''); answer = answer.split('o').join(''); answer = answer.split('u').join(''); return answer; }; 2. 문자열 my_string이 매개변수로 주어질 때, my_st..

프로그래머스 문제풀기 11일차. 1. 머쓱이는 직육면체 모양의 상자를 하나 가지고 있는데 이 상자에 정육면체 모양의 주사위를 최대한 많이 채우고 싶습니다. 상자의 가로, 세로, 높이가 저장되어있는 배열 box와 주사위 모서리의 길이 정수 n이 매개변수로 주어졌을 때, 상자에 들어갈 수 있는 주사위의 최대 개수를 return 하도록 solution 함수를 완성해주세요. function solution(box, n) { let answer = parseInt(box[0]/n)*parseInt(box[1]/n)*parseInt(box[2]/n); return answer; } 2. 약수의 개수가 세 개 이상인 수를 합성수라고 합니다. 자연수 n이 매개변수로 주어질 때 n이하의 합성수의 개수를 return하도록..

HTML의 문서 한 페이지에는 각각의 섹션이 나누어져 있는데, 어떤 것들이 있는지 알아보고 특징들을 살펴보도록 하겠습니다. 이미지 출처 Header 태그명 로 HTML 문서의 헤더 영역을 의미합니다. 주로 사이트의 이름(제목, 로고), 내비게이션, 헤드라인, 검색 등으로 구성됩니다. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함 할 수 없습니다. Nav 태그명 로 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역입니다. 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것으로 단순 본문 링크인지 메뉴(카테고리) 성격의 링크인지 확인이 가능합니다. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. Section 태그명 으로 맥락이 같은 요소들을 주제별로 ..

텍스트에 관련된 요소 텍스트에 관련된 기본적인 요소들에는 어떤 것이 있는지 알아보고, 어떠한 결과 값이 출력되는지 알아보겠습니다. 1. 기울임체 2. 굵은체 3. 형광펜 4. 굵은체 5. 작은글씨 6. 아래첨자 7. 위첨자 각각의 요소들을 사용하면 위 사진과 같은 결과가 출력됩니다. 이상으로 텍스트에 관련된 기본적인 요소들을 알아보았습니다 !

마크업(Markup) 이란 ? html 문서를 작성할 때 각각의 태그(Tag)를 이용해 요소(element)를 이루어 코딩한 것을 마크업(Markup) 이라고 합니다. 이런 마크업을 할 때 필수적으로 알고 있어야하는 시멘틱 마크업과 논리적인 순서에 따른 마크업 두 가지를 알아보도록 하겠습니다. 시멘틱 마크업 (Sementic markup) 시멘틱 마크업의 기본적인 정의부터 알아보면 시멘틱(sementic)의 사전적인 뜻은 '의미론적인' 이라는 의미를 가지고 있습니다. 결국 직역하자면 의미에 맞는 태그를 사용하라는 뜻입니다. 그렇다면 왜 시멘틱 마크업이 필요한지 알아보겠습니다. 의미를 포함하지 않은 마크업을 보여주는 사진입니다. 제목이라는 의미를 나타내는 태그를 사용하여 마크업 한 사진입니다. 위 두 사진..

블록 레벨 요소 (Block-level Elements) 블록 레벨 요소는 쉽게 해당 요소가 좌, 우 공간을 모두 차지하는 하나의 블록이라고 생각하시면 됩니다. 이미치 출처 위 그림과 같이 각 요소들이 좌우 공간을 모두 차지하는 형태이기 때문에 다음 요소를 마크업하게 되면 다음 줄에 출력되는 것을 볼 수 있습니다. 인라인 요소 (Inline Element) 인라인 요소는 블록 레벨 요소와 달리 해당 요소만큼만 공간을 차지합니다. 이미치 출처 위 그림과 같이 각 요소들이 해당되는 공간만을 차지하는 형태이기 때문에 다음 요소를 마크업하게 되면 같은 행에 출력되는 것을 볼 수 있습니다. 블록 레벨 요소와 인라인 요소의 특징 블록 레벨 요소와 인라인 요소의 구조를 간단하게 알아보았습니다. 그럼 이러한 구조로 인..

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

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

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

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의 내용입니다. 메인 어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다..

리액트 연습하기 리액트를 조금 더 연습해보도록 하겠습니다. 컴포넌트(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 컴포넌트를 ..

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

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