크롬에서 트위터의 한글 깨짐(콜론 생김) 현상크롬에서 트위터의 한글 깨짐(콜론 생김) 현상
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; }
저장!
브라우저를 끄거나 새로고침 할 필요 없이 바로 적용 됩니다.
와~
max-height를 이용한 특정 높이가 되면 스크롤바가 생기는 div 박스.max-height를 이용한 특정 높이가 되면 스크롤바가 생기는 div 박스.
Posted at 2011. 8. 3. 00:27 | Posted in 프로그래밍 언어/HTML/CSS제목 쓰기 참 어렵군요....;;;
이런걸 만드는 겁니다.
처음엔 높이가 내용에 종속적인 <div> 박스였다가,
내용이 길어져서 높이가 특정 값이 넘어가면 더이상 늘어나지 않고, 스크롤바가 생기는 <div> 박스입니다.
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 를 참조 )
내용입니다 1
내용입니다 2
내용입니다 2
내용입니다1
내용입니다2
내용입니다3
내용입니다4
내용입니다5
내용입니다6
내용입니다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 를 참조 )
