수라의 티스토리

게시물 제목노출/개수4
            [[--ActionStart,Row:4--]]
            <tr>
                <td class="ex1">[[--ArtTitle--]]</td>
            </tr>
            <tr>
                <td class="ex1" background="[[--RootDir--]]se_resource/dot_line.gif"></td>
            </tr>
            [[--ActionEnd--]]

타이틀/날짜/썸네일
            [[--ActionStart,Row:4--]]
            <tr>
                <td width="110" align="center" class="ex1"><img src="[[--seimage--]]" width="100" height="100"><br>
                  <br>
                </td>
                <td class="ex1" valign="top">
                    ▶ [[--ArtTitle--]]<br>
                    ▶ [[--ArtStartDate--]]<br>[[--ArtWriteDate--]]<br>
                    ▶ [[--ArtText,Length:80--]]<br>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="ex1" background="[[--RootDir--]]se_resource/dot_line.gif" height="1"></td>
            </tr>
            [[--ActionEnd--]]
            </table>

우선순위에 의한 노출
            [[--ActionStart,Row:4,search:priority>5--]]
            <tr>
                <td class="ex1">[[[--ArtStartDate--]]] [[--ArtTitle--]]</td>
            </tr>
            <tr>
                <td class="ex1" background="[[--RootDir--]]se_resource/dot_line.gif"></td>
            </tr>
            [[--ActionEnd--]]

사이트매니져상의 정렬적용 커스텀태그
            [[--ActionStart,Row:4,Sort:#default#--]]
            <tr>
                <td class="ex1">[[[--ArtStartDate--]]] [[--ArtTitle--]]</td>
            </tr>
            <tr>
                <td class="ex1" background="[[--RootDir--]]se_resource/dot_line.gif"></td>
            </tr>
            [[--ActionEnd--]]

하위아티클이 등록된 아티클 표현
            [[--ActionStart,Row:1--]]
            <tr>
                <td class="ex1">
                  <p>[[[--ArtStartDate--]]] [[--ArtTitle--]]</p>
                  <p>→ 하위기사 리스트<br>
                [[--ArtActionStart,Row:4--]]
                    - [[--ArtTitle--]]<br>
                [[--ArtActionEnd--]]</p>
                </td>
            </tr>
            <tr>
                <td class="ex1" background="[[--RootDir--]]se_resource/dot_line.gif"></td>
            </tr>
            [[--ActionEnd--]]

관련아티클이 등록된 아티클 표현
            [[--ActionStart,Row:1--]]
            <tr>
                <td class="ex1">
                <p>[[[--ArtStartDate--]]] [[--ArtTitle--]]</p>
                <p>→ 관련기사 리스트<br>
                [[--RelatedActionStart,Row:4--]]
                -. [[--ArtTitle--]]<br>
                [[--RelatedActionEnd--]]</p>
                </td>
            </tr>
            <tr>
                <td class="ex1" background="[[--RootDir--]]se_resource/dot_line.gif"></td>
            </tr>
            [[--ActionEnd--]]


사이트매니저상 카테고리를 셀렉트메뉴에 표현
        <select name=nav style="width:200px" tabindex=1 onChange="location.href=nav.value">
            <option value="#" Selected>Site Category 바로가기</option>
            [[--ForCategoryStart,Search:ParentID=seoul_ex&&type=general--]]
            <option value="[[--CatAddress--]]">[[--CatTitle--]]</option>
            [[--ForCategoryEnd--]]
        </select>

탭메뉴에 카테고리 구현
[[--RecordStart,cat1--]][[CatID--]][[--RecordEnd--]]
[[--ForCategoryStart,Search:parentID=[%%parcat%]&&type=general--]]
[[--RecordStart,cat2--]][[CatID--]][[--RecordEnd--]]
[[--IFStart,IS:[%cat1%]=[%cat2%]--]][[--ThenStart--]]
<img sec="[[--CatMetaValue,MetaID:catimage--]]" width="200" height="100">[[--ThenEnd--]]
[[--ElseStart--]]<img sec="[[--CatMetaValue,MetaID:catimage--]]" width="200" height="100">[[--ThenEnd--]]
[[--EmseEnd--]][[--IFEnd--]]

이 포스트를 보낸곳 ()

UI(User Interface)개발자 = 사용자환경을 최적화 하는 개발자

웹 애플리케이션 개발은 크게 UI 개발자 이전과 이후로 나눌 수 있다. 그는 디자이너가 구성한 화면을 HTML, Javascript, CSS 레이아웃을 사용해 가공한 다음 개발자가 코드와 매핑시킬 수 있도록 도와준다. 팀 내 디자이너와 개발자 사이에서 오작교 같은 역할인 셈이다. UI 개발자로 인해 디자이너는 기획한 데로 디자인에 집중할 수 있고, 개발자 역시 디자인에 입각한 시스템 퍼포먼스를 향상시킬 수 있게 됐다.

과거와 달리 웹사이트를 평가하는 기준이 바뀌고 있다. 웹에서 보여주는 콘텐츠도 텍스트, 이미지 위주에서 동영상, 게임, 지도 등으로 확대됐다. 홈쇼핑, 영화 예매, 지도(경로) 검색 등 기존에 없었던 새로운 인터페이스가 부각되면서 UI의 수준도 클라이언트 애플리케이션과 대등한 수준으로 발전하고 있다. 그저 페이지 로딩이 빠른 텍스트 기반이면 만족하던 시절은 먼 옛날이야기다.

UI 개발자의 길을 걷게 된 건 우연한 기회였다. 대학시절 웹 에이전시에서 일하던 친척 누나의 권유로 시작한 아르바이트가 계기였다. 처음 한 일은 틈틈이 익혔던 그래픽 툴을 사용한 디자인 작업이다. 컴퓨터공학을 전공한 탓에 HTML이나 여타 스크립트 언어에도 익숙했던 그는 디자이너와 개발자가 보지 못하는 빈 구석을 빨리 잡아낼 수 있었다.

“디자이너는 오로지 디자인! 이에 질세라 개발자들은 무조건 안 된다는 말만 했죠” 개발 초년생이 바라본 현장의 모습이었다. 그는 디자이너와 개발자 집단 사이를 넘나들고 있다. 우선 UI 기획 단계부터 참여한다. 디자이너들의 모티브를 십분 이해한 뒤 구현작업에 참여해 개발자 함께 디자인과 코드를 조율한다. 이렇다 보니 배울 것도 두배다. 개발 툴 없이 HTML, CSS, JavaScript의 소스만 보고 구조를 파악할 수 있음은 물론이고, 포토샵, 일러스트레이터 같은 그래픽 도구 몇 개쯤은 쉬이 다룰 수 있어야 한다. 게다가 웹 표준에 대한 이해는 기본이라고.

웹 표준 지킴이
대부분 웹 애플리케이션이 보안 등의 문제로 통상 익스플로러 기반으로 작업한다. 모든 사람이 익스플로러만 사용한다면 애써 문제 삼을 필요가 없다. 웹 표준이 필요한 이유를 들어봤다. “어떤 브라우저에서도 페이지를 볼 수 있어야 합니다. 심지어 기기 환경에 상관없이 같은 페이지를 볼 수 있어야 하죠” 점점 늘어가는 파이어 폭스 사용자 수만 보더라도 웹 표준을 지키는 것이 얼마나 시급한 일인지 알 수 있다. 기존 웹의 경우 테이블 구조로 만들다 보니 페이지 로딩과 용량이 문제가 됐다. 웹 표준에 맞춰 태그를 활용하면 이러한 문제들을 해결 할 수 있다.

하지만 빠듯한 개발 일정을 생각하며 웹 표준을 지키기란 여간 쉬운 일이 아니다. “당장은 기업의 업무용 프로그램 중심으로 웹 클라이언트 인터페이스가 부각되고 있지만, B2C 환경에서도 인터페이스 강화가 화두가 될 것”이라며 무엇보다 웹 표준이 왜 필요한지 설득하는 것이 관건이란다. “국내는 이제 커뮤니티가 생겨나고 몇 군데서 세미나가 열리는 상황”이여서 관심 있는 그룹끼리 레퍼런스를 만드는 노력이 필요하다고 한다.

몇 몇 유명 블로그를 언급하며, 웹 애플리케이션을 만드는 이들에게 조언을 아끼지 않았다. 특히 앤디버드가 쓴 ‘CSS Mastery’는 그가 늘 끼고 다니는 책이다. UI 개발자의 길을 희망하는 사람이라면 무조건 읽어보란다. 이와 함께 박수만 씨가 번역한 웹 표준과 방탄 웹을 꼽았다. 그를 포함한 UI 개발자들에게 바이블 같은 책이다.

UI 개발자의 미래
여 전히 새로운 직군으로 인식될 만큼 UI 개발자의 수는 그리 많지 않다. 적은 인원으로 개발을 진행하는 중소기업에서는 생각조차 할 수 없는 자리다. 여전히 개발자냐? 디자이너냐는 질문을 늘 접하니 풀어야할 문제가 한 두 가지가 아니다. 그 나름대로 UI 개발자를 구분해 봤단다. 시스템 지향 UI 개발자와 디자인 지향 UI 개발자다. 자신은 ‘시스템 지향’에 속한다며, Ajax나 플렉스 같은 기술을 사용해 웹 클라이언트 인터페이스 개발을 하게 된다.

디자인 지향적인 UI 개발자는 UX(User eXperience: 사용자 경험) 측면에서 콘텐츠의 접근성을 높이는 노력을 해볼만 하다고 한다. 있는 그대로를 보여주는 웹은 끝났다. 실시간으로 데이터를 요구한다. 사용자의 취향을 반영해 레이아웃을 변경하고 손쉽게 제어할 수 있는 UI들을 포함하기 시작했다. 이런 추세라면 UI 개발자의 영역이 기존 클라이언트 개발자 영역까지 대체 할 가능성도 보인다. 시장은 편의성을 높이는 기술에 손을 들어주기 마련이다.

보안 등의 이슈로 널리 사용되던 ActiveX가 점차 밀려나면서 Ajax나 플렉스 기술이 더욱 관심을 받고 있다. 끊임없이 진화중인 웹 애플리케이션 분야에서 그가 만들어갈 세상을 위해 가슴 한 컨을 비워두려 한다.

- publy 블로그에서 발췌

웹퍼블리셔(Web Publisher)

웹 퍼블리셔(web Publisher)?! 그게 뭐지?
퍼 블리셔는 웹 관련 종사자들은 누구나 알고 있는 코더(Coder)를 높이는 말이라고 보셔도 됩니다. 하지만, 그것만이라고 생각하시면 안 됩니다. 이유는 퍼블리셔의 역할을 제대로 알고 수행하는 인력은 코더와 비교되어 분류, 평가되어야 하기 때문입니다. 퍼블리셔의 역할이 중요하게 인식되는 이유는 웹 표준으로 인하여 발생되는 브라우저간의 문제점 구조화의 분석을 통한 소스의 최적화 등 디자인에서 개발로 넘어가기 전 디자이너의 의도에 맞게!, 개발 쪽의 의도에 맞게! 이슈를 최소화하여 작업에 보다 쉽고 관리가 용이하게 해주는 없어서는 안 될 역할이기 때문입니다. 그리고 또 다른 이유가 바로 W3C에서 주창하는 “웹을 사용하는 모든 이들에게 동일한 사용 환경을 제공해야 한다.” 웹 접근성 향상에 기여하는 부분이 많기 때문입니다. 이처럼 단순히 기존의 Table 코딩에서 DIV 코딩으로 변화한 것이 아닌, 보다 전문적인 직종으로 발돋움하기 위해 퍼블리셔가 갖추어야 할 요건이 많이 생겼기 때문입니다.

웹 퍼블리셔(web Publisher)역할은 알았는데? 영역은?
코 더의 역할을 벗어나 기획, 디자인, 개발까지 의견을 반영하고 접근성 및 표준을 순수할 수 있게 해주는 중요한 포지션(Position)에 위치한 것이 퍼블리셔라고 앞에서도 말씀드렸습니다. 퍼블리셔의 영역은 [표준과 접근성]이 주된 일이기 때문에 디자인 영역과는 90% 이상 관계가 없습니다. 물론, 100% 디자인과 연관이 없는 것은 아니기 때문에 퍼포먼스가 큰 유동적인 페이지는 디자이너의 합의하에 조율을 할 수 있는 것입니다. 그리고 Flash 등을 활용한 비 접근성적인 디자인이 나온다 하더라도 충분히 퍼블리셔는 커버의 역할이 가능합니다. Flash 쪽에서 로딩(Loading) 완료시, 일정 값(value)을 스크립트(Script)로 주고, 그것이 확인되면 Flash를 호출하고, 그렇지 않을 경우 이미지(image)로 처리하게 도와주면 되는 것이죠. 결론은 표준 작업시 특정 이슈에 고나한 것은 디자인 쪽과 조율을 하되 그 이상은 관여하지 않는 것이 디자인 영역에 대한 퍼블리셔의 영역입니다.

그럼 개발영역에 대한 퍼블리셔의 영역은 무엇일까요? 개발자와 일하는 퍼블리셔가 고려해야될 상황은 웹 표준 및 DocType을 인지하지 못한 개발자와 작업하는 경우입니다. 퍼블리셔는 개발 도중 이거 안 되고, 저거 안 되고 하는 것보다 미리 간단한 WSG를 만들어 개발자에게 배포/교육 후 프로젝트에 들어가면 문제가 발생되는 것을 미리에 방지하는 것이죠.

예를들어 스크립트 부분에서 IE, FF, Safari 등 특정 스크립트만 인식하는 부분과 그렇지 않은 부분, 태그(Tag) 사용법 등을 미리 선정하여 문제를 방지하는 것입니다.

여 지껏 이야기를 정리하자면, “퍼블리셔는 서포터의 역할을 수반하는 직종이다.”라고 볼 수 있겠죠. 즉 이거 아냐, 저거 아냐가 아니고 최대한 디자인을 살린! 최대한 개발 영역을 넓혀주는 역할을 하는 것이 바로 퍼블리셔의 영역인 것입니다.

퍼블리셔가 디자이너에게_

“가능한 서포트 해드릴 테니 마음껏 디자인 하세요. 정 안되면 말씀드릴게요. ^-^ ”

퍼블리셔가 개발자에게_

“일단 저희가 준 WSG를 최대한 참고하시고, 개발 완료시점 때 미팅을 하면서 변경하죠.”

그렇습니다. 최고의 퍼블리셔는 틀이 아닌, 두 개의 직종을 무한대로 확장시켜주는 서포터인 것입니다.

- 정리 by yamoo9

  <참고> DOM스크립트(에이콘출판사), 서정민님의 웹 퍼블리셔에 대한 글.

박스모델 (Box Model)

<박스모델>

박스의 구성	content + padding + border + margin + offset로 구성
비주얼	1. 화면에서 보이는 부분 : content + padding + border 2. 화면에서 보이지 않는 부분 : margin + offset
width값의 범위	1. 잘못된 width 값 : content + padding + border ⇒ 화면에 커지게 된다. 2. 올바른 width 값 : padding, border를 제외한 순수한 content 영역

 

 

1. IE DOCTYPE Switching

숙지사항

DOCTYPE선언에 따라 호환 혹은 표준으로 랜더링 된다.

호환랜더링이 되는 3가지 경우	비표준DTD선언 혹은 선언하지 않을 경우, DOCTYPE선언 앞에 다른 문자열 혹은 공백이 들어갈 경우
표준랜더링	HTML 4.01, XHTML 1.0과 같이 W3C의 선언을 정확하게 할 경우

랜더링에 따른 width, height 차이

호환랜더링	widht, height값이 줄어든다.
표준랜더링	width, height영역이 변화 없이 컨텐츠의 영역을 나타낸다.

2. 중앙정열

Mark Up 

<table>를 사용해서 중앙정열을 할 경우 align="center"를 사용했지만 css를 이용한 레이아웃에서는

align="center" 대신 margin="10px auto;" 적용

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>center alignment</title> <style type="text/css"> body { text-align: center; } #content { width: 300px; padding: 1em; border: 1px solid #999; margin: 0 auto; line-height: 1.5em; text-align: left; } </style> </head> <body> <div id="content"> <p>margin 의 auto 값을 이용해서 보다 다양한 레이아웃을 제작 할 수 있다.</p> </div> </body> </html>

 

 

CSS 

body { text-align: center; }	#content의 margin: 0 auto;가 ie5에서 적용되지 않는다. 따라서 body{text-align: center; }추가
#content { width: 300px; padding: 1em; border: 1px solid #999; margin: 0 auto; line-height: 1.5em; text-align: left; }	텍스트 역시 가운데 정렬 됨으로 다시  text-align: left;로 가운데 정렬시켜준다.

 

 

3. 화면 정 중앙 위치시키기

<table> 엘리먼트를 이용할 때는 valign 혹은 height="100%"와 같은 속성을 이용 세로정렬이 자유롭지만 css에서는 쉽지 않다.

vertical-align속성

1. vertical-align 특성

vertical-align 속성을 사용할 수 있는 범위는 td 와 inline 속성에서 적용 가능<td>, <img>,<input>

2. <예제>

<style type="text/css"> body { font-size: 0.75em; } </style> ----------------------- <form action=""> <p> <label>내용 검사</label> <select> <option>전체</option> <option>제목</option> <option>이름</option> <option>내용</option> </select> <input type="text" /> <input type="image" src="btnsearch.gif" alt="검색" /> </p> </form>
<style type="text/css"> body { font-size: 0.75em; } img, input, select { vertical-align: middle; } </style> ----------------------- <form action=""> <p> <label>내용 검사</label> <select> <option>전체</option> <option>제목</option> <option>이름</option> <option>내용</option> </select> <input type="text" /> <input type="image" src="btnsearch.gif" alt="검색" /> </p> </form>	중앙정렬을 위해 img, input, select { vertical-align: middle; }를 추가해준다.

* vertical-align은 input, img와 같은 inline 속성에서 사용되며   이는 완벽한 중앙 정렬이 될 수 있다

 

 

4. position 속성과 negative margin

<style type="text/css"> #middle { position: absolute; top: 50%; left: 50%; border: solid 1px #aaa; width: 155px; height: 155px; margin: -77px 0 0 -77px; } </style>	1. position: absolute; 브라우저를 중심으로    offset 지정 가능 2. top 50%; left: 50%;    브라우저의 상단과 왼쪽에 의 50%에 위치 3. 블럭크기의 절반만큼 음수마진을 주게 되면     엘리먼트의 정중앙이 화면의 정중앙과 일치
<body> <div id="middle"> <img src="docyen.jpg" alt="test" /> </div> </body>

<결과>

 

 

5. 100% 높이 유지하는 레이아웃

div {height: 100%:}가 적용되지 않는 이유

div 속성에서 height: 100%;를 주었음에도 랜더링시 적용되지 않는 이유는 height 값의 기본은 상위 엘리먼트 이기 때문 따라서 body의 height: 100%;로 지정되어 있지 않을 경우 하위 div {height: 100%;}는 랜더링 불가 마찬가지로 html역시 height: 1000%;로 지정되어 있어야 한다.

html > body > div 순서로 height: 100%로 지정

<예제>

<style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #head { height: 100px; background: #ddd; position: relative; z-index: 1; } #body { min-height: 100%; margin: -100px 0 -50px 0; } #content-area { padding: 100px 0 50px 0; } #foot { height: 50px; background: #ddd; } </style> <!--[if IE]> <style type="text/css"> #body { height: 100%; } </style> <![endif]-->

1. 가장 상위 html 부터 차례대로 height: 100%적용      ⇒html, body {height: 100%;} 2. #head     일정한 높이를 가지게 됨으로 position: relative로 한다. 3. #body    선택자 head가 relative 속성을 가짐으로    선택자 body에 해당하는 div는 head 밑에 놓이게 된다.    따라서 margin을 선택자head의 높이에 해당하는 만큼   음수값으로 지정(margin-bottom 동일한 이유)    이후 최소 높이 min-height: 100%;를 지정 4. 컨디셔널 코멘트 사용     l------------------------------     l <!--[if IE]>                                l <code for Internet Explorer>         l <![endif]-->                               l------------------------------     IE는 min-height의 속성이 구현되지 않는다      따라서 IE를 위한 컨디셔널 코멘트 사용

<div id="head">  head (height 100px) </div> <div id="body"> <div id="content-area"> content area </div> </div> <div id="foot"> foot( 50px) </div>

<랜더링 결과>

http://surajung.kr/work/skin01/

2008.07.28 시작