웹 개발

CSS

이렇게 고른 폰트들이 나타난다.(확대를 해도 깨지지 않는 벡터방식 이미지.) show codes를 누르면 폰트들의 코드가 나타나게 된다.여기서 코드 앞에 있는 0대신에 html용으로 &https://unicode-table.com/kr/유니코드 사이트 들가면

로다가 웹브라우저의 구성을 알아보기. 헤더 아이디 아래에 있는 클래스가 아바타인 이미지에 대하여. 이미지를 원형에 가깝게 한다. } 이미지를 둘러싼 테두리를 만들려면 이미지 태그를 감싼 span 태그를 사용. display:inline-block

타입폼은 구글 설문에 전문화된 도구 후원을 모집한다고 가정하고 후원페이지를 만드는 법타입폼 홈페이지http://typeform.com/일단 넘어가기, 여기까지https://www.youtube.com/watch?v=5jrO2fJzTvc&list=PLu

https://happy-inside.tistory.com/71이름 기억, 시계 구현, 이미지 변경, 날씨, 위치 정보.(gelocation),명언들,to-do리스트 구현하기(사용자 입력 저장, 여러 to do리스트 구현.)https://nomadco

todo.js 파일 생성, html에서 임포트 - todo를 작성할 form을 만들자 -- 자바스크립트 파일에서 html의 form들을 가져오기 --const toDoForm = document.getElementById("todo-form");const to

링크텍스트(https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12409852드럼 클래스를 가진 8개의 버튼을 html에서 만든다. 자바스크립트 분석.var numbe

주사위 프로젝트 코드 분해https://www.codingfactory.net/10419 setattribute는 요소의 속성값을 변경해준다.var randomNumber1 = Math.floor(Math.random() 6) + 1; //1-6var r

원본 글.index.htmlindex.html글자의 끝말에 맞는 다음 글을 입력하면 정답이 뜨면서 입력글이 넘어가고, 만약 끝말과 다른 글을 적으면 아무것도 되지 않는다. 코드 분석. js 분석. const form = document.querySelector('id

원본 글htmljsjs 코드분석. 계산 버튼 을 가져오고. 클릭 이벤트를 부여해줌. 첫째 수와 둘째 수를 각각 가져옴. 계산 결과 란에 둘을 곱한 것을 할당.

!codepenmingi001/embed/preview/wvpVQqa?default-tab=html%2Cresult&editable=true&theme-id=dark강의.

강의(https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/learn/lecture/19289598"quoteText":"승리는 가장 끈기 있는 자의 것입니다. "

강의(https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/learn/lecture/19961158unsplash 사이트에서 가져온 사진들을 꼐속 출력해 끊김없이

PIP(PICTURE In PICTURE).링크텍스트소형창을 생성하는 방식.강의(https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/learn/lecture/19

강의(https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/learn/lecture/19399928임의의 농담을 음성으로 변환해 말해주는 기능.농담, 텍스트 음성

강의 사이트 데모 라이트/다크 모드 전환이 가능하고 그떄마다 사이트의 배경, 그리고 전반적인 요소들의 색이 변하는 사이트. 토글 스위치 만들기. 자바스크립트 분석. 토글 기능생성. documentElement에 대해 간단하게 = document.docum

사이트 데모웹사이트 들어가면 제목 카드가 슬라이드인되는 애니메이션이 나오고 이런식으로 각 섹션 마다 다른 애니메이션이 있다.외부 킷들을 사용할 것이므로 html코드만 있으면 된다. TailwindCSS.

사이트 데모강의(https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/learn/lecture/20424503음악을 담는 배열. 내부적 이름과, 표현되는 이름, 작

카운트다운 데모.제목과 날짜를 입력하면 그 날짜부터 지금까지의 시간차를 보여준다.업로드중..비디오비디오 반복재생, 음소거 결정,로드시 자동실행.비디오태그날짜 선택.input-dateDate.prototype.toISOString()날짜를 yyyy-mm-dd 형식으로

새로운 북마크 작성 가능, 삭제 가능, 링크 연결,모달을 활용해서 북마크를 생성한다.모달을 바로 보여주기.focus를 활용해 모달의 입력창에 커서가 이미 존재하도록 한다.focus모달 이벤트를 줘서 상호작용 활성화.버튼을 누르면 모달이 뜨고 X를 누르면 창이 없어짐.거

업로드중..

사이트 데모강의(https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/learn/lecture/20954908html에서 onclick이벤트를 주고 js에서 그에

캔버스로 그림 그리기Js의 캔버스, 그리드를 이용해 그림을 그려, 퐁을 구현해 보자.캔버스를 문서에 생성. 캔버스 배경. context.fillStyle = 'black'; context.fillRect(0,0,width,height); 막대기 색 contex

코드펜보고 간단 따라하기.코드펜닫는버튼.모달 - 헤더,바디,푸터.캐러셀이란??const img = document.getElementById('carousel');const rightBtn = document.getElementById('right-btn');const

navbar는 고정되어 있고 실질적으로 색이변하는 건.Trans 클래스.css를 보면 이 trans 클래스를 이동시켜야 한다.커스텀 데이터 속성(custom data attributes)이라고 불리우는 "data-" 속성의 역할은,웹페이지를 작성하는 사람이, HTML에

css 모든 요소를 0.3초 동안 큐빅-베지어로 이동시킨다. jsmap은 기능과 배열을 정하고. 배열의 인자들에 대해 기능을 실행한다. 그리고 기능이 적용된 아이템들에 대한 새로운 배열을 만든다. 따라서 css의 이동이 각 문자에 대해 50 \* 순서의 딜레이를 가지

나중에 더 알아보자.업로드중..API 사용scrollLeftoffsetLeftcss에서 액티브 클래스에 대해 커서 모양을 grabbing 붙잡는 걸로 하고 있다. 이런 붙잡는 커서가 활성화 될때는 마우스를 누르고 움직일때 뿐이고 마우스가 단순 올려져 있거나 밖에 있으면

!codepenmingi001/embed/preview/WNMoNLo?default-tab=html%2Cresult&editable=true&theme-id=dark