javascript object 관련 테스트javascript object 관련 테스트
Posted at 2014. 11. 10. 16:42 | Posted in 프로그래밍 언어/Javascript소스코드
var h = {};
console.log(typeof h);
h['a'] = 'aa';
h['b'] = 'bb';
Object.prototype.testFunction = function() {
console.log('testFunction called');
}
console.log('length property = ' + h.length);
for (var i in h) {
console.log(i + ' > ' + h[i]);
}
console.log(Object.keys(h));
결과
[test.html:4] object
[test.html:12] length property = undefined
[test.html:14] a > aa
[test.html:14] b > bb
[test.html:14] testFunction > function () {
console.log('testFunction called');
}
[test.html:17] Array[2]
0: "a",
1: "b",
length: 2,
__proto__: Array[0]
크롬에서 트위터의 한글 깨짐(콜론 생김) 현상크롬에서 트위터의 한글 깨짐(콜론 생김) 현상
Posted at 2013. 7. 1. 22:58 | Posted in 프로그래밍 언어/HTML/CSS크롬을 사용하다보면 간혹 한글이 이상하게 보이는 사이트가 있습니다.
대표적인 곳이 트위터.
그냥 무시하고 쓰다가.. 영 거슬려서 해결책을 찾아봤습니다.
CSS에서 text-rendering 항목을 auto로 바꾸면 된다고 하네요. (http://wpu.kr/tip/some-themes-chrome-hangul-colon/)
그래서 한번 트위터의 CSS를 봤습니다.
위 처럼 콜론이 생기는 부분을 봤더니, 대략 조건이 다음과 같아 보입니다.
- HTML 태그는 h1 ~ h6
- CSS에서 text-rendering: optimizeLegibility
- 폰트는 영문 폰트. 특이한건 대표폰트로 Arial이나 Verdana 같은걸 놓고 서브로 sans-serif를 설정했을 때에만 발생..
..... 복잡하네요.
뭐 조건이 어떻든 간에, text-rendering 항목을 auto로 바꾸면 해결된다고 하니, CSS를 수정합니다.
그런데 트위터는 제가 맘대로 CSS를 바꾸고 그럴 수가 없으니까..
크롬 브라우저에서 사용자 전용 CSS를 적용했습니다. (http://circleses.tistory.com/23)
위 블로그에도 나와있지만, 아래 파일을 연 다음
appdata\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
다음과 같이 입력하고
h1, h2, h3, h4, h5, h6 { text-rendering: auto !important; }
저장!
브라우저를 끄거나 새로고침 할 필요 없이 바로 적용 됩니다.
와~
URL anchor값 얻기URL anchor값 얻기
Posted at 2012. 8. 14. 22:53 | Posted in 프로그래밍 언어/Javascriptanchor에 대해서 간단히 몇 자 적습니다.
아래와 같이 하나의 html 문서 내에서 bookmark처럼 사용할 수 있는데요.
'제목으로' 링크를 누르면 'title1'이 정의된 곳으로 화면이 이동하는 기능.
제목 : 이러쿵저러쿵 제목으로
여기서 단순히 이동만 하는게 아니고, URL 뒤에 #xxx 형태로 값이 기록되기 때문에(xxx.html#title1)
자바스크립트를 사용해서 동적인 페이지를 만드는 웹사이트의 경우에 '현재 상태를 기록'하는 용도로 활용할 수 있을 것 같습니다.
예를 들어 ajax로 구현된 게시판이 있다고 하면...
1 2 3
이 때, ajax를 사용하지 않는 게시판이라면 URL은 list.do?page=3 라는 식이 되겠죠.
페이지를 표시하기 전에 URL의 page=3 값을 읽어서 3페이지의 글들을 화면에 뿌려주도록 처리할테구요.
여기서는 URL이 list.do#3이 될테고,
javascript에서 #3 값을 읽어서 3페이지를 보여주게끔 처리할 수 있습니다.
이렇게 놓고 보니 정말로 (사용자 입장에서는) 3페이지에 'bookmark' 표시를 한 것처럼 동작하겠네요 ㅎㅎ
URL anchor 값은 페이지 리로딩 없이 바꿀 수 있기 때문에,
페이지를 동적으로 만드는 경우에 궁합이 잘 맞을거 같습니다.
그러면 이제 저 #3 값을 얻는 방법을 알아야겠죠.
예를 들어, URL이 xxx.html#home 이라고 가정하면
var locationHash = location.hash; // locationHash == '#home'
위와 같이 얻을 수 있습니다.
다양하게 활용할 수 있을 것 같네요.
개인 프로젝트, Online-Utility Server개인 프로젝트, Online-Utility Server
Posted at 2012. 7. 21. 13:29 | Posted in 개인 프로젝트/Online-Utility Server요즘 통 공부를 안 하는거 같아서...
개인적으로 프로젝트를 하나 진행해 보려고 합니다.
공부를 위해 하는 개인프로젝트니까 당연히,
요구사항부터 설계, 디자인, 구현, QA까지 전부 저 혼자서 ㅎㅎㅎ
가칭, Online-Utility Server.
귀찮은 작업들을 대신 해 줄 수 있는 프로그램들을 구현하고
그걸 웹에서 실행 및 관리할 수 있도록 하는 거에요.
일단 지금 생각하고 있는 메뉴로는
- 하루치 트위터 글들(자신의 타임라인, 자기가 쓴 멘션, 받은 멘션)을 블로그에 저장.
- 인코딩 변환
- 그리고 회사에서 개발할 때 수동으로 하기에는 양이 많은 부분의 자동화 (사실 이게 제일 비중&규모가 큼)
아래 나열된 것들을 가지고 구현할 생각입니다. 공부가 되라고 안 써본 것들 위주로 구성해 보았습니다.
- Jetty
- Spring MVC
- iBatis
- FreeMarker
- slf4j & logback
- JDOM
- Jackson
- jQuery
간간이 내용 공유하도록 하겠습니다.
max-height를 이용한 특정 높이가 되면 스크롤바가 생기는 div 박스.max-height를 이용한 특정 높이가 되면 스크롤바가 생기는 div 박스.
Posted at 2011. 8. 3. 00:27 | Posted in 프로그래밍 언어/HTML/CSS내용입니다 2
내용입니다2
내용입니다3
내용입니다4
내용입니다5
내용입니다6
이런걸 만드는 겁니다.
처음엔 높이가 내용에 종속적인 <div> 박스였다가,
내용이 길어져서 높이가 특정 값이 넘어가면 더이상 늘어나지 않고, 스크롤바가 생기는 <div> 박스입니다.
요점은 CSS의 max-height와 overflow-y내용입니다1
내용입니다2
내용입니다3
내용입니다4
내용입니다5
내용입니다6
1. max-height로 높이에 최대값을 설정
max-height는 해당 엘리먼트의 최대 height를 지정하는 겁니다.
예를 들어 max-height: 100px 이라면,
해당 엘리먼트는 내용에 따라 height가 10px이 될 수도 있고 100px이 될 수도 있지만, 101px은 될 수 없습니다.
이렇게 특정 높이가 되면 height가 증가하지 않도록 만듭니다.
그.러.나.
IE에서는 max-height가 안 먹히네요. 심지어 IE8에서도.
대신에 위에 보이는 것 처럼 height: expression(...)을 사용하면 됩니다.
의미는 간단하게, '높이가 99px보다 크면 height를 100px로 설정하고, 아니면 auto로 설정한다'
즉, 높이는 100px을 초과할 수 없고, 100px보다 작으면 내용에 따라 늘었다 줄었다 하는거죠.
max-height처럼!
( * 출처: http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/ )
2. 넘어가는 내용을 위해 스크롤바 생성
overflow는 내용이 엘리먼트를 넘어갔을 때 어떻게 표현될 것인지를 설정합니다.
overflow-y: auto 로 설정하면 세로로 내용이 넘어갈 때만 세로 스크롤바가 생기는거죠.
( * 자세한 건 http://www.w3schools.com/cssref/pr_pos_overflow.asp 를 참조 )
