채택완료
에디터로 글씨를 키운 경우, line-height를 자동으로 해당 글씨 크기보다 크게 ....
설정하는 방법 있을까요?
예를 들어,
체에디터5로 드래그해서 글씨를 키운 경우, 아래처럼 폰크 크기만 들어갑니다.
<span style="font-family:verdana;font-size:36px;;">그누보드</span>
그러다보니, 모바일 버전에서 글씨 겹침 현상이 발생하네요.
만약, 저렇게 글씨 크기가 36px일 경우
자동으로 상하 2px 정도 늘린 40px 정도로 스타일 들어가게 하려면 어떻게 해줘야 하는지?
본문에 작성글의 모든 요소 (p , span, font 등 요소) 등에 일괄적으로 증가시키면 될 것 같은데,,
혹시, 참고할만한 제이쿼리 함수 아시면 소개 부탁드립니다.
답변 2개 / 댓글 9개
채택된 답변
+20 포인트
2017-09-22 (금) 17:48:24
// view.skin.php 하단 삽입
<script>
$('#bo_v_con').children().each( function() {
var pt =$(this).html().replace(/.+font-size:(\d+)pt.+/g, '$1');
if (!isNaN(pt) && Math.floor($(this).css('line-height').replace('px', '') * 3 / 4) < pt)
$(this).css('line-height', pt + 'pt');
});
</script>
답변에 대한 댓글 8개
sinbi
2017-09-22 (금) 17:56:36
sinbi
2017-09-22 (금) 18:25:37
그누5 원본이 아니라 배추베이직이다보니, 위 코드가 적용이 안 되는 것 같네요.
예를 들어,
https://homzzang.com/b/g5-17 페이지를 모바일 버전으로 볼 경우 인뎅...
아래처럼 선택자 부분을 변경해줘봤는데도 작동이 안 되는 것 같아요.
<script>
$('#mw_basic .mw_basic_view_content').children().each( function() {
var pt =$(this).html().replace(/.+font-size:(\d+)pt.+/g, '$1');
if (!isNaN(pt) && Math.floor($(this).css('line-height').replace('px', '') * 3 / 4) < pt)
$(this).css('line-height', pt + 'pt');
});
</script>
예를 들어,
https://homzzang.com/b/g5-17 페이지를 모바일 버전으로 볼 경우 인뎅...
아래처럼 선택자 부분을 변경해줘봤는데도 작동이 안 되는 것 같아요.
<script>
$('#mw_basic .mw_basic_view_content').children().each( function() {
var pt =$(this).html().replace(/.+font-size:(\d+)pt.+/g, '$1');
if (!isNaN(pt) && Math.floor($(this).css('line-height').replace('px', '') * 3 / 4) < pt)
$(this).css('line-height', pt + 'pt');
});
</script>
sinbi
2017-09-22 (금) 19:10:48
파일질라 FTP 접속법 및 화면 구조 설명
24px 정도로 키운 글자들은 그럭저럭 모바일에서도 볼만 한데,
36px나 48px 정도로 키운 글자들은 겹쳐 나오네요.
24px 정도로 키운 글자들은 그럭저럭 모바일에서도 볼만 한데,
36px나 48px 정도로 키운 글자들은 겹쳐 나오네요.
2017-09-22 (금) 22:35:23
<script>
$('#mw_basic .mw_basic_view_content font').each( function() {
if ( $(this).attr('size') > 4) $(this).css('line-height', '1.2em');
});
</script>
$('#mw_basic .mw_basic_view_content font').each( function() {
if ( $(this).attr('size') > 4) $(this).css('line-height', '1.2em');
});
</script>
sinbi
2017-09-22 (금) 22:48:47
위 코드를 넣으니 아주 잘 되네요. 감사합니다. ( ^ __________ ^) ====b
그런데,
본문에 <font size="6"> 처럼 폰트 태그로 글자 크기가 지정된 게 있는가 하면,
또, 어떤 건 <span style="font-size:48px"> 처럼 이렇게 지정된 애들이 있어요.
알려주신 코드를 참고해, 아래처럼 해봤는데 안 되네요.
이 경우엔 어떤 식으로 조건은 주는지?
$('#mw_basic .mw_basic_view_content span').each( function() {
if ( $(this).attr('font-size') > 30) $(this).css('line-height', '3em');
});
그런데,
본문에 <font size="6"> 처럼 폰트 태그로 글자 크기가 지정된 게 있는가 하면,
또, 어떤 건 <span style="font-size:48px"> 처럼 이렇게 지정된 애들이 있어요.
알려주신 코드를 참고해, 아래처럼 해봤는데 안 되네요.
이 경우엔 어떤 식으로 조건은 주는지?
$('#mw_basic .mw_basic_view_content span').each( function() {
if ( $(this).attr('font-size') > 30) $(this).css('line-height', '3em');
});
2017-09-22 (금) 23:02:22
<script>
$('#mw_basic .mw_basic_view_content font').each( function() {
if ( $(this).attr('size') > 4) $(this).css('line-height', '1.2em');
});
$('#mw_basic .mw_basic_view_content span').each( function() {
var px = $(this).css('font-size').replace('px', '');
if (px > 35) $(this).css('line-height', '1.2em');
});
</script>
$('#mw_basic .mw_basic_view_content font').each( function() {
if ( $(this).attr('size') > 4) $(this).css('line-height', '1.2em');
});
$('#mw_basic .mw_basic_view_content span').each( function() {
var px = $(this).css('font-size').replace('px', '');
if (px > 35) $(this).css('line-height', '1.2em');
});
</script>
sinbi
2017-09-22 (금) 23:25:28
슈와이 님, 감사합니다. 위 코드 넣으니 아주 잘 작동하네요.
덕분에 몇 년 동안 묵혀두었던 고민을 해결해 버렸네요.
정말 감사합니다. 덕분에 신기한 코드 구경 많이 했습니다.
( ^ __________ ^ ) ============================b
덕분에 몇 년 동안 묵혀두었던 고민을 해결해 버렸네요.
정말 감사합니다. 덕분에 신기한 코드 구경 많이 했습니다.
( ^ __________ ^ ) ============================b
ysnet
2017-09-22 (금) 17:40:50
css에서 line-height:1.5; 정도 주면 되지 않을지요.
답변에 대한 댓글 1개
sinbi
2017-09-22 (금) 17:57:08
에디터에서 글자 크기를 다양하게 선택하다 보니,,,, 하나로 고정하면 안 돼서요.
슈와이 님 방법 안 되면, 달콤별 님 방법도 모색해 보도록 할게요. 답변 감사합니다.
슈와이 님 방법 안 되면, 달콤별 님 방법도 모색해 보도록 할게요. 답변 감사합니다.
답변을 작성하려면 로그인이 필요합니다.
선 채택, 후 적용 후 ....증상 남길게요. ^^