문서의 유형을 정의하기 위해 작성하는 에 대해 알아보자. 목차 DTD와 DOCTYPE 선언 선언 이유 버전별 DOCTYPE 선언 DTD와 DOCTYPE 선언 웹 문서는 항상 DTD(문서 유형 정의)를 통해서 현재 문서가 어떤 버전으로 기술되었는지 브라우저에 전달되면서 시작한다. DTD(Document Type Definition)는 XHTML, HTML, HTML5 세 가지 유형이 있으며, 선언된 문서 형식에 따라 마크업 속성을 처리하는 기준이 정해지고, 유효성 검사에 활용된다. HTML은 지원되는 태그가 버전별로 상이한데, 때문에 어떤 유형의 문서인지 정의를 해주어야 웹 브라우저에서 올바르게 인식할 수 있는 것이다. 이 문서 유형을 정의해주는 방법이 DOCTYPE 선언인 것이다. 왜 선언해야 하는가? ..
웹사이트의 반은 이미지라고 해도 과언이 아니다. 때문에 웹 퍼블리셔라면 이미지 형식의 차이 정도는 기본으로 알고 있어야 한다. 어떤 경우에는 jpg를 사용해야 하고, 어떤 경우에는 png를 사용해야 하는지 당연히 구분할 줄 알아야 한다. 디자이너와 협업할 때도 이러한 기본 지식이 없으면 커뮤니케이션이 불가하기 때문에 이번 기회에 알아두도록 하자. 목차 JPG PNG GIF GIF,JPG,PNG 비교표 GIF JPG PNG 압축 O O O 화질 좋지 않음 보통 좋음 용량 작음 작음 다소 큼 투명도 투명 O 반투명 X 투명 X 반투명 X 투명 O 반투명 O JPG 우선, JPG의 정식 명칭은 JPEG(Joint Photographic Experts Group)이며, 둘은 같은 확장자이다. 이전 DOS를 사용..
웹과 관련된 직업을 선택했다면 웹접근성과 웹표준에 대한 개념은 기본으로 알고 있어야 한다. 웹사이트를 제작하면서 웹접근성과 웹표준을 고려하지 않았다면 잘 만든 웹사이트라고 할 수 없다. 웹을 사용하는 데 있어서 차별이나 소외가 없어야 하므로 두 가지 기술을 꼭 인지하여 작업해야 하겠다. 목차 웹표준 웹접근성 웹표준 웹표준(Web standards)이란 여러 종류, 버전이 있는 브라우저 간에 상호 호환성을 위해 W3C가 권고한 표준적인 기술이나 규칙을 의미한다. 웹표준을 준수해야하는 궁긍적인 목적은 사용자가 어떤 브라우저를 사용하든지 간에 똑같은 결과를 전달받을 수 있게 하기 위해서이다. 장애인, 노약자 등을 포함한 모든 사용자를 지칭하며 이들이 동일한 결과의 웹사이트를 이용할 수 있도록 웹표준 기술 작업..
코딩 작업 속도를 높여주는 런처 프로그램 추천 (Launchy)
코딩 작업을 하다 보면 생각보다 계산을 해야 할 때가 많다. 특히 반응형 웹 작업이라면 rem 등 단위 계산을 해야 하기 때문에 더 그렇다. 그렇다고 맥이나 윈도우 기본 계산기를 사용하자니 너무 불편하고 귀찮다. 물론 값만 입력하면 자동으로 값을 뽑아주는 사이트도 많지만 복붙도 귀찮아질 때가 있다. 그래서 나는 따로 런처 프로그램을 사용하는데, 가벼운 텍스트 기반의 런처 프로그램인 'Launchy'를 소개한다. 참고로 만약 맥 사용자라면 control+space를 눌러 'Spotlight Search'를 이용하면 된다. Launchy처럼 편하게 쓸 수 있는 기능이 맥에 원래 있기 때문에 굳이 따로 런처 프로그램을 설치 안 해도 될 것이다. 물론 숫자만 입력해서 계산기 기능도 빠르게 사용 가능하다. 목차 ..
$(selector).each(function(index,element)) - 일반적인 방식 *return false를 사용하여 반복을 중지시킬 수 있다. $.each( array, callback ) - 유틸리티 방식 - $.each() 함수는 단독 객체를 반복하는 $(selector).each() 와 다르다. - 이 방식은 객체든 배열이든 모두 사용 가능하다. 참조 api.jquery.com/jquery.each/ www.w3schools.com/jquery/misc_each.asp
var, let, const 차이점과 유효범위 (Scope)
작업을 할 때 무의식적으로 var로만 변수를 선언하다가, let이나 const라는 변수를 보면 의아할 것이다. 도대체 왜 변수를 구분해서 쓸까? 사실 ES6 이전에는 let과 const가 존재하지 않았다. ES6에서 let과 const가 추가되었는데 차이점과 사용법에 대해서 알아보도록 하자. 목차 Scope란? var, let, const 비교표 var의 문제점 var과 let의 재선언과 재할당 var과 let의 참조 function scope와 block scope Scope란? Scope란 변수의 유효 범위를 말한다. 선언한 변수가 어디까지 영향을 줄 수 있냐는 말이다. ES6부터 변수에도 종류가 생겼는데 각 변수에 따라 성격이 다르다. var, let, const 비교표 var let const 재..
단, 화살표 함수는 익명의 함수로만 사용 가능하다.
모바일 사용자가 점점 늘어나면서 반응형 브라우저의 중요성이 날로 커지고 있다. 반응형 웹 작업을 할 때에는 CSS 미디어 쿼리가 필수인데, 미디어 쿼리 작성 방법에도 종류가 있다. 어떤 디바이스를 우선으로 할 것이냐에 따라서 크게 나뉘는데 각 방법을 알아보고 상황에 맞게 작성하는 것을 추천한다. 목차 뷰포트 Viewport 모바일 퍼스트 Mobile first 데스크탑 퍼스트 Desktop first Overriding(덮어쓰기) 없이 해상도마다 지정 뷰포트 Viewport 우선 반응형 웹페이지를 작업하기 전에 꼭 준비해야 하는 사항이 있는데, 바로 Viewport이다. head 태그 사이에 meta viewport 태그를 넣어주어야 한다. Viewport를 작성하는 이유는 웹 페이지를 여러 디바이스 크..
요즘은 대부분 반응형 브라우저이기 때문에 반응형에서 사용되는 단위를 사용해야 할 것이다. 그중에서도 가장 많이 사용되는 단위가 rem과 em, 그리고 % 인데 도대체 언제 어떤 걸 사용해야 하는 걸까? 이번 기회에 제대로 알고 제대로 사용해보자. 목차 em과 rem의 공통점 em과 rem의 차이점 em과 rem 언제 쓸까? 반응형에서 무조건 rem을 써야 할까? 마치며 em과 rem의 공통점 두 단위 모두 폰트 사이즈에 따라 변하는 가변 단위이다. 같은 방식이지만 어떤 엘리먼트이 폰트 사이즈가 기준이냐에 따라 나뉜다. 비율에 따른 가변 단위이지만 브라우저 상에는 픽셀 단위로 표현된다. em 계산 상위 엘리먼트 폰트 사이즈 * em값 = 픽셀값 (상위 엘리먼트 폰트 사이즈가 18일 때) 1em = 18 *..