Life in Colours | 그 남자의 하루

hyomini's Blog is powered by Tistory / Original Designed by Qwer999

저는 한글이 글자 단위로 깨지는 걸 굉장히 싫어합니다. 영어는 자동적으로 단어 단위로 잘리는 데 비해, 한글은 기본적으로 글자 단위로 잘리게 되어 있습니다. 적어도 IE 에서는요 (다른 브라우저에서는 확인해보지 못했네요.) 모든 (대부분의) 브라우저에서 한글은 글자 단위로 잘리는 것 같습니다.

예를 들면, 글자 단위로 잘리는 경우엔 이렇게 됩니다.

아버지가 방에 들어
가신다.

공백 단위 (단어 단위)로 자른다면, 아래와 같이 됩니다.

아버지가 방에
들어가신다.

그냥 개인적인 느낌인지도 모르겠네요. 이상하게 단어가 잘리는 건 보기가 싫어서 말입니다. 문장의 끝트머리에 하나씩 걸려 있는 글자를 볼 때 마다 짜증이 마구 치밀어 오릅니다. 글 읽기에도 불편하고 말이에요.

예전에 홈페이지 운영을 하면서 CSS 파일을 다듬을 때 쓴 적이 있었습니다만, 기억이 안나서 한참동안 헤매다 겨우 찾아내었네요.

알림 - December, 01 2006. 14:39PM
아래에 소개해드린 방법은 Internet Explorer 에서만 적용되는 CSS Style 을 사용하는 방법입니다. 이 점 유의하시길 바랍니다.


MSDN 에 의하면, 한글 (중국어, 일본어 포함)의 경우 아래와 같이 하면 공백 단위 (단어 단위)로 문장을 자를 수 있습니다.

word-break: keep-all;

물론 여기에

word-wrap: break-word;

를 살짝 추가해 주면, 문장이 너무 길어서 테이블이 깨지는 경우를 막을 수 있습니다.

여담입니다만, 티스토리 스킨은 전부 글자 단위로 자르게 되어 있더군요. 물론 왠만해선 word-break 가 아예 없는 경우가 많습니다만, 글자 단위로 잘리는 게 보기 싫은 건 저 뿐이었던가요. :(

s_tudies/web 2006/11/30 22:34 by hyomini
  1. BlogIcon 정찬명 2006/11/30 23:25 # M/D Reply

    알고 계셨는지 모르겠지만 word-break, word-wrap 모두 IE 전용 속성입니다. 표준이 아니기 때문에 다른 브라우저에서는 모두 지원하지 않고 있습니다. 그렇다고 저 코드가 다른 브라우저에서 오류를 유발하지는 않습니다. 다른분들께서도 알고 사용하시라는 의미에서 적었습니다.

    1. BlogIcon hyomini 2006/12/01 14:36 # M/D

      지적 감사합니다. 안그래도 파이어폭스에서는 글자 단위로 자르는 걸 방금 확인하고 왔어요. 익스플로러 외의 다른 브라우저에서도 따로 어떻게 단어 단위로 자르게 만들 수 없을까요? 개인적인 취향이라는 건 알지만, 하나의 단어가 위 아래로 잘려 버리니 참 보기가 안 좋네요.

  2. BlogIcon 정찬명 2006/12/02 02:27 # M/D Reply

    단어 단위로 자르는 방법에 대하여는 저도 잘 모르겠습니다. 하지만 단어 단위로 잘리는 경우에 발생하는 단점도 있겠지요. 예를들어 아주 긴 단어(예를 들면 한 100글자 정도?)를 한 번도 띄어쓰기 없이 쓴다고 치고 문단의 폭은 50글자 정도밖에 안된다고 가정하면 이때에는 이것을 어떻게 처리해야 할지 난감해 질것 같습니다. 또 폭이 좁은 공간(예를 들면 한 200px 정도)에서 단어 중간에 줄바꿈을 금지하게 되면 어떤 행은 폭이 길고 어떤행은 짧아져서 오른쪽 끝부분의 정렬이 매우 지저분 해지게 될 것 같습니다. 물론 100글자 씩이나 되는 글자는 없겠지만 설사 10글자만 되더라도 같은 문제가 발생합니다. 이와 비슷한 문제로 text-align:justify 를 사용하게 되면 문단 좌우 끝이 가지런히 정렬 되지만 자간을 강제로 조정하게 되기 때문에 단어와 단어 사이의 간격(자간)이 고르지 못하게 되는 문제가 발생 합니다. 문단의 우측 끝에서 단어를 잘리지 않도록 하는 것은 좋지만 그렇게 했을 때 다른 무엇인가는 포기해야 하는 상황이 되기 때문에 아마도 그런 기능이 없는 것은 아닐까 생각됩니다. 대부분의 경우 문단의 폭이 넓은 상황보다 좁은 상황일 때 제가 말씀드린 문제가 생긴다는 점은 잘 알고 계실것 같습니다. ^^

    1. BlogIcon hyomini 2006/12/02 17:19 # M/D

      답변 감사합니다.
      좀 더 유연성있게 작동하는 스타일은 없을까 궁금하네요. 진짜 공간이 부족해서 글자 단위로 자르지 않는 이상은 기본적으로 단어 단위로 자르게 말이에요. 말하고 나니 항상 바라기만 하는 게 되어 버렸군요. :D

  3. BlogIcon 박하군 2006/12/02 22:48 # M/D Reply

    css의 필요성을 절실히 느끼는데... 어떻게 시작해야될지 모르겠.. -0-;;;; 휴~~

    1. BlogIcon hyomini 2006/12/03 13:35 # M/D

      흐흐, 웹디자인 쪽은 제 전공이 아니라 어떻게 도와드리지도 못하겠네요. 뭐든 다 잘하면 좋은 세상, 뒤처지기는 싫고... 으흑

Leave a Comment


아 결국 페이지 구성을 대폭적으로 바꾸게 되었습니다. 어떻게 되겠지 하는 마음에 엉성하게 짜둔 HTML 코드였던지라, 손을 대면 손을 댈수록 점점 제가 원하던 것과는 거리가 멀어지더군요. -_-; 더군다나 브라우저에 따라 다른 렌더링 방식은 그냥 엄청난 압박이더군요.

그리하여 나온 결과물! table, td, tr 이 난무하는 대신 div 태그가 군데 군데 좀 많이(!) 보입니다만, 그래도 단순히 테이블 태그만을 썼을 때보단 훨씬 간결하게 보이는 듯 하네요. (직접 테이블 태그만 써서 짜보지는 않았으니 확신은 못합니다만)

CSS 코드도 간결하게 하려 노력해봤습니다. 군데 군데 너저분하게 널려 있던 font-family 태그를 한군데에 묶어주고, 폰트 크기를 절대적으로 지정해주던 부분도 왠만하면 상대적으로 지정되게 바꿨습니다. 그렇다고 아예 지정하지 않을 수는 없어서 body 부분에 살짝쿵 넣어뒀어요. :)

한가지 완벽하게 해결하지 못한 부분은, 메인페이지 부분의 위와 아래에 빈공간이 생기는 부분입니다. 한 1픽셀씩 공간이 비던데, 도대체 이유를 모르겠더군요. 익스플로러 6에서는 원하는대로 보이는 듯 싶은데, 파이어폭스에서는 계속 공간이 생기더라구요. 그래서 결국 임시조치로 위, 아래를 padding 으로 메꾸어 버렸습니다. 이렇게 하고 보니, 마치 부실공사한 뒤에 시멘트나 콘크리트로 겉에만 조금씩 떼우는 느낌이 들더군요. ㅜ_ㅜ 이유를 알기 전까진, 사이트가 익스플로러 6와 파이어폭스에서 조금씩 다르게 보이는 건 어쩔 도리가 없네요. 별로 큰 차이가 아니어서 그냥 넘어가려 합니다. 우선은 말이죠.

CSS 가 써먹기 힘들긴 하지만, 막상 쓰기 시작하니 참 편리한 점이 많더군요. 많은 분들이 CSS로 사이트 디자인을 하시려는 이유를 이제서야 조금은 알듯 싶습니다.

제가 생각하는 CSS 태그의 편한 점 몇가지:

  1. CSS 는 마치 모듈/함수 모음과 같은 것 같습니다. HTML 코드안에서 일일히 매번 똑같은 내용을 지정하는 것 보다, CSS 코드 안에 한번 정해주면, 계속 써먹을 수 있으니까요. 예를 들면, img { border: 0px; } 같은 것은 꽤 쓸만하더군요. 더군다나 한번 만들어 놓으면 어느 곳에서든 불러 써먹을 수 있으니 일석이조입니다. 일일히 HTML 코드 내부에 세세한 설정을 해두기란... 참 후우... (먼산)
  2. CSS 는 뭐랄까 훨씬 유동적이며 세부적입니다. position 태그의 유용함이라든가, background-image: url(images/topmenu_background.jpg); background-repeat: repeat-x; 등의 뒷배경의 다양한 반복 가능성등, HTML 파일 내부에서도 자체적으로 가능할지도 모르겠습니다만, CSS 가 편하다는 건 두말할 나위가 없는 듯 싶네요.

제가 전문적이지 못해서 웹디자인/언어 쪽은 여전히 초보적인 단계입니다. 부족해 보이는 글이였더라도 너그럽게 이해해주셨으면~ 합니다. :D

s_tudies/web 2006/11/16 17:02 by hyomini
  1. sola 2006/11/16 19:50 # M/D Reply

    하다보면 IE 때문에 속 터지는 경험을 많이 할 것입니다.
    뭔, 버그가 그리도 많은지...
    IE7이 그나마 조금이라도 달라져서 다행이죠.

    1. BlogIcon hyomini 2006/11/16 20:25 # M/D

      아...
      크로스 브라우징이 이렇게 힘든 것임을 새삼스럽게 다시 깨닫게 되네요ㅜ_ㅜ

      IE7을 설치하자니 엄청난 귀차니즘의 압박으로 보류중에 있습니다. -_-ㅋ

Leave a Comment

요즘 들어 바쁘군요. 회사일하랴, 뒤처지지 않기 위해 여기저기 웹서핑하면서 정보 얻으랴, 거기다가 최근에는 대학 공과 친목도모용 웹사이트를 만들기 위해 분주하게 움직이고 있답니다. 실은 웹사이트는 예전부터 계획하고 실행까지 옮겼습니다만 번번히 실패했어요. 부실한 내용과 관리부족 에다 주위 호응까지 떨어져서 그만 포기했었습니다.

웹사이트 말이 나왔으니, 최근 몇일간 제가 배우게 된 몇가지를 짚고 넘어가죠. 싫으셔도 피하실 수 없어요, 이미 늦었단 말입니다. 음하하핫 -_-;

솔직히 제가 직업이 웹디자이너도 아니고 딱히 크게 관심을 가지고 있는 것도 아니어서 지금 뭐가 어떻게 돌아가는 지 모르겠네요. 거기다가 웹표준이 지속적으로 바뀌어가고 개선되어 가고 있는 요즘, 브라우저 종류까지 늘어나서, 이것 저것 신경 써야 할 부분이 한두개가 아니군요. 웹표준이야 최대한 어떻게든 지키면 되겠지 싶지만, 브라우저마다 렌더링 방식이 다른 것은 참... oTL

글 제목처럼 과감하게 테이블 태그를 벗어던지고 CSS 로 모든 구성을 해보려 했습니다. 다만 문제는 애시당초 사이트 템플레이트를 제가 만든게 아니라, NZEO 사이트 자료실에서 얻어온 것이기에 짧기도 짧은 제 지식으로는 도저히 테이블 태그 없이 모든 것을 다 담을 수가 없네요. 결국 내린 결론은 양 옆을 살짝 잘라 내어 버리는 것! 그로 인해 얻은 결과물은 양옆의 그림자가 없는 페이지입니다만, 나름대로 만족중입니다. :D

더 큰 문제는 익스플로러 6와 파이어폭스의 CSS 렌더링 방식 차이에 있었습니다. 7은 테스트를 안해봤으니 패스.

div#mainpage {
  margin-left: auto;
  margin-right: auto;
}
제가 알기로는, 위 태그로 분명히 div tag 안에 포함된 내용이 가운데로 정렬되어야 하는 데, 아무리 해도 익스플로러 6에서는 안되더군요. 결국 머리를 쥐어 뜯고 한참 검색을 한 후에야,

body {
  text-align: center;
}
위의 방법으로 아예 body 를 가운데로 정렬하게 만들고, 필요한 부분마다 새로 정렬해 주는 방식을 선택하고야 말았습니다. 더 깔끔한 방법도 있겠지만, 임시로, 더군다나 제가 디자인한 템플레이트도 아니다 보니, 그냥 저렇게 처리하는 게 제일 속편하더군요.

어느 정도 완성된 현재 웹사이트, http://hyomini.new21.net/temp/topmenu_home.html 는 파이어폭스로 테스트해보지 못했기에 아직 마음이 편하지는 않습니다. 그래도 표준을 지켰고, 익스플로러 6에서도 제대로 보인다면, 파이어폭스에서도 잘 보일 것만 같군요. :)

이번 일을 계기로 하나 배운겁니다만, CSS 로 테이블 태그 하나 없이 사이트 만들어 보는 것도 나름대로 재미있더군요. 애초에 사이트 디자인을 테이블 없이 할 것을 각오하고 만든다면 더 수월할지도 모르겠습니다. 아니면 단순히 제가 부족해서 그런지도 모르겠어요. :P
s_tudies/web 2006/11/15 21:43 by hyomini
  1. peace 2006/11/16 10:47 # M/D Reply

    하하..... 녀석 알지 못하는 말들만 골라써놓은거 같군... 노력하는 모습이 보기 좋네...... 수고
    (용랑전이라... 만화책이라면 뭐 집에 넘쳐나니... 그밖에두.... 이것저것....... ㅋㅋ)

    1. BlogIcon hyomini 2006/11/16 12:15 # M/D

      음, 이것 저것 안해두면 나중에 대학 돌아가서 꽤 고생할 거 같아서, 회사에서 노니 (응?) 뻘짓하고 있지 음하하하하 -_-;

Leave a Comment
1 
분류 전체보기 (466)
l_ife (166)
o_pen thought (105)
v_ibe (92)
e_ntertainment (82)
s_tudies (18)