여러 방법으로 자바스크립트로 HTML의 요소(Element)를 가져올 수 있다. 요소를 가져오면 자바스크립트로 HTML의 값을 변경할 수 있다. 웹 페이지에 동적인 변화를 줄 수 있게 된다. 아래 예제는 버튼을 누르면 p 태그에 있는 글자의 색이 바뀌는 코드다. document.getElementById() document.querySelector() document.getElementsByTagName() 세 가지 방법으로 접근했다. HTML 테스트 blue red document.getElementById("id"); function changeColor(newColor) { var elem = document.getElementById('para'); elem.style.color = newColo..
다음 카카오는 국내 우편번호 및 주소 DB를 서비스에 쉽게 적용할 수 있도록 API를 제공하고 있다. 행정안전부에서 제공하는 최신 DB를 업데이트해 사용하므로 정확하고 별도로 키를 발급받을 필요도 없어 좀더 간편하다. 단, API 호출을 위해서는 파일을 서버에 올려놓고 진행해야 한다. 그냥 HTML을 실행시키면 동작하지 않는다. 실습 목표는 위 화면처럼 '우편번호찾기' 버튼을 누르면 카카오에서 제공하는 우편번호 검색창이 나타나고 최종 주소를 확정하면 우편번호와 주소에 해당 값이 자동으로 입력되는 것이다. 우선 우편번호와 주소를 담을 테이블을 코딩한다. input 태그에서 우편번호를 담는 id값은 zipcode, 주소를 담는 id 값은 address로 지정했다. 우편번호 주소 이제 자바스크립트를 통해 카카..
우선 이 포스팅은 내용에 대한 이해가 완전히 되지 않은 상태에서 현재까지의 이해를 정리하기 위해 작성함을 밝힌다. 관련 내용을 stackoverflow, W3Schools, MDN을 비롯해서 국내외 블로그 등 자료를 찾아봤지만 대략 무슨 말인지는 알겠는데, 여전히 명쾌하지 못하고 좀 추상적인 느낌이다. sort 함수를 공부하던 중 이해가 잘 안가는 부분이 있었다. .sort(function(a, b) { return a - b; })처럼 sort의 인자(파라미터)로 함수를 받는 형태의 코드다. 이 코드는 숫자로 된 배열을 오름차순으로 정렬할 때 사용된다. 예를 들어 var myArray = [5,3,4,1,2]; myArray.sort(function (a, b) { return a - b }); con..
위 그림처럼 웹 사이트에 두 개 이상의 메뉴바를 만들기 위해선 두 가지 조건을 만족시켜야 한다. li 태그로 만들어진 메뉴 1, 메뉴 2.. 등을 가로로 정렬시켜야 함 두 번째 메뉴바는 화면의 아래 칸으로 넘어가서 생성돼야 함 이때 css의 float: left와 overflow: hidden 속성이 사용된다. 순서대로 살펴보자. 우선 ul 태그 안에 li 태그를 통해 메뉴 1~5를 만든다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 이런 화면이 나타난다. 본래 li 태그는 값이 아래로 이어지게 돼 있다. 메뉴를 오른쪽으로 줄지어야 한다. float: left는 속성이 주어진 태그의 값를 왼쪽으로 정렬한 후 오른쪽 빈 공간에 그다음으로 이어지는 태그 값이 나타나게 한다. head 태그 사이에 이처럼 코딩해 준다..
웹개발을 공부할 때 자바(Java)를 거쳤다면 데이터 입력 시 Scanner 클래스를 왕왕 사용했을 것이다. 그러나 실제 웹 브라우저에서 입력을 담당하는 건 HTML의 태그다. 로그인을 할 때, 양식을 채워 넣을 때, 검색할 때 등 웹사이트에선 무수히 많은 사용자 입력과 서버의 응답이 form 태그를 통해 이루어진다. 아래 예시는 성과 이름을 넣고 제출을 하는 간단한 화면이다. 입력 칸은 여러 개인데 제출 버튼은 하나다. 하나의 form 태그 안에는 여러 개의 input 태그가 포함될 수 있다. 그러나 form 태그 안에는 또 다른 form 태그가 들어올 수 없다. 위 화면을 만드는 코드는 아래와 같다. The form element First name: Last name: Click the "Submi..
html은 링크가 매우 많이 활용된다. 그만큼 올바른 경로를 지정해주는 게 중요하다. 이때 경로는 두 가지로 분류된다. 절대경로(Absolute File Paths) 상대경로(Relative File Paths) 절대경로 절대경로는 어느 곳이든 동일한 위치를 갖는 경로를 말한다. 일반적인 URL을 떠올리면 쉽다. 네이버 메인으로 향하는 경로는 어디서나 https://naver.com이다. 쉽게 말해 http또는 https로 시작하는 URL로 이루어진 경로는 절대경로라고 보면 된다. 네이버 주소 외부 사이트에 존재하는 이미지 파일을 불러오는 것도 역시 절대경로의 예시다. 상대경로 상대경로는 현재 웹 페이지를 기준으로 이동할 파일의 경로가 어디 있는지를 표시하는 개념이다. 예를 들어 path path2(현재..