추-
혹시나 해서 메모해둡니다. 아래 Websites as graphs 는 본인의 사이트/프로젝트가 아닙니다. (꾸벅)

웹사이트 그래프로 그려보기 - Websites as graphs

왠지 그래프를 보는 순간, 고생하며 들어야 했던 알고리듬 전공과목이 생각납니다. (후우)

각설하고, JK님의 포스팅을 보고 제가 또 안해볼 수가 없어서 제 블로그도 넣어보고 아직은 (언제나?) 공사중인 나름대로 프로젝트중 하나인 사이트도 넣어봤습니다.


사용자 삽입 이미지

본 블로그를 그래프로 그려봤습니다. 하긴 그래봤자 이미 주어진 스킨을 바탕으로 나타내어지는 그래프이기에 별로 큰 감흥이 있거나 하진 않군요.


사용자 삽입 이미지

심플하게 나온 위 그래프는 아직 공사중인 저희 대학 공과 친목도모 (혼자만 알고있는?!?) 사이트입니다. 뭔가 좀 더 크게 활성화 시켜야 그래프도 커질 것 같은 데, 많이 허전하네요. :(

직접 해보실 분은, Websites as graphs 로 가셔서 해당 사이트의 URL을 입력하시면 됩니다. 그래프가 펼쳐지면서 (렌더링되면서) 조금 버벅거리네요. 소스코드도 제공되어 있으니, 최적화 하실 분 계신다면, 덜 버벅거리게 만들 수 있을지도 모르겠습니다. :)

그래프 그리는 건 나중에 연휴 끝나고, 회사 출근하면 해볼려고 잠시 보류중이고, 사이트 내에 여기 저기 돌아다니다 보니 꽤나 흥미로운 것을 볼 수 있었습니다.

One thousand paintings 라는 위 Websites as graphs 운영자의 또다른 사이트에는 캔바스에 그려진 숫자를 직접 판매하는 군요. 누가 과연 살까 싶은 데, 꽤나 많은 숫자가 팔렸어요. 유니크한 맛에 사는 것일까, 그냥 따로 캔바스에 숫자 그리면 되지 않나 싶은 생각이 들기도 합니다만, 소위 말하는 돈x랄 일까요. -_-;

한편으로는 The Black Clues 에서는 새까만 정육면체를 팔고 있네요. 안에 무언가 들어있다는 주인장의 말을 들어보면, 안열어보고는 못배길것 같은 데, 여는 순간 안에 들어 있는 무언가의 의미가 사라진다고 합니다. 과연 열지 않고, 안에 들어 있는 물건을 손에 넣을 수 있을까요? 직접 안으로 들어가는 수 밖에 없을 것 같은 데... 유체이탈이라도 해야 하는 걸까나요. -_-; 아아 왠지 실사판 김전일을 보는 것 같은 느낌이 듭니다. (먼산)
Posted by hyomini 트랙백 0 : 댓글 1

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

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

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

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

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

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

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

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


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

word-break: keep-all;

물론 여기에

word-wrap: break-word;

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

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

Posted by hyomini 트랙백 0 : 댓글 6


아 결국 페이지 구성을 대폭적으로 바꾸게 되었습니다. 어떻게 되겠지 하는 마음에 엉성하게 짜둔 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

Posted by hyomini 트랙백 0 : 댓글 3

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

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

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