블로그 스킨을 변경하다 보면, 글을 올리는 영역의 크기가 천차만별입니다. 이미지 업로드시, 글쓰기 영역의 폭에 그 크기를 맞춘 경우에, 좁은 스킨을 이용하다가 넓은 걸로 바꾸는 경우는 문제가 되지 않지만, 그 반대의 경우는 그림이 잘리는 문제가 발생하게 되죠.

본 블로그도 여러번 스킨을 바꾸면서 이런 문제가 발생을 하더라구요. 이럴때, 유용하게 활용할 수 있는 팁 하나 올립니다. 

max-width 속성

예전에 max-width에 관한 글을 올린적이 있습니다. 

간단하게 말해서, 개체의 폭의 최대 값을 정해놓고, 개체가 이 값보다 큰 경우 크기를 맞쳐주는 역할을 합니다. 유사한 속성으로는 max-height, min-width, min-height 가 있습니다.

블로그 본문에 보여지는 이미지에 대해 CSS를 이용하여 max-width를 설정해 둡니다. 그리고, height는 자동으로 조절되도록 설정합니다.

티스토리 에디터를 이용해서 이미지를 올린 경우에는 imageblock 이라는 DIV 안에 이미지가 들어가게 됩니다. 그래서 위와 같이 설정해 두면 해당 이미지에 대해, 폭의 최대값은 680px가 되고 높이는 자동으로 설정됩니다. 

범용으로 적용하려면 스킨의 구조를 적절히 활용하여 적용하고 싶은 이미지 클래스를 설정하면 될 듯 합니다. 또, 스타일이 중첩되어서 제대로 적용이 되지 않는다면, 속성값 뒤에 !important를 넣어서 강제로 적용 시키는 방법도 있습니다. 

적용 전에는 화면에서 사진이 잘린걸 볼 수 있지만, 적용 후에는 정상적으로 보여지는 걸 알 수 있습니다.

max-width 속성은 인터넷익스플로러 6 (IE6)에서는 지원되지 않습니다. 현재 크롬과 파이어폭스, 인터넷익스플로러 7, 8 (IE7, IE8)에서는 정상적으로 동작하는 걸로 확인되었습니다. 

크롬을 최신 베타 버젼으로 업데이트 한 후에 잘 되던 네이버가 이상하게 보입니다. 사용하고 있는 크롬 버젼은 2.0.167.0 이고, 캡춰한 화면들은 아래와 같습니다. (참고로, 아래 이미지들은 모두 네이버 화면을 캡춰한 것입니다.)

네이버 사전에 접속했을때, 오른쪽 위에 보이는 통합검색창이 아래 처럼 깨지네요. 이건 네이버 메인을 제외한 뉴스라든가 카페 등 전체 부메뉴에서 동일하게 나타납니다.

사전에서 검색을 하려고 단어를 입력하면, 자동완성 창이 입력폼을 가려버리네요. -_-;; 당연히, 무슨 단어를 입력하고 있는지 보이질 않습니다. 

겨우 원하는 단어를 입력하고 검색을 눌러 상세뜻으로 가보면 아래처럼 내용이 오른쪽으로 밀려버립니다. 당연히 내용을 보려면 스크롤을 해야겠죠.

얼핏 봤을때, 스타일을 표현하는 문제인것 같기는 합니다만, 네이버가 표준을 안지켜서 발생한 문제인지, 크롬(베타)에서 뭔가를 잘못 처리한 건지는 모르겠습니다만, 정식에서는 빨리 수정되어야 할 것 같습니다. 

이 덕에 네이버 접속시에는 다시 IE를 이용하게 되었습니다. -_-;;

요사이는 와이드형 모니터를 많이들 사용합니다. 그래서인지, 왼쪽 정렬된 홈페이지나 블로그를 보면 왠지 반대쪽에 남는 공간이 넘 횡해서 쓸쓸(?)한 느낌이 들죠.

반면 본 블로그를 포함하여 많은 웹페이지에서 내용을 가운데에 잘 맞춰서 보여줍니다. 이를 하기 위한, 알고나면 너무나 아무것도 아니지만, 모르면 답답할 수 있는 아주아주 기본적인 팁 하나 올려봅니다.

먼저 웹페이지의 여백이 어떤식으로 적용되는지 간단한 그림을 하나 보도록 하겠습니다.

위 그림은 W3C에서 가져온 것입니다. 

CSS Style을 작성할때, margin이라는 속성을 주게 되는데, 이는 대상의 바깥쪽 여백의 너비를 나타냅니다. 적용하는 방법은 아래와 같습니다. 참고로 안쪽여백은 padding으로 표현하고 값을 설정하는 형식은 margin과 동일합니다. 

• margin: <all> 
• margin: <top-bottom> <left-right>
• margin: <top> <left-right> <bottom>
• margin: <top> <right> <bottom> <left>

이 외에도 margin-top, margin-bottom, margin-right, margin-left 등을 이용하여 각각의 여백을 따로 따로 지정할 수도 있습니다. 위에서 <all> 을 포함한 각 값은 px, pt, em, % 등을 이용하여 해당되는 쪽의 바깥여백의 너비를 나타내는 표현이 들어가게 되죠. 

이중, margin-left/right 에 실제 숫자값이 아닌 auto라는 값을 주면 왼쪽과 오른쪽의 너비를 동일하게 하겠다는 뜻이 되는데, 이를 이용하면 아주 손쉽게 애초의 목적을 달성할 수 있는 것이죠.

다음은 W3C의 스펙문서에 나온 원문내용입니다. 

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block. 

만약 원래 표현하고자 하는 내용이 <!-- 원래내용 --> 였다면, 기존 내용을 건드리지 않기 위해 wrapper를 하나 두어서 다음과 같이 표현할 수 있겠죠.

<div style="margin:0 auto; padding:0;">
    <!-- 원래 내용 -->
</div>

여기서, margin:0 auto; 는 위아래 여백은 0으로 하고 좌우여백은 동일하게 한다는 뜻이고, padding:0; 은 안쪽여백을 모든 방향에서 0으로 하겠다는 뜻이 됩니다. 

전체 레이아웃 뿐만 아니라 내부에 포함된 각 요소에도 잘 적용이 되는 사항이니, 머릿속에 넣어주면 편안하게 이용할 수 있으리라 생각됩니다. 예를 들어, 흔히, DIV 같은 요소 자체를 중앙정렬 하려고 할때 부모요소에 text-align 같은걸 써봐도 잘 안되는데, 그럴때에 요 기능을 이용하면 해결이 되는 거죠. 아래 예를 참고하세요..

구글 크롬은 일단 빠른 속도로 소문이 나서 적지 않은 분들이 주력 브라우저로 사용하고 있습니다. (물론 우리나라처럼 변태스러운 웹환경에서는 100% 전환은 불가하지만요.. )

이번 포스팅에서는 얼마전 스킨을 수정할때랑 Exif플러그인 제어용 스크립트를 작성하면서 직접 격어본 내용을 바탕으로 크롬에서 제공하는 디버깅기능을 소개할까 합니다.

웹페이지 개발을 해본 분이라면 개체들간의 레이아웃을 맞추기위해, 불필요한 border넣어가면서 크기나 스타일을 가늠해 본 경험이 한두번쯤은 있을겁니다. 뭐, 사실 이건 우리가 프로그램 코딩할때 printf 잔뜩 넣어서 확인하는 것과 유사한 최 하위레벨 디버깅이라 할 수 있습니다. 

크롬에서는 보다 편리한 개발환경을 위해 다양한 디버깅도구를 제공합니다.

맨 먼저 살펴볼 내용은 요소검사입니다. 웹페이지를 크롬에서 확인하는 도중에 오른쪽 버튼을 클릭하면 요소검사라는 항목이 나옵니다. 

이를 클릭하면, 현재 화면에 보여지고 있는 실제 html과 스타일을 보여주는 창이 나타납니다. 중요한 것은, 스크립트에 의해 생성된 모든 소스까지 확인해 볼수 있다는 점이죠. 하지만, 이것까지만 하면 흔히 볼수 있는 소스보기와 별반 다를게 없습니다. 

아래에서 뒤쪽에 보이는 것이 웹페이지이고, 앞에 뜬 창이 요소검사 창입니다. 

파란색으로 선택된 항목을 보면, Exif플러그인 제어하면서 추가된 스크립트가 document.wirte 구문을 이용해서 생성한 문장입니다. 즉, 실제 html로 작성된 문장이 아니란 뜻이죠. 그리고, 요소검사에 나타나는 html은 브라우저에 보여지기 위해서 모든 프로세싱이 끝난 상태를 의미합니다. 

이번엔 파란색으로 된 부분을 선택하니까, 해당 요소가 가지는 스타일 정보가 오른쪽에 나타납니다. 요소의 실제 스타일을 곧바로 확인해 볼수 있게 됩니다. 또, 스타일 부분중 취소선으로 표현된 부분이 있습니다. 그 부분은 스타일이 무시되었다는 걸 의미합니다. 

위는 .article .ariticle_post 의 padding 설정이 .article_post의 설정보다 우선순위가 높아서 해당부분이 무시된 경우입니다. 

이번에는 뒤쪽 웹페이지를 보겠습니다. 요소검사창에서 파란색으로 선택된 요소에 해당되는 부분이 노란색으로 선택되어 있는 모습을 확인 할 수 있습니다. (이를 위해선 마우스 포인터를 보고싶은 요소 위에 올려두면(mouseover) 됨)

한가지 예를 더 보겠습니다.

사이드바 설정을 확인하기 위해 해당 부분위에서 요소검사를 클릭하였더니, 위 그림처럼 요소의 영역이 표시가 되는 군요. 

결국, 요소검사 창과 브라우저가 서로 연동이 되고 있다는 걸 의미합니다. 이를 통해서, 보여지는 부분과 html 소스, 적용된 스타일등의 상호작용을 눈으로 확인할 수 있습니다. 

크롬에서는 이 외에도 아래와 같은 소스보기 기능(Ctrl+U)도 제공합니다.

또, 스크립트 개발을 도와주는 디버거(Alt + `) 도 제공을 해 주는데, 웹페이지에 적용된 스크립트가 실행되면서 발생하는 모는 에러나 예외를 실시간으로 확인이 가능합니다. 

웹페이지 개발까지는 아니더라도, 블로그 스킨이나 스타일 수정같은 약간의 작업만 하려해도 디버깅하는 것이것이 쉽지는 않습니다. 이럴때 이러한 기능을 활용한다면, 보다 쉽게 코딩을 할 수 있으리라 생각됩니다.

바로 어제 티스토리 Exif 정보출력 플러그인 - CSS로 제어하기 라는 글을 올렸는데요. 아무래도 매번 Exif 정보를 보일지 말지 결정하는 건 넘 귀찮은 일인것 같습니다.

고민한 끝에, 카테고리나 태그 단위로 Exif 정보출력 여부를 설정할 수 있으면 좋겠다 라는 결론에 이르렀습니다. 그래서, 잠깐 짬을 내어 열심히 코딩을 했지요. ( 직업병은 어쩔수가 없나봅니다. 일할때는 일하느라 코딩하고, 쉴때는 블로깅 하느라 코딩하고.. 에휴~)

그래서 성공했습니다. 지금부터 그 방법을 공개합니다.

1. 스타일시트에 아래와 같은 내용을 추가합니다.

/* Style by crazybar.net */
/* 기본적으로 Exif정보가 보여지지 않게 할때 */
.ExifInfo { display: none !important; }

.show_exif .ExifInfo { display:block !important; }
.hide_exif .ExifInfo { display:none !important; }
/* end of Style by crazybar.net */

이 부분에 관한 설명은 생략합니다. 이전글을 참고하세요.

2. </head>를 찾아서 그 앞에 아래 내용을 추가합니다.

<!-- Script by crazybar.net -->
<script type="text/javascript" language="javascript">
<!--
var catWords = new Array("카테고리1", "카테고리2", ... );
var tagWords = new Array("태그1", "태그2", ... );

var targetClass = "show_exif";

var postNum = 0;
var changeFlag = false;

function checkName(words, str){
    for(var i = 0; i < words.length; i++) {
        if(str == words[i]) {
            changeFlag = true;
        }
    }
}

function checkByCategory(catStr) {
    var catNames = catStr.match(/[^\/]+/gi);

    for(var i = 0; i < catNames.length; i++) {
        checkName(catWords, catNames[i]);
    }
}

function checkByTag(tagId) {
    var tag = document.getElementById(tagId);

    if(tag){
        var tagObjs = tag.children;

        for(var i = 0; i < tagObjs.length; i++) {
            if(tagObjs[i].nodeName == "A"){
                checkName(tagWords, tagObjs[i].innerHTML);
            }
        }
    }
}

function changeClass(postId){
    if(changeFlag){
        var postObj = document.getElementById(postId);
        postObj.className = postObj.className + ' ' + targetClass;
        changeFlag  = false;
    }
}
-->
</script>
<!-- End of Script by crazybar.net -->

catWords: Exif 정보를 출력할 카테고리 이름을 담음 배열입니다. 이부분을 자유롭게 수정하시면 됩니다. 
tagWords: Exif 정보를 출력할 태그 이름을 담음 배열입니다. 이부분을 자유롭게 수정하시면 됩니다. 
checkName: 추출한 카테고리나 태그가 catWords나 tagWords에 속하는지를 결정합니다.
checkByCategory: 카테고리 이름을 추출합니다.
checkByTag: 태그이름을 추출합니다.
changeClass: 지정한 조건에 맞는 경우, 포스팅 본문이 속한 DIV의 스타일을 조정하여 Exif 정보가 출력되도록합니다.

3. 다음을 찾아서 아래 내용으로 변경합니다. (포스트-클래스-이름은 스킨에 따라 다름)

<div class="포스트-클래스-이름"> [ ##_article_rep_desc_## ]

<!-- by crazybar.net -->
<script type="text/javascript" language="javascript">
var postId = 'post' + (++postNum);
var tagId = 'tag' + postNum;
document.write('<div class="클래스-이름" id="'+ postId +'">');
</script>
<!-- div class="article_post" -->
    

원래 본문을 감싸주는 DIV에는 ID가 없는데, 그것을 붙여주기 위한 부분입니다. ID는 고유해야 하므로, 전역변수를 이용해서 번호를 붙였습니다. 2에서 스타일을 적용시키는데 사용됩니다.

4. 다음을 찾아서 아래 내용으로 변경합니다. (태그-클래스-이름은 스킨에 따라 다름)

<s_tag_label> <div class="태그-클래스-이름">

<s_tag_label>
<!-- by crazybar.net -->
<script type="text/javascript" language="javascript">
document.write('<div class="태그-클래스-이름" id="'+ tagId +'">');
</script>
    <!-- div class="article_tag" -->

티스토리에서 넘어오는 태그정보는 링크까지 붙어있는 형태입니다. 그것으로 부터 태그를 뽑아내기 위해 DIV 객체를 제어해야 하기때문에 3과 비슷한 방법으로 해당 부분에 ID를 달아줍니다. 

5. </s_tag_label>을 찾아서 그 아래에 아래 내용을 추가합니다.

<!-- by crazybar -->
<script type="text/javascript" language="javascript">
checkByCategory('');
checkByTag(tagId);
changeClass(postId);
</script>

최종적으로 2에서 작성된 함수들을 호출하여 조건이 맞는 포스팅에 대해서는 Exif정보출력을 보이도록 설정해 주는 부분입니다.

이제 다 되었습니다. 휴~

본 블로그의 경우 오늘 현재, 카테고리는 갤러리와 사진, 카메라 만 Exif가 보이도록 설정되어 있고, 태그는 여행, 나들이, LX3, D300등을 설정해 두었고. 그외에는 보이지 않도록 되어 있습니다. 

다만 개별 포스팅별로 스타일을 직접 제어하는 경우는 예외가 됩니다. 

딱 이렇게 해 놓고 나니 이제 좀 마음이 편하네요.
사실, Exif 정보가 항상 보인다고 해서 문제될건 없습니다만, 불필요한 정보가 내용을 가리는 일이 발생할 수도 있기때문에, 선택적으로 보여주길 바랬던 것입니다.

어쨌던, 필요하다고 느끼셨던 분들에게 도움이 되셨길 기대합니다.

(추가내용)

현재 IE7과 크롬에서는 잘 되는 것을 확인했습니다. 

홈페이지를 만들다 보면 한글과 영어를 적당히 구분해서 스타일을 적용하고 싶을때가 있다. 뭐, 사실 현재 웹에서 기본 폰트인 굴림체나 돋움체의 영어 글씨가 별로 이뿌지 않기 때문일 것이다.

아이디어:
화면에 표시할 내용을 <<<content>>> , 한글과 영어에 해당되는 스타일의 클래스를 각각 "kor"과 "eng"라 하자.
기본적으로 <<<content>>>에 kor 스타일을 적용하고, <<<content>>>중에서 숫자와 영어 대소문자등을 찾아서 그 부분만 eng 스타일을 적용하게 된다.
이때, 정규식(Regular Expression)을 이용해서 숫자와 영어 대소문자를 구분한다.

JavaScript에서...

<!-- 정규식 정의 부분 -->
<script type="text/javascript" language="javascript">
    function applyEngStyle(str) {
        re   = /([0-9a-zA-Z]+)/g;
        repl = "<span class=\"eng\">$1</span>"
        return str.replace(re, repl);
    }
</script>

<!-- 사용 예 -->
<span class="kor">
    <script type="text/javascript" language="javascript">
        document.write(applyEngStyle("<<<content>>>"));
    </script>
</span>

PHP에서...

<!-- 정규식 정의 부분 -->
<?
    function applyEngStyle($str) {
        $re   = "([0-9a-zA-Z]+)";
        $repl = "<span class=\"eng\">\\1</span>";
        return mb_ereg_replace($re, $repl, $str);
    }
?>

<!-- 사용 예 -->
<span class="kor">
    <? echo applyEngStyle("<<< content >>>"); ?>
</span>

위 방법 중 JavaScript를 이용한 방법이 본 블로그에 적용되어 있다.

<h1>
    <script>
        document.write(applyEngStyle("crazybar.net에 오신걸 환영합니다."));
    </script>
</h1>

위문장을 수행한 결과가 다음과 같다. ( 참고로 h1에는 돋움체, h1 span.eng에는 Trebuchet MS가 설정되어 있음 )