개발자연습노트

https://hjw1191.github.io/data//data.json(데이터주소)DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crosso..

10 분🌙(실전) 웹개발 기능대회 예제 (글로 진행합니다) 실제 프론트엔드 개발을 체험할 수 있는 좋은 예제를 준비했습니다. 전국기능경기대회라는게 있는데   기술진흥원에서 매년 이런 주제로 대회를 개최하고 시상합니다.웹디자인 & 개발 분야는 인터넷 접속 안되는 컴퓨터와 코드 에디터 하나 주는데10시간 동안 열심히 프론트엔드와 서버 만들고 오면 됩니다. (실은 문제를 일주일 전에 미리 줍니다. 그래서 답안을 달달 외워감) 상금이 쥐꼬리라 참가하라는건 아니고 여기서 출제하는 문제들이 자바스크립트 연습해보기 좋아서 가져왔습니다. 20년도 문제인데 심심하면 도전해보도록 합시다.  필요한 이미지 등 첨부파일은 하단에 준비되어있습니다. 목표는 하단에 설명하는 기능을 가진 HTML 파일을 만드시면 됩니다.     ..

알림창 온오프 (버튼2개) buttion onclick = "알림창열기('blcok');">버튼  닫기  => 닫기  =>document.getElementById('close').addEventListener('click', function(){     document.getElementById('alert').style.display = 'none' });  열기  ==> function 알림창열기(구멍,구멍2){ getElementClassName()[0]   document.getElementById('구멍').style.display = 구멍2; (아이디,비번)   document.getElementById('alert').style.display = block; } list(토글)(class ..

if else 문법 대신 쓸 수 있는 switch 라는 문법이 있습니다.if else로도 모든걸 할 수 있지만 좀 더 간단하게 적고 싶을 때 switch를 어쩌다 한 번 쓰는데어떻게 쓰는지 알아봅시다.    switch 사용법 설명하다 let 변수 = 2 + 2;switch (변수){ case 3 : alert('변수가 3이네요'); break case 4 : alert('변수가 4네요'); break}switch의 소괄호엔 조건식이 아니라 검사해볼 변수를 넣으면 됩니다. 그리고 변수가 3일 때 코드 실행해주세요~ 라고 코드짜고 싶으면case 문법 저렇게 사용하면 됩니다.그리고 코드실행을 끝내고 싶으면 break라는걸 추가해주면 됩니다. 그럼 switch 중괄호를 탈출해줍니다. ..

터치되는 캐러셀같은거 조작해보면 대충 이런 기능이 들어있습니다.기능1. 드래그한 거리만큼 사진도 왼쪽으로 움직여야함기능2. 마우스 떼었을 때 일정거리 이상 이동했으면 사진2 보여줌, 아니면 다시 사진1 보여줌기능1 부터 만들어봅시다. 근데 이거 만들려면 알아야할 이벤트가 3개 있습니다. mouse 이벤트 3개 마우스로 어떤 html 요소를 조작할 때 발동하는 이벤트가 있습니다.mousedown (어떤 요소에 마우스버튼 눌렀을 때)mouseup (어떤 요소에 마우스버튼 뗐을 때)mousemove (어떤 요소위에서 마우스 이동할 때)알아두면 유용합니다.   설명하다 캐러셀있는곳그래서 예를 들어 이렇게 코드짜면 .slide-box 위에 마우스 움직일 때 마다 '안녕'이 출력됩니다.    설명하다 캐러셀있는곳이..

참고 사이트 : apple.com/apple-music(사이트 레이아웃이 언제든 변경될 수 있기 때문에 밑 사진을 참고부탁드립니다)  (스크롤바를 일정부분 내리면 카드가 더 이상 올라가지 않고 정지합니다 ㄷㄷ)       위 UI를 만들기 위해 일단 HTML을 준비합니다. 깨끗한 HTML 파일에 jQuery와 CSS 파일 하나를 첨부해준 후이미지 3개를 다음과 같이 배치합니다.이미지 파일은 하단에 첨부되어있습니다.  설명하다  설명하다 .card-background { height: 3000px; margin-top: 800px; margin-bottom: 1600px;}.card-box img { display: block; margin: auto; ..

참고 사이트 : apple.com/apple-tv-4k(사이트 레이아웃이 언제든 변경될 수 있기 때문에 밑 사진을 참고부탁드립니다)       position : sticky  (Edge 이상에서 사용가능)스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을 때 사용할 수 있는 CSS 속성입니다.position : fixed 는 항상 화면에 고정이 되는 요소를 만들 때 사용한다고 배웠었는데 이거랑 뭔 차이가 있냐면,position : sticky 는 스크롤이 되어서 이 요소가 화면에 나오면 고정시킨다는 특성이 있습니다.한번 위의 예제를 만들어보도록 합시다.   설명하다  Meet the first Triple Camera System 설명하다 .grey { background..

1. DOM 이라는 말이 자주 등장합니다. 책보고 검색하고 그러면 맨날 DOM이라는 용어를 남용하는데 그게 뭔지 알아봅시다.Document Object Model 이라는 뜻인데 그냥 설명하면 이해가 안되니 배경설명부터 갑니다.   자바스크립트는 HTML 조작에 특화된 언어라고 설명드렸습니다.그런데 자바스크립트가 어떻게 HTML을 조작할 수 있는지 원리를 생각해본 적이 있습니까. 생각해보면 HTML과 자바스크립트는 다른 언어입니다.그래서 자바스크립트에선 이런 html을 직접 해석하고 조작할 수 없습니다.  자바스크립트는 이런건 못알아듣습니다.그런데 어떻게 HTML 태그들을 알아보고 조작할 수 있는 것일까요?  자바스크립트가 HTML 조작을 하기 위해선 HTML을 자바스크립트가 해석할 수 있는 문법으로 ..

array 정렬하는 법 array 자료는 순서개념이 있다보니 정렬도 가능합니다.그냥 문자 가나다순으로 정렬하려면 .sort() 붙이면 되는데 숫자정렬은 이렇게 코드짜면 됩니다. 설명하다 var 어레이 = [7,3,5,2,40];어레이.sort(function(a, b){ return a - b});console.log(어레이);이러면 숫자순으로 잘 출력됩니다.근데 왜 저렇게 코드짜면 숫자순 정렬이 되는지 알고싶지 않습니까코드 동작원리 이런걸 알면 나중에 응용도 쉽게 가능하기 때문에 sort() 동작원리를 알아봅시다.  어레이.sort(function(a, b){ return a - b}); 1. a, b는 array 안의 자료들입니다.2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줍니다.3...

서버란? 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다.네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램입니다.  근데 그냥 데이터달라고 떼쓰면 주는게 아니라서버에 데이터를 요청할 때는1. 어떤 데이터인지 url로 잘 기재해야하고2. 어떤 방법으로 요청할지 결정해야 (GET/POST 등)데이터를 보내줍니다.   예를 들어서 쇼미더럭키짱이라는 네이버웹툰을 보고싶으면https://comic.naver.com/webtoon/list?titleId=783054 여기로 GET요청하면 보내줍니다.예를 들어서 독립일기라는 네이버웹툰을 보고싶으면https://comic.naver.com/webtoon/list..