CSS강좌_SASS 전처리기 http://sass-lang.com/ -SASS(사스)란 무엇인가?CSS는 HTML 엘리먼트를 선택하여 디자인을 넣어주는 단순한 원리를 가지고 있습니다. 즉, 프로젝트 규모가 커지거나 복잡해지면 CSS스타일을 관리하는데 큰 어려움이 생깁니다. 그러면에서, SASS는 다양한 명령어와 수식을 이용하여 간단한 스타일로 여러 엘리먼트의 속성을 관리할 수 있다는 장점이 있습니다.-> SASS 소개 사이트: https://opentutorials.org/course/338/2488 -SASS 명령어중 mixin,extend, placeholder의 차이점 SASS 에서는 미리 만들어놓은 모듈을 간단한 명령어로 불러오는 방법이 있습니다. 대표적으로 mixin, extend, 그리고 placdholder가 있는.......

자바스크립트 강좌_4 교제추천 자바스크립트 입문 기초정리 포스팅은 "인사이드 자바스크립트 (한빛 미디어)" 내용을 참고하였습니다. 제가 이 서적을 참고한 이유는 자바스크립트 입문자에게 꼭 필요한 바이블과 같기 때문입니다.그렇기 때문에 아래 요약 정리에 대한 내용은 참고서적을 학습한 뒤 보셔야 내용 이해가 쉽습니다. -자바스크립트 데이터 타입: 1) 기본타입 (숫자, 문자열, 불린값, undefined, null) 2) 참조타입 (배열, 함수, 정규표현식)-정수형이 따로 없어서, 모든 숫자는 실수로 처리된다. Math.floor() 메서드를 사용하면 정수 부분만 구할 수 있다-문자열은 작음 따옴표, 큰 따옴표로 생성하며 한 번 정의된 문자열은 수정.......

자바스크립트 & 제이쿼리 강좌_실무편 업무를 하다보면 예상치 못한 문제점이 생깁니다.선택은 두 가지 입니다. 해결하거나 포기하거나"자바스크립트 & 제이쿼리 입문_실무편" 에서는문제점을 해결하고 정리하는 방법에 대해 포스팅 하도록 하겠습니다. 1. 오류방생: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 아래 코드에서 문제점은 함수 updateResultPrice 안에있는 $(this)가 선택자 #sum을 가리키지 않고 있다는 것입니다. 이는 일반적으로 함수 안의 this는 window객체를 가리키기 때문에 생기는 문제점입니다. 이를 해결하기 위해서는 맨 위에있는 keydown 실행시 바로 실행 함수를 적어줘야 합니다.......

제이쿼리 강좌_다운 제이쿼리 HTML 내 삽입 방법 jQuery 다운로드 후 로컬 폴더에 저장-다운로드 받을 수 있는 파일은 크게 두 가지로 구분되어 있음.-현재까지 jQuery 1.x 버전 (IE 6, 7, or 8 에서 사용가능)과 jQuery 2.x 버전 출시 (IE 하위버전에서 사용 불가).-1) Production 버전: 코드 사이의 공백을 없엔 압축파일로 로딩속도가 빠르지만 코드 해석과 이해가 어려움.-2) Development 버전: 테스트와 개발 목적으로 만든 파일로 일반적인 코드형식으로 되어있기 때문에 해석이 가능함.-다운로드 경로: https://jquery.com/download jQuery CDN (Content Delivery Network) -서버에서 제이쿼리 파일을 불러와 사용하는 방식으로 구글, 마.......

스마트기기 디바이스 해상도 정리 기본 해상도 가로폭디바이스 480px 스마트폰 800px 태블릿 1024px 넷북 1600px 데스크탑 스마트폰 해상도 : 브라우저 해상도의 2배 디바이스해상도 브라우저 해상도 아이폰 4, 4S 643x960 320x480 아이폰 5 (326ppi) 640x1136 320x568 아이폰6 (326ppi) 750x1334 375x667 아이폰6 plus (401ppi) 1242x2208 414x736 갤럭시 S3 720x1280 360x640 갤럭시 넥서스 720x1280 360x640 갤럭시 노트 800x1280 400x640 갤럭시 노트2 720x1280 360x640 갤럭시 노트4/ 삼성 갤럭시 노트 엣지 1440x2560 720x1280 태블릿 해상도 디바이스해상도 브라우저 해상도 아이패드, 아이패드 미니 1024x768 1024x768 아이패드 레티나 1.......

CSS 스타일 초기화 방법_Reset vs. Normalize 마크업에서 css 스타일을 적용시모든 브라우저에서 동일한 디자인을 만들어내기 위해css 파일 맨 위에 리셋 코드를 입력합니다.아래의 코드가 바로 전 세계적으로 가장 많이 사용하는css 리셋 코드입니다. (Eric Meyer's Reset CSS) 리셋 코드가 모든 엘리먼트의 속성을 초기화하는 반면Normalize.css 는 좀 더 특별한 점이 있습니다. 이번 포스팅에서는 해외 사이트에 소개된Normalize.css의 특징을 간단히 살펴보고자 합니다. Normalize.css는 작은 용량의 css파일로 HTML엘리먼트의 속성을 조절하여좀 더 멋진 크로스브라우징을 구현합니다. -Normalize.css 프로젝트 사이트.......

CSS강좌_display:box 속성으로 레이아웃 디자인하기 이번 포스팅은 아래의 자료를 참고하여작성한 내용입니다. div 엘리먼트를 정렬할 때 display:table과 table-cell을 많이 사용합니다.하지만, display:box는 매우 생소합니다.저 또한 위에 링크된 글을 읽고 처음으로알게된 부분입니다. 제가 보기에, display블록은 float, vertical-align, text-align 기능이 합쳐진 아주 좋은 기능입니다. 물론, ie 최신버전에만 사용해야하고pc보다는 모바일 제작시 사용해야 합니다. display 블록의 기능으로는 box-orient, box-pack, box-direction, box-flex가 있습니다.자세한 내용은 링크된 사이트를 참고하세요! display 블록을 사용해서 jsbing을 사.......

제이쿼리 강좌 (jQuery Selector)_제이쿼리 선택자 정리 제이쿼리의 강력한 장점 중 한가지가바로 손쉽게 사용 가능한 jQuery API 입니다.이번 포스팅에서는 주요 API 기능 설명과 함께 관련된 팁을 공유하고자 합니다. 1.each().each 메서드는 DOM 구조에서 여러개의 엘리먼트로 구성된, 예로, ul 과 그 밑에 포함되어 있는 li 태그들을 처음부터 끝까지 돌면서 함수나 명령어를 실행한다. 처음 시작점은 index 의 첫번째인 "0" 번으로 시작한다. 이때 함께 사용하는 this 는 현재 선택중인 엘리먼트를 가리키는 매우 중요한 선택자이다. 좀 더 자세히 설명하자면, "개발자가 정의한 콜백 함수가 시행될 때 this 변수는 현재 반복되고 있는 요소.......