자바스크립트

웹페이지, 또는 요소의 높이값 정보를 얻는 속성은 대표적으로 clientHeight와 offsetHeight, scrollHeight가 있습니다. 세 속성은 어떤 경우에는 값은 높이값을 표시하지만, 어떤 경우에는 다른 높이값을 표시합니다. 각 속성이 표시하는 높이 값의 의미는 다음과 같습니다. * clientHeight 는 요소의 내부 높이입니다. 패딩 값은 포함되며, 스크롤바, 테두리, 마진은 제외됩니다. * offsetHeight 는 요소의 높이입니다. 패딩, 스크롤

---------------------------------------------------------------------------------- 2021.05.28 업데이트 소스에 체크박스 체크에 따라 값이 자동 계산되도록 개선 업/다운 화살표 아이콘을 삭제해도 기능 동작에 문제가 없도록 개선 ---------------------------------------------------------------------------------- 쇼핑몰 장바구니를 관리하는 프론트엔드 화면을 제작해보겠습니다. 쇼핑몰이 아니어도 견적서나, 금액 합계를 구하는데 적용할수 있는 기능으로 활용할 수 있습니다. 요청하시는 분이 있어 완성된 풀소스를 올려드립니다. 다운로드 받아

반응형 웹에서 모바일 UI를 구현할 때는 화면 크기의 제약으로 인해 화면 위나 옆에서 메뉴가 펼쳐지면서 보이도록 구현합니다. 좁은 모바일 화면을 최대한 활용하는 방법이기 때문에 주로 이 방법을 사용하며, 기본 화면에는 메뉴를 열기 위한 아이콘만 표시합니다. 자바스크립트 라이브러리를 사용하면 메뉴를 펼쳤다 접는 과정의 코드를 단순화 할 수 있기 때문에 라이브러리를 활용하는

반응형 웹을 구현할 경우, 또는 모바일 기기용 UI를 구현할 경우 모바일 기기 여부, 또는 종류를 확인하는 것은 필수입니다. 과거처럼 데스크탑용 화면과 모바일용 화면을 따로 만들지 않는 것이 기본 웹 개발의 방향이기 때문에 모바일 기기 체크를 필수적으로 해야 합니다. 모바일 기기체크를 하는 방법은 다양합니다. 대중적으로 많이 사용하는 기기들만 간단하게 체크를 하는

반응형 웹, 또는 모바일 웹에서는 컨텐츠를 표현할 때 테이블과 아이프레임은  가능하면 피해야 하는 요소입니다. 이 두 태그는 컨텐츠의 표현 방법이 모바일이나 반응형에 적합하지 않고, 고정 크기를 가지는 경우가 많아, 모바일 기기에서 화면이 오른쪽으로 밀려나는 문제점을 발생시킵니다. 모바일 기기의 특성상 위/아래 스크롤만 되어야 하는데, 테이블이나, 아이프레임에 정한 크기값이 모바일 기기

오픈마켓 상품 페이지를 보면 기본적으로 더보기 버튼으로 긴 상세보기 내용을 짧게 보여주고 있습니다. 긴 상세보기 내용을 모두 표시하는데 걸리는 시간을 줄여주고, 긴 상세보기 내용을 모두 볼 필요가 없는 방문객들에게 짧은 스크롤 동작을 제공하기 때문에 많은 쇼핑몰에서 표준 기능으로 채택을 하고 있습니다. 쇼핑몰 외에 모바일 웹페이지들은 기본적으로 가로가 좁기 때문에 같은

반응형 웹페이지/사이트를 구현하는 방법은 CSS 미디어 쿼리를 이용하는 방법과 자바스크립트를 이용하는 방법 2가지가 있습니다. 2가지 방법 모두 브라우저 너비를 기준으로 적용하는 CSS를 다르게 해서 너비, 또는 장치에 따라 알맞는 레이아웃으로 보이도록 합니다. 두 방법은 장단점이 있습니다. CSS를 이용한 방법은 직관적이고 쉽습니다. 그리고, CSSOM에 기반하기 때문에 자바스크립트보다 속도가 빠릅니다. 자바스크립트를

할일을 메모해서 관리하는 간단한 앱을 제작합니다. "to DO List" 앱은 할일 내용과 중요도를 선택하는 입력 폼 1개와 할일의 진행단계에 따라 구분해서 표시하는 목록 1개로 구성됩니다. 할일 목록은 각 할일을 단계별로 구분해서 표시하고, 할일->진행중->완료 로 단계가 구분됩니다. 각 할일에 표시되는 ">>" 버튼을 눌러 다음 단계 목록으로 이동하는 기능을 구현하며, 선택자로

쇼핑몰, 또는 커뮤니티 게시판의 리뷰 평점, 또는 후기 평점 기능을 자바스크립트 프로토타입으로 구현해보겠습니다. 별점이라고도 하는데, 대부분은 별 5개로된 평가 점수를 선택하고, 댓글 내용을 입력한 후 저장하는 방식으로 구현합니다. 기능의 핵심은 별 갯수를 선택하는 방식이며, 4번째 별을 클릭하면 1 ~ 4까지의 별이 선택되어 보여야 합니다. 부가적으로는 별점의 평균을 구해 평점만큼 별을 채워

append()와 appendChild() 는 기본적으로 같은 기능을 하는 함수입니다. 기능이나 확장성에서 append() 가 뛰어나기 때문에 append() 를 사용하는 것이 좋습니다. 두 메서드는 다음과 같은 차이가 있습니다. 차이점  append() appendChild()  타입 자바스크립트 메서드  DOM 메서드  추가 노드 갯수  여러개 허용 나머지 파라메터 사용 가능 엘리먼트.append(...nodes); 1개  문자열 노드 추가