자바스크립트 이미지 바꾸기

자바스크립트 이미지 바꾸기

오늘 예제는 자바스크립트 이미지 바꾸기 기능을 구현해보도록 하겠습니다. 주요 핵심은 클릭할 때마다 다른 이미지가 나오게 해야 하므로 반복문을 사용하는 것입니다. 또한, 클릭한 이미지의 주소를 가져와서 메인 이미지에 넣어야 하므로 관련된 …

더 읽기자바스크립트 이미지 바꾸기

CSS 토글 메뉴 자바스크립트를 사용하여 만들기

CSS 토글 메뉴 자바스크립트를 사용하여 만들기

토글 메뉴라고 한다면 숨겨져있던 메뉴가 나타나고 다시 없어지는 것을 말합니다. 여기서 핵심은 자바스크립트를 이용하여 기능을 구현한다는 것입니다. 자바스크립트도 ES6 문법을 이용하여 만들어보겠습니다. 이 글에서 CSS 토글 메뉴 자바스크립트를 사용하여 기능을 …

더 읽기CSS 토글 메뉴 자바스크립트를 사용하여 만들기

HTML5 의미 요소 종류

HTML5 의미 요소 종류

HTML5의 의미 요소(Semantic Element)는 요소 이름부터 의미가 있는 것을 말합니다. 예를 들어 div 요소는 어떤 의미가 있나요? class나 id 값을 줘야 이게 어떤 요소인지 알 수 있습니다. 반대로 header 요소는 …

더 읽기HTML5 의미 요소 종류

javascript 기초 문법 예제

javascript 기초 문법 예제

javascript는 HTML, CSS와는 다르게 단순히 변하지 않고 아이디, 비밀번호를 입력한 후 버튼을 누르면 반응을 하거나 아이콘을 클릭하면 또 다른 정보가 나오는 등 동적인 정보를 보여줍니다. 또한, 프레임워크 Node.js를 통해 웹 …

더 읽기javascript 기초 문법 예제

HTML5 기본 레이아웃 만들기

HTML5 기본 레이아웃

HTML5 기본 레이아웃은 기본적으로 최상단에는 header 태그를 사용하고 최하단에는 footer 태그를 사용합니다. 그 사이에는 핀터레스트와 같은 레이아웃으로 제작하거나 생활코딩과 같이 왼쪽에는 aside 태그를 사용하고 나머지는 content로 정보가 오게 하는 레이아웃으로 …

더 읽기HTML5 기본 레이아웃 만들기

웹의 동작 원리

클라이언트 dns 서버

웹의 동작 원리에서는 구글, 네이버 등 웹 사이트에 접속할 때 어떤 방식으로 동작하는지 개념에 대해 알아보겠습니다. 여러분들이 만약 브라우저에 ‘https://itemscode.com‘을 입력하고 접속하면 그 사이트에 대한 웹 페이지가 나옵니다. 그리고 다른 …

더 읽기웹의 동작 원리