1 일모리이 작성한 주제

  • 지역 날아오르기 준비단계
  • 가입일자 2006-04-29
  • 글: 77

주제: body id 의 제안을 해보겠습니다.

밑에 graphittie 님께서 내어주신 의견입니다.

body에 카테고리 속성에 따라 id를 주는 것이 좋지 않을까 합니다. 메인 메뉴가 탭 속성으로 설정되도록 하는데 id를 이용하면 좋더군요. 대부분의 사이트에서도 사용하는 방식입니다. 이 메인 메뉴라는 것이 이용자의 입맛에 따라 변할 수 있는 것이니 직접 소스코드 넣는 것보다 플러그인 형태로 넣어 보다 쉽게 변경할 수 있도록 하는 편이 좋을 것 같습니다.

아이디어를 더 펼쳐보자면, 일단 body id 를 적용함으로써 메뉴뿐만이 아닌 조금은 간단한 테터 스킨의 변화에 다양성을 주자는 것입니다.

아쉽게도 테터가 워드프레스 만큼의 각각의 페이지 제어가 되지 않습니다.  아시다시피 single.php 나 page 개념, 여러가지 등으로 거의 모든 페이지를 다르게 구성이 가능하지요.  거기서 출발해서 정말 다양하고 멋진 사이트 구축이 됩니다.  부러운 툴입니다만, 테터에서도 왠만큼은 가능할수 있다고 생각이됩니다.  예를들어 메인 페이지에는 1의 형태로 보여주고 카테고리 #2 를 보여줄때에는 완전 다른 디자인을 보여주고 말이죠.  한개의 skin.html 으로도 모든걸 가능케 할수 있습니다. 

오예!!

body id 의 지정으로 그 모든것이 가능하느냐. 넵.  graphittie 님의 말씀대로 적어도 각각의 카테고리별로 body id 가 정해질수 있다면 그 표현은 정말 무궁무진합니다.  그것 하나만으로도 워드프레스의 page 라는 개념을 따라할수 있을정도 까지 갈수 있다고 생각이 됩니다.

다음 업데이트때에는 이러한 body id 의 지정이 꼭 첨가되면 좋겠네요.  아마도 많은 변화가 일어날수 있다고 생각이 됩니다.  혹시나 구현 설명을 원하시면 다음을 읽어주세요.



body id 의 사용은 이렇습니다. 메인 인덱스 페이지에는 id 이름을 TT 로 주고, 카테고리1에는 id 를 TT-1, 카테고리 2 에는 TT-2 를 준다고 가정할때에
3개의 모든 페이지가 같은 HTML 을 가지고 있다고 칩시다.  TT 가 많이 그러한 경우죠.  skin.html 만 있으니.

<body id="TT">
<h1>비행기</h1>
<div id="graphic">비행기는 높아 높으면 백두산...</div>

이러한 HTML 을 3페이지가 똑같이 가지고 있을때에 BODY ID 만 바뀜으로 모든것을 제어가 가능합니다.  선택자 앞에 BODY ID 를 적어주면 되거든요. 

자 css 에서 메인 페이지를 컨트롤하려면  #TT #graphic {font-size: 100px;} 를 주어 폰트를 100PX 로 보여줍니다. div 선택자 앞에 body id 인 #TT 가 붙어있죠.

그리고 카테고리1을 보여줄시에는 폰트색깔이 RED 로 보여준다면

#TT-1 #graphic {color:red;}

으로, 그리고 카테고리 2를 보여줄때엔 h1 비행기를 보여주지 말자, 라면

#TT-2 #graphic h1 {display:none;}

으로 해주면 됩니다.  같은 html 인데도 css 로 모든 변화를 주었죠.

그렇다면 프로필 페이지를 TT 에서 구현한다 라고 생각하면, profile 이라는 포스팅을 만든후에, public 으로는 하되 sync 는 하지 않아서 공개하면서 그 페이지만 완전한 변화를 줄수 있을테니 워드프레스와 같은 page 가 생성이 되는것이죠. 


길게 설명을 했습니다만 body id 의 설정이 가능하다면 스킨의 다이나믹한 요소에 큰 도움이 될꺼 같습니다.  의견 부탁드립니다  smile

<!--[if IE]>
<p>잘못 실행하신 브라우저 이거나 국번이 없는 브라우저 이오니, 다시한번 확인하시고 사용하시기 바랍니다.
유해브 컬드 롱 브라우저 오어 노 브라우저.  플리즈 트라이 어게인 땡큐</p>
<! [endif] -->

일모리의 웹사이트

2 inureyes이 작성한 답글

  • 지역 대한민국 > 포항
  • 가입일자 2006-04-03
  • 글: 4,471

답글: body id 의 제안을 해보겠습니다.

재미있는 아이디어네요. smile

별반 어려운 것도 아니라 바로 기능 추가 하였습니다. (sandbox rev.65, 66)
카테고리를 선택한 경우 그 페이지의 body id는 카테고리 이름이 됩니다.

새로운 치환자로 [##_body_id_##]를 추가하였습니다. <body id="[##_body_id_##]"> 로 사용하시면 됩니다.
카테고리가 없는 경우에는 기본값으로 'page'라는 id를 갖도록 일단 만들어 놓았습니다.



(잘려고 누울려다가 이거 보는 바람에 잠도 못자고 새벽 다섯시가 되어버렸어요 ㅠ_ㅠ)

"Everything looks different on the other side."

-Ian Malcomm, from Michael Crichton's 'The Jurassic Park'

inureyes의 웹사이트

3 일모리이 작성한 답글

  • 지역 날아오르기 준비단계
  • 가입일자 2006-04-29
  • 글: 77

답글: body id 의 제안을 해보겠습니다.

오오 !!  드디어 놀라운 세계

그 부분에 관한 포스팅이나 함 올려봐야겠군요.  5시,, 그렇네요..저야 미국이니 괜찮지만,,   수고하셨습니다.

<!--[if IE]>
<p>잘못 실행하신 브라우저 이거나 국번이 없는 브라우저 이오니, 다시한번 확인하시고 사용하시기 바랍니다.
유해브 컬드 롱 브라우저 오어 노 브라우저.  플리즈 트라이 어게인 땡큐</p>
<! [endif] -->

일모리의 웹사이트

4 PAPACHA이 작성한 답글

  • PAPACHA
  • 정원의 마술사
  • 오프라인
  • 가입일자 2006-04-13
  • 글: 127

답글: body id 의 제안을 해보겠습니다.

카테고리별이나 페이지 및 글 특성별로 여러 스킨을 제공하는 것에 대해서는 생각하고 연구(?)하고 있습니다. 이는 태터툴즈 1.0 공개 이전부터 생각해오던 사항이며 제공될 것입니다.

body id 처리를 추가하는 것에 대해 매우 긍정적으로 생각합니다.
inureyes님의 sandbox 구현을 보면 $list['title']을 사용하셨는데요, 위에서 말씀하신 사항을 보자면 $suri['directive']로 하는 것이 좋지 않을까하고 생각하고 있습니다.
그리고 제가 CSS에 능숙하지 않아서 그러는데요, 일반적으로 element id attribute를 사용하는데 white-space나 특수문자, 한글이 사용 가능한지 확인해 주십시오.
의견 주십시오.

5 일모리이 작성한 답글

  • 지역 날아오르기 준비단계
  • 가입일자 2006-04-29
  • 글: 77

답글: body id 의 제안을 해보겠습니다.

빈공간은 허용치 않구요 한글은 ie 에서는 먹히지 않네요.

<!--[if IE]>
<p>잘못 실행하신 브라우저 이거나 국번이 없는 브라우저 이오니, 다시한번 확인하시고 사용하시기 바랍니다.
유해브 컬드 롱 브라우저 오어 노 브라우저.  플리즈 트라이 어게인 땡큐</p>
<! [endif] -->

일모리의 웹사이트

6 inureyes이 작성한 답글

  • 지역 대한민국 > 포항
  • 가입일자 2006-04-03
  • 글: 4,471

답글: body id 의 제안을 해보겠습니다.

일모리 작성:

빈공간은 허용치 않구요 한글은 ie 에서는 먹히지 않네요.

흐음 그렇군요. FF만 사용해서 IE에서 한글이 되는지를 테스트를 못해봤습니다.

PAPACHA님께서 언급하신 white-space는 생각을 못해봤네요. 당연히 안 되는건데 왜 그냥 넘어갔을까...

"Everything looks different on the other side."

-Ian Malcomm, from Michael Crichton's 'The Jurassic Park'

inureyes의 웹사이트

7 inureyes이 작성한 답글

  • 지역 대한민국 > 포항
  • 가입일자 2006-04-03
  • 글: 4,471

답글: body id 의 제안을 해보겠습니다.

PAPACHA 작성:

inureyes님의 sandbox 구현을 보면 $list['title']을 사용하셨는데요, 위에서 말씀하신 사항을 보자면 $suri['directive']로 하는 것이 좋지 않을까하고 생각하고 있습니다.

suri['directive']에 저장된 값은 카테고리면 /category, 글이면 /entry 이런 값으로 알고 있습니다. 이렇게 하면 카테고리 출력시와 글 출력시, 공지사항 출력시에 서로 다른 상태를 지정할 수 있겠네요 :) 그런데 각기 다른 카테고리별로는 id를 지정하기 힘들지 않을까요?

그리고 카테고리 이름으로 지정하는 방법은 일모리님 말씀따라 호환성때문에 힘들겠네요... 차라리 카테고리가 DB안에서 갖는 번호로 category_#_# 식으로 만들어야 할까 하는 생각도 드네요. (이 경우 사용자들이 번호 알아오는 것이 힘들겠군요...)


일단 목록 출력시에는 선택한 카테고리의 이름으로 (이건 반드시 여기서 의견을 모아 수정해야 할 것이고요), 글 출력시나 공지사항 출력시는 entry, notice등의 id가 출력되도록 해 보겠습니다. id가 겹치는 것 없는지 봐야겠네요.

덧) suri['value'] 를 사용하면 되는군요 :)

"Everything looks different on the other side."

-Ian Malcomm, from Michael Crichton's 'The Jurassic Park'

inureyes의 웹사이트

8 일모리이 작성한 답글

  • 지역 날아오르기 준비단계
  • 가입일자 2006-04-29
  • 글: 77

답글: body id 의 제안을 해보겠습니다.

의견을 덧붙이자면  말씀하신데로 category_#_# 식이나 혹은 더 짧게 줄여  ctg#-#  이런식도 괜찮을듯합니다. 

이유인즉, 일단 페이지 안에서 한번밖에 쓰이지 않는 id 라는 특성때문에 혹 이 부분을 모르는 유저가 같은 이름을 지정한다면  에러가 나는 낭패가 나오게 됩니다.  예를들어  원래 skin.html 안에  id="profile" 을 만들었는데  body 에서도 id로 profile 을 부르게 되면 에러가 나기때문에,,

약간은 복잡해도 괜찮을듯 싶습니다.  뭐 스킨 제작하시는 분들이라면 그정도는 감안하고 이해하실듯 합니다만,,  어느정도 통일성만 있다면 말이죠

<!--[if IE]>
<p>잘못 실행하신 브라우저 이거나 국번이 없는 브라우저 이오니, 다시한번 확인하시고 사용하시기 바랍니다.
유해브 컬드 롱 브라우저 오어 노 브라우저.  플리즈 트라이 어게인 땡큐</p>
<! [endif] -->

일모리의 웹사이트

9 PAPACHA이 작성한 답글

  • PAPACHA
  • 정원의 마술사
  • 오프라인
  • 가입일자 2006-04-13
  • 글: 127

답글: body id 의 제안을 해보겠습니다.

이 부분은 아직 결정해야 할 사항이 있는 것 같아 1.0.6에서 지원하는 것으로 하겠습니다.
이 thread에서 구현 사항이 결정되면 티켓팅하여 처리하겠습니다.
계속 논의해 주십시오.

10 hyeonseok이 작성한 답글

  • hyeonseok
  • 살짝식물애호가
  • 오프라인
  • 지역 대한민국 서울
  • 가입일자 2006-05-01
  • 글: 12

답글: body id 의 제안을 해보겠습니다.

PAPACHA 작성:

그리고 제가 CSS에 능숙하지 않아서 그러는데요, 일반적으로 element id attribute를 사용하는데 white-space나 특수문자, 한글이 사용 가능한지 확인해 주십시오.
의견 주십시오.

추가로, id는 숫자로 시작할 수 없습니다. 보통은 영어단어와 dash(-)를 조합해서 사용하고 정말 필요할 경우에 숫자를 사용합니다.

inureyes 작성:

그리고 카테고리 이름으로 지정하는 방법은 일모리님 말씀따라 호환성때문에 힘들겠네요... 차라리 카테고리가 DB안에서 갖는 번호로 category_#_# 식으로 만들어야 할까 하는 생각도 드네요. (이 경우 사용자들이 번호 알아오는 것이 힘들겠군요...)

category_#_#과 같은 것은 CSS 선택자나 DOM에서 접근할 때 사용할 수 있지만 <ul>, <li>같은데 붙는 것도 아니고 <body>에 붙는 것인데, 문서의 특징을 알아 볼 수 있는 의미 있는 단어가 좋습니다. "몇 번째 카테고리"라는 의미로 id를 지정하는 것은 CSS와의 연결을 생각해 봐도 별로 의미가 없을 것 같습니다.

그리고 이왕 지원하려고 하는 것이면 id와 함께 class도 고려해 보는 것이 좋을 것 같습니다.

<body>에 id나 class를 넣겠다는 것은 하나의 스킨안에서 여러개의 테마(컬러나 레이아웃 등)를 사용하겠다는 뜻이 강합니다. 의도에 맞게 좀더 고민할 필요가 있을 듯 합니다. 카테고리별로 id를 부여한다든가 하나로 묶어야 할 페이지들에 각기 다른 id를 부여한다든가 하게 되면 본래의 의미를 살리지 못하게 될 것입니다. entry와 notice라는 id를 갖는 페이지 둘의 테마를 구분하고 싶지 않은 사용자가 있을 경우, 그리고 이에 class를 지정한다든가 하는 기능이 없을 경우, 각기 다른 id때문에 CSS코드가 아주 끔찍하게 되어버릴 가능성이 높습니다.

#entry #content, 
#notice #content {
    background: ....;
    color: ....;
    margin: ....;
}
#entry #content h1, 
#notice #content h1 {
    background: ....;
    color: ....;
    margin: ....;
}
#entry #content h2, 
#notice #content h2 {
    background: ....;
    color: ....;
    margin: ....;
}
#entry #content h3, 
#notice #content h3 {
    background: ....;
    color: ....;
    margin: ....;
}

여기에 카테고리까지 들어가면 더 심각해 질 것입니다.

페이지별로 구분이 중요한 것이 아니라 얼마나 스킨파일에서 id들을 컨트롤 하고 그루핑 할 수 있느냐가 관건이 되겠습니다.

written by hyeonseok.com

hyeonseok의 웹사이트

11 graphittie이 작성한 답글

  • 지역 Wonderland
  • 가입일자 2006-04-20
  • 글: 1,799

답글: body id 의 제안을 해보겠습니다.

드디어 반응이... T.T... 아무도 반응이 없어서 스스로 포기한 제안이었는데...

hyeonseok님께서 말씀하신 CSS 코드의 난잡화는 저도 겪어본 일입니다만... 사실 페이지 전체에 해당하는 CSS 셀렉터에 카테고리 id가 추가되도록 사용하는 유저는 극히 드물지 않을까 합니다. 보통 id에 따른 메뉴탭 반전이나 백그라운드 변경 정도 되는, 스킨의 일부분에 변화를 주는 정도로 사용하지 않을까 하는데요... (그런데 저런 id 용례는 잘못된 것이 아닌지...)

저는 이 부분을 플러그인화 해서 사용했습니다(지금은 사용중인 스킨에서 필요가 없기 때문에 미사용으로 돌려놓았습니다). 어떤 식이냐 하면...

전체
    media
        animation
        movie
    information
        astronomy
        physics
        philosopy

이런 카테고리가 있다고 할 경우, 하위 노드가 있는 카테고리의 경우는 id는 물론 class까지 body에 추가하도록 했습니다.

<body id="media" class="media">
<body id="aniamtion" class="media">
<body id="movie" class="media">

이런 식이지요. 공교롭게도 제 카테고리는 전부 영문이기 때문에 바로 CSS 선택자로 쓸 수 있지만, 한글 카테고리명을 사용하시는 유저의 경우는 관리메뉴>분류관리에서 카테고리 생성시 자신이 수동으로 해당 카테고리의 CSS 셀렉터 명칭을 정하도록 할 수 있지 않을까 합니다...

전체(all-category)
    미디어(media)
        애니메이션(animation)
        영화(movie)
    정보(information)
        천문학(astronomy)
        물리학(physics)
        철학(philosopy)

괄호 안의 명칭이 사용자가 지정해준 CSS 셀렉터 명칭이 되겠습니다.
여기에 location, tag, guestbook는 id를 지정해 주고, 카테고리는 전부 multi class로 'all-category'을 지정해 주었습니다.

<body id="media" class="media all-category">
<body id="guestbook">

graphittie (2006-05-03 08:27:59)에 의해 마지막으로 수정

graphittie의 웹사이트

12 inureyes이 작성한 답글

  • 지역 대한민국 > 포항
  • 가입일자 2006-04-03
  • 글: 4,471

답글: body id 의 제안을 해보겠습니다.

주말 안으로 카테고리별 id 설정 지원이 되도록 해보겠습니다.

죽어라 정신없던 한 주가 슬슬 마무리되어 가는군요 smile

"Everything looks different on the other side."

-Ian Malcomm, from Michael Crichton's 'The Jurassic Park'

inureyes의 웹사이트