개발일지

[배경] 회원가입 입력 폼을 작성할 때는 에러메시지 출력까지 고려해야 한다. 에러메시지가 없을 때, 1개만 나올 때, 2개만 나올 때, 다 나올 때, 길이가 다를 때 등 생각보다 고려해야할 것이 많다. [이슈] 아래 화면에서 select 를 감싸고 있는 div 에 border-left:1px solid #ddd 를 적용했다. 따라서 해당 div 높이에 따라 오른쪽 테두리가 그어지는 형태라 아래와 같은 이슈가 발생한다. [구조] div.birth └ div.birth_info └ select [해결] div에 border-collapse를 적용하기 위해 display 속성을 table로 변경 .birth { display:table; width:100%; border-collapse:collapse; } ..

[출처] http://darum.daum.net/convention/image

CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다. - 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적 - 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리 - em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함. - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함. - px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐. - % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐. - pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위 대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16p..

2018.04.26 commentoutdated post는 지우려고 했는데, 그냥 역사(!)로 남겨두기로 한다.지금은 웹 디자인을 포토샵보다는 스케치로 많이 할 뿐더러 전달 방식도 제플린을 통해 수치값을 가이드 없이 작업자가 편하게 확인할 수 있다. ~2015년 중반 : 디자이너가 없어서 외주 디자이너의 PSD를 직접 전달받아서 혼자 수치 다 확인하면서 퍼블리싱, 에셋도 직접 다 뽑음2015년 후반 : 디자이너분이 스크린샷 위에 수치값을 적어서 문서로 전달 + 여전히 PSD 파일 필요, 에셋을 직접 뽑기도 함2016년 : 아보코드라고 PSD의 수치값을 비교적 쉽게 확인할 수 있는 툴을 잠깐 사용2017년 : 디자인을 스케치 파일로 하기 시작하면서, 최종 산출물을 제플린으로 받음 에셋도 제플린을 통해서 추..

스크립트 캐시생성을 막고 매번 새 파일을 로드[출처] http://www.w3schools.com/jquery/ajax_getscript.asp

레이아웃 엔진(layout engine) 또는 렌더링 엔진(rendering engine)은 웹 콘텐츠(HTML, XML, 그림 파일 등)와 포맷 정보(CSS, XML 등)를 가져 와서 화면에 해당 콘텐츠를 정리하여 보여 주는 소프트웨어를 말한다. 이 프로그램은 모니터나 프린터에 표시할 창의 콘텐츠 영역을 그린다. 레이아웃 엔진은 웹 브라우저, 이메일 클라이언트와 같은 웹 콘텐츠를 보여 주거나 편집하는 데 쓰이는 응용 프로그램에 사용된다. 이름 설명 게코(Gecko) 모질라 재단에서 만든 레이아웃 엔진으로 파이어폭스, 모질라 선더버드, 시몽키 등이 이를 탑재하고 있다. 트라이던트(Trident) 마이크로소프트의 레이아웃 엔진으로 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩, 그리고 윈앰프..

라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가이다. 라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있다. 반면, 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재한다. 프레임워크는 가져다가 사용한다기보다는 거기에 들어가서 사용한다는 느낌/관점이다. [인용] 거꾸로 배우는 소프트웨어 개발 즉, 어플리케이션의 Flow를 누가 쥐고 있느냐다.프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣는다. 반면 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이다.[출처] 프레임워크와 라이브러리 프레임워크도 제어의 역전 개념이 적용된 대표적인 기술이다. 프레임워크는 라이브러리의 다른..

auto-links true URL입력시 자동으로 링크시킬지 여부 설정 데모 보기 class-name '' SyntaxHighlighter에 CSS를 적용시킬 때 데모 보기 collapse false 내용 숨기기 여부 설정 (클릭시 보여지게 하는 기능). 데모 보기 first-line 1 첫번째 라인 번호를 변경 할 때 데모 보기 gutter true 왼쪽 넘버링(숫자) 표시 여부 설정 데모 보기 highlight null 특정 라인의 내용을 강조하고자 할 때 데모 보기 html-script false HTML/XML 코드를 강조하여 표시 데모 보기 smart-tabs true 탭 사용 설성. 데모 보기 tab-size 4 탭 사용시 뛰울 간격 설정 데모 보기 toolbar true 툴바 표기 설정. 데..

복합 선택자와 키 선택자 CSS를 사용할 때 #nav와 같은 단일 선택자를 사용할 수도 있지만, #nav > *와 같은 복합 선택자를 사용할 수도 있다. 이러한 복합 선택자를 읽는 순서는 사람과 브라우저가 다르다. 사람의 경우 왼쪽에서 오른쪽으로 선택자를 읽지만 브라우저는 오른쪽에서 왼쪽으로 읽는다. 이는 복합 선택자의 왼쪽에서 오른쪽으로 탐색을 하는 방식이 오른쪽에서 왼쪽으로 탐색을 하는 방식보다 빠르기 때문이다. 왜 그런지는 이 글에서 자세히 설명되어있다. 해당 글을 요약하자면, 왼쪽에서 오른쪽으로 탐색을 하는 방식을 사용할 경우 DOM 트리의 상위 레벨에서 하위레벨로 탐색을 진행한다(Top-down 방식). 즉, DOM 요소와 매치되는 선택자들을 찾는데 집중한다. 반면 선택자의 오른쪽에서 왼쪽으로 ..