HTML/CSS 마크업 정리_실무편 -이미지 opacity 설정 img(opacity:0.4;filter:alpha(opacity=40))-font-family 지정시 sans-serif 도 함께 지정해 준다 ex) font-family{tahoma, sans-serif}-모바일 이미지 스프라이트 제작시 폰트 숨김처리는 color:transparent 속성으로 한다-pc제작시에는 font-size:0;line-height:0 속성 적용-IE8 까지 싱글콜론 CSS2 속성 (:before) 지원하고 더블콜론 (::before) CSS3 속성은 IE9부터 적용-webkit 관련자료 https://developer.mozilla.org/en/docs/Web/CSS/Reference/Webkit_Extensions-가상 선택자를 활용한 모바일 클릭영역 확보-http vs. https의 차이점-git diff/ css/ 완성화면 전달 시 폰트/디자인 레.......

HTML/CSS_반응형 이미지 자동 최적화 다양한 스마트기기의 등장으로, 반응형 이미지는 마크업에서 매우 중요한 이슈가 되었습니다. 오늘 제가 공유할 내용은 2015년 9월 1일자 크롬뉴스에 소개된 "이미지 최적화 문제" 입니다. "이미지 최적화의 어려움과 이미지 자동화만이 해답이다"라는 소제목으로 소개된 저자 Ilya Grigorik의 글은 반응형 이미지에 대한 심도깊은 내용을 담고 있습니다. 우선 이미지 최적화의 몇 가지 어려움이 있습니다. 1) 적합한 이미지 포맷 정하기 (벡터 vs. 래스터=픽셀)2) 이미지 인코딩 포맷 정하기 (jpeg, WebP, etc)3) 이미지 압축시 손실되는 정보 최소화하기4) 다양한 디스플레이 크기와 DPR (Device Pixel Rat.......

Xcode(엑스코드) 아이폰시뮬레이터 설치하기웹퍼블리셔 작업을 하다보면 자신이 만든 산출물이다양한 모바일 기기에서도 잘 나오는지 꼭 확인이 필요합니다.저는 작업시 맥을 사용해서iOS에서 쉽게 사용할 수 있는 XCODE를 소개합니다.사실, 이 앱은 웹퍼블리싱을 목적으로 만들어진프로그램은 아닙니다.앱 개발자가 자신이 만든 앱을 컴퓨터에서다양한 모바일 기기를 사용하는 것처럼테스트 하기 위해 사용합니다.오늘은 그 다양한 기능중에서IOS 시뮬레이터 사용방법에 대한포스팅을 소개합니다.링크된 웹사이트에 설치 절차가 자세하게 나와있지만영어가 어려우신 분들을 위해 한국어로 간단히 설명하였습니다.1. 앱스토어에서 Xcode를 다운.......

Window/Mac 시스템 폰트 종류_ 폰트 호환성 윈도우 비스타/7/8: 맑은고딕ox마운튼 라이언/iOS 6.x: 애플산돌고딕안드로이드 4.2: 네이버 나눔고딕 (아이스크립 샌드위치의 Roboto 이후, 4.2 젤리빈에서는 한글폰트의 가독성 증대를 위해 나눔고딕이 추가 되었습니다)운영체제 시스템폰트 호환성 사이트: http://www.cssfontstack.comiOS 폰트 호환사이트: http://iosfonts.comiOS8은 Helvetica Neue를, iOS9에서는 애플워치에 사용된 San Francisco 폰트가 노출됩니다.

강남 웹퍼블리셔/웹디자인 학원_모노라움 안녕하세요:)이번 포스팅에서는 미래의 웹퍼블리셔를 준비하는 분들을 위한학원 소개를 하고자 합니다.바로, 강남에 위치한"모노라움" 저는 이곳에서 웹퍼블리셔 입문반과 실무반을 이수하고현재는 웹개발자로 일을 시작하였습니다.여전히 실무를 통해 배울점이 많지만학원의 커리큘럼을 통해 탄탄한 기초를 다질수 있었으며시작할 때 가진 배움에 대한 열정은현재 블로그 운영을 통해 꾸준히 키워나가고 있습니다. 처음 학원에 방문 했을때 깔끔하고 정돈된 실내 인테리어가 너무 좋았습니다.특별히, 수강생들을 배려한 따뜻한 실내 조명과 휴식공간이인상적이였습니다. 저 또한 쉬는 시간마다 커피와 차.......

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 실행시 바로 실행 함수를 적어줘야 합니다.......