XHTML+CSS 에서의 앵커의 target설정, 인라인 CSS

curije의 이미지

table 레이아웃을 사용하지 않는 XHTML+CSS 에 관심이 생겨서 몇가지 작업하고 있습니다만
모르겠는게 너무 많군요...-.-;;

작업페이지는 http://kala.sorichu.com 이며
XHTML 1.0 Strict 를 사용하고 있습니다.

01.

우선 앵커를 사용할때
지금까지는 새창으로 열때는
<a href="" target="_blank">

최상위로 열때는
<a href="" target="_top">

자주 사용했습니다만
validator에서 target의 사용은 xhtml에서는 표준이 아니라고 나오더군요.

그렇다면 CSS에 설정하는게 없나 찾아보는데 못찾겠더군요.
방법이 없는지 궁금합니다.

02.

인라인 CSS의 사용은 옳은것인가?

어디선가 CSS는 가능한 html문서에 포함되지 않는게 좋다는 글은 본 기억이 있습니다.
그래서 가능한 인라인을 안쓰려고 했는데...
http://kala.sorichu.com/discography.php
여기에서 고민하다가 결국 사용하고 말았습니다.

다시 생각해보니 인라인 CSS도 표준에 맞는 것인데
쓰지 않을 이유가 있나라는 의문이 듭니다만?

03.

table? div? list? 게시판은 어떻게 만드는 것이 좋은 것인가?

게시판에서 글 리스트들을 보여줄때
어떻게 보면 이것도 표는 표이므로
table을 써도 문제가 없다고 생각했다가
괜히 table 레이아웃을 해버리는 꼴이 되는것 같아서
div로 해버렸습니다만...
또 다시생각해보니 이것도 일종의 리스트니
ul, li 쓰는게 맞을듯도 싶고

다른분들은 어떻게 생각하시나요?

정태영의 이미지

xhtml + css 라고 테이블을 쓰지 말자는 것은 아니라고 생각합니다 :)

쓸데 없이 밑줄을 긋기 위해 tr 하나를 더 쓴다거나... 위치 조정을 위해 쓸모없는 이미지를 넣지 않는다던가... 하는게 아니라면 게시판 정도에 테이블을 사용하는건 나쁘다고 생각되지는 않는군요...

나름대로 '표' 니까요

오랫동안 꿈을 그리는 사람은 그 꿈을 닮아간다...

http://mytears.org ~(~_~)~
나 한줄기 바람처럼..

익명 사용자의 이미지

게시판에서 글 목록이 보이는부분은 테이블로 하는것이 맞습니다.
XHTML이야기가 나오면서 테이블을 무조건 쓰지 말라고 하는 사람들이 있는데 이는 잘못된 이야기입니다. 테이블은 도표나 게시판에서 글 목록을 표시하는 부분들에 써야지 테이블을 이용해서 전체 화면을 구성하라는 것은 잘못되었다는 이야기입니다.

XHTML 에서 A태그의 target속성에 대한 것은 http://2logn.com/tt/index.php?pl=41를 참고하세요..

highwind의 이미지

정태영 wrote:
xhtml + css 라고 테이블을 쓰지 말자는 것은 아니라고 생각합니다 :)

쓸데 없이 밑줄을 긋기 위해 tr 하나를 더 쓴다거나... 위치 조정을 위해 쓸모없는 이미지를 넣지 않는다던가... 하는게 아니라면 게시판 정도에 테이블을 사용하는건 나쁘다고 생각되지는 않는군요...

나름대로 '표' 니까요

만약 사이트에 표현해야할 내용이 "표"형식으로 표현하는것이 논리적으로 적합하다면 table을 사용해야한다고 봅니다. 시간표라던지 말이죠.
하지만 2, 3개의 칼럼을 구현하거나 하는식의 디자인 요소로 table을 사용하는것은 말리고 싶네요.

게시판은 그냥 간단한 글 리스트라면 리스트 태그를 사용하는것이 좋다고 생각하고요. 하지만 만약 글 리스트에 번호라던지 날짜, 작성자 등등의 메타 데이터를 표기할려면 table태그를 사용하는것이 현명하다고 봅니다.

인라인 CSS에대해선 이렇게 생각합니다.
문서 내용과 디자인을 따로 나누는 이유는 웹이라는 메체가 꼭 데스크탑 컴퓨터로만 접근 가능한것이 아니기 때문이라고 생각합니다.
모바일 디바이스들도 웹에 접근 가능하고 티브이 냉장고 같은 가전제품으로도 웹사이트를 볼수 있으니 문서 내용과 디자인을 따로 하는것이 현명한 선택이죠. 시각 장애인들을 위한 배려도 포함되고요. (전 가끔 텍스트 브라우저도 씁니다.)
그래서 인라인 CSS를 쓰는것 자체는 나쁘다고 보지는 않지만 인라인 CSS를 씀으로 접근성이 떨어진다면 피하는것이 좋겠지요?

여담으로...
구글의 gmail사이트에 가보면 이러한 글이 써져 있던 기억이 있네요.
(못 찾겠네요... 생각나는 대로 적어봅니다.)

Quote:
Reason why we provide basic HTML version of our Gmail service is, you never know what browser you might run into at the internet cafe in somalia has.

Quote:
우리 서비스에 기본적인 HTML버젼을 제공하는 이유는 여행중 소말리아에 있는 인터넷 카페에 어떤 브라우져가 있을지 모르기 때문이죠.

^^;;; 이집트에 배낭여행 갔다가 들린 인터넷 카페엔 windows 95에 netscape 3.0밖에 없었던 경험이 있네요.

=====================================
http://timothylive.net

lifthrasiir의 이미지

curije wrote:
01.

우선 앵커를 사용할때
지금까지는 새창으로 열때는
<a href="" target="_blank">

최상위로 열때는
<a href="" target="_top">

자주 사용했습니다만
validator에서 target의 사용은 xhtml에서는 표준이 아니라고 나오더군요.

그렇다면 CSS에 설정하는게 없나 찾아보는데 못찾겠더군요.
방법이 없는지 궁금합니다.

target 속성은 XHTML 1.0 Strict에는 없고 Transitional에는 있습니다. (css로도 방법이 있긴 하지만 거의 쓰이지도 않고 좀 복잡합니다) target 속성이 기피되는 이유는 사용자의 의지와 상관 없이 무조건 새 창으로 뜨기 때문이므로, 최대한 새 창으로 여는 것을 삼가시고 꼭 써야 할 경우에는 다음과 같이 자바스크립트로 돌아 가는 방법을 사용하거나, Transitional DTD를 사용해야 합니다.

<a href="http://example.com/" onclick="window.open(this.href,'_blank');return false;">blah</a>

- 토끼군

소리의 이미지

curije wrote:
02.

인라인 CSS의 사용은 옳은것인가?

어디선가 CSS는 가능한 html문서에 포함되지 않는게 좋다는 글은 본 기억이 있습니다.
그래서 가능한 인라인을 안쓰려고 했는데...
http://kala.sorichu.com/discography.php
여기에서 고민하다가 결국 사용하고 말았습니다.

다시 생각해보니 인라인 CSS도 표준에 맞는 것인데
쓰지 않을 이유가 있나라는 의문이 듭니다만?

CSS을 권하는 큰 이유가 중 하나는 이것으로 본문과 레이아웃의 분리가 가능하기 때문입니다.

그런데 인라인 CSS를 사용하면 다시 본문에 레이아웃에 관련한 코드를 집어넣는 게 됩니다. 이렇게 하면 본문의 코드가 다시 복잡해집니다.

CSS로 레이아웃과 본문을 철저히 구분해 잘 만들어진 웹 페이지를 보시면, 본문 코드가 매우 간단해 짧을 뿐더러 이에 기인해 이해하기도 아주 쉽다는 걸 아실 수 있을 겁니다.

curije wrote:
03.

table? div? list? 게시판은 어떻게 만드는 것이 좋은 것인가?

게시판에서 글 리스트들을 보여줄때
어떻게 보면 이것도 표는 표이므로
table을 써도 문제가 없다고 생각했다가
괜히 table 레이아웃을 해버리는 꼴이 되는것 같아서
div로 해버렸습니다만...
또 다시생각해보니 이것도 일종의 리스트니
ul, li 쓰는게 맞을듯도 싶고

다른분들은 어떻게 생각하시나요?

table은 table의 용도에 맞게 사용해야 하는 것이지, table이 레이아웃에 영향을 미치지 않아야 한다는 말은 아닙니다. table을 div의 용도로 사용하는 게 잘못된 것이지요.

전 게시판 목록은 '표'가 맞다고 생각합니다. (일반적인 '표'가 첫번째 열에 각 행의 제목을 적고, 첫번째 행엔 각 열의 이름 또는 번호를 적고 하는 것 아닌가요? 게시판 목록이 정확히 이런 경우잖아요. ;))

hyeonseok의 이미지

01

xhtml 1.1 에 target 이 없는 이유는, 이 속성이 사용자의 입장을 고려하지 않은 속성이기 때문입니다. javascript 로 새창으로 열 수 있지만 스펙에 없는 것을 구현하는 것 자체가 모순이지요. 새창으로 열고 안열고는 사용자에게 달려 있으므로 그냥 두시는 것이 좋습니다.

02

사용하지 말아야 하는 것은 아닙니다. 하지만 외부로 빼지 않으면 문서들의 스타일을 하나의 스타일시틀 관장하는 장점을 포기하는 것이기 때문에 그다지 좋지 않다고 생각을 할 수 있습니다. 단 한번만 사용이 되는 것이라고 자신 할 수 있다면 사용해도 큰 무리 없습니다.

03

단순 게시판 제목만 리스팅이 된다면 ul 이나 ol 을 쓰는 것이 좋지만, 우리나라에서 많이 사용하는 게시판의 경우 2차원 배열의 데이터가 표현 되는 것이므로 table 을 사용하는 것이 맞습니다.

lifthrasiir의 이미지

hyeonseok wrote:
01

xhtml 1.1 에 target 이 없는 이유는, 이 속성이 사용자의 입장을 고려하지 않은 속성이기 때문입니다. javascript 로 새창으로 열 수 있지만 스펙에 없는 것을 구현하는 것 자체가 모순이지요. 새창으로 열고 안열고는 사용자에게 달려 있으므로 그냥 두시는 것이 좋습니다.

target을 써야 할 경우가 딱 하나 있습니다. 간혹 프레임을 쓴 다른 사이트에서 주의를 기울이지 않아서 페이지를 사이트 안의 프레임에 띄워 버렸을 경우에, "이 페이지가 프레임에 갇혀 있다면 여기를 누르세요" 같은 메시지와 함께 target="_parent" 혹은 target="_top"으로 링크를 거는 경우가 있지요. (요즘도 이런 무성의한 사이트들이 있는 지는 모르겠으나)

- 토끼군

curije의 이미지

01.
답변 감사합니다.
javascript를 쓰는게 옳은 것인지는 여전히 의문으로 남게 되었지만
당장의 문제점은 해결되었습니다.

02.
현재 밖으로 빼지 못하고 있는게
자바스크립트로 컨트롤 하고 있는
style="display:none;"
이거 하나인데 어떻게 밖으로 뽑을지
좀더 고민을 해봐야겠네요.

03.
div로 만들어 버렸는데 div 쓰는건 잘못되었다는 의견이 다수네요.
table의 사용을 시도해보기는 했습니다만
한 행에 앵커를 걸어주려고
앵커안에 td가 들어가게되면
validator님께서 표준이 아니라고 난리를 치시더군요;;;
그렇다고 열마다 앵커를 다 달아주게되면
코드 낭비인듯도 하고....
복잡해져서 나중에 보기도 힘들고...

ul,li 로 리스트를 만들고 안에서 span으로 2차원 배열을 만드는 것은 어떨까요?

그리고 질문이 하나 더 생겼습니다....^^;

xhtml+css 로 잘 만들어진 페이지를 찾습니다.
예시를 보고싶다고 해야하나...
이론만 가지고 페이지를 만들려니 막연한 것도 있고....

아 물론 너무 심플한 페이지면 도움이 안되니...
최소한 제가 만든 http://kala.sorichu.com보다는
복잡하면서도 체계적으로 구조가 짜져있는...

익명 사용자의 이미지

curije wrote:
03.
div로 만들어 버렸는데 div 쓰는건 잘못되었다는 의견이 다수네요.
table의 사용을 시도해보기는 했습니다만
한 행에 앵커를 걸어주려고
앵커안에 td가 들어가게되면
validator님께서 표준이 아니라고 난리를 치시더군요;;;
그렇다고 열마다 앵커를 다 달아주게되면
코드 낭비인듯도 하고....
복잡해져서 나중에 보기도 힘들고...

ul,li 로 리스트를 만들고 안에서 span으로 2차원 배열을 만드는 것은 어떨까요?


2차원 배열 형태는 테이블을 사용하는게 맞습니다.
그래도 앵커안에 td가 들어가면 표준에 안 맞는다고 하겠지만 반대로 td안에 앵커를 넣어주는 것은 표준에 맞습니다.
덧. Discography에 accesskey로 D를 설정하셨는데 Alt+D는 IE에서 주소표시줄로 가는 키 입니다. 가능하면 다른 키로 바꾸어주셨으면 합니다. 브라우져마다 정의된 키 입력과 같은 것이 정의되면 원하는 작업이 이루어 질 수 없는 경우가 발생할 수 있습니다.(항상그런것은 아니지만 원활한 작업을 위해서 겹치지 않게 하는 것이 좋습니다.)
죠커의 이미지

curije wrote:
그리고 질문이 하나 더 생겼습니다....^^;

xhtml+css 로 잘 만들어진 페이지를 찾습니다.
예시를 보고싶다고 해야하나...
이론만 가지고 페이지를 만들려니 막연한 것도 있고....

아 물론 너무 심플한 페이지면 도움이 안되니...
최소한 제가 만든 http://kala.sorichu.com보다는
복잡하면서도 체계적으로 구조가 짜져있는...

CSS Zen Garden은 가보셨나요?

이쁜 정원입니다.!
http://www.csszengarden.com

table을 쓰시더라도 th, caption, thead, tfoot, tbody를 쓰시고 th에는 id속성을 넣어주시길 바랍니다. ;-) th의 id와 td의 headers를 일치시키면 더욱 좋습니다.

hyeonseok의 이미지

curije wrote:

한 행에 앵커를 걸어주려고
앵커안에 td가 들어가게되면
validator님께서 표준이 아니라고 난리를 치시더군요;;;
그렇다고 열마다 앵커를 다 달아주게되면
코드 낭비인듯도 하고....
복잡해져서 나중에 보기도 힘들고...

충분히 이런 생각이 들 수 있지만(그리고 사실이기도 하지만), 써야 하는 코드를 써주는 거니까 낭비라고 생각 안하셔도 됩니다. 안써도 되는 것을 써주는 것이 코드 낭비이지요. :)

XHTML 2.0 에서는 a 태그가 없어지고 href 속성으로 대체되니 그때쯤이나 되어야 tr에 href 걸어주는 식으로 답답함이 해결 될 수 있을 것 같습니다.

익명 사용자의 이미지

highwind wrote:
여담으로...
구글의 gmail사이트에 가보면 이러한 글이 써져 있던 기억이 있네요.
(못 찾겠네요... 생각나는 대로 적어봅니다.)

Quote:
Reason why we provide basic HTML version of our Gmail service is, you never know what browser you might run into at the internet cafe in somalia has.

Quote:
우리 서비스에 기본적인 HTML버젼을 제공하는 이유는 여행중 소말리아에 있는 인터넷 카페에 어떤 브라우져가 있을지 모르기 때문이죠.

^^;;; 이집트에 배낭여행 갔다가 들린 인터넷 카페엔 windows 95에 netscape 3.0밖에 없었던 경험이 있네요.

w3.org의 "html validator"로 보면 구글과 gmail 둘 다
엄청난 에러가 나옵니다.

며칠째 validator들이랑 씨름하다가 이걸보니
xhtml 1.0 이나 html 4.01을 완벽히 지켜야하는지 회의가 드는군요 :?

2005년 8월 17일.

addnull의 이미지

앗.. 로그인을 깜박했습니다.. :oops:

2005년 8월 17일.

hyeonseok의 이미지

Anonymous wrote:

w3.org의 "html validator"로 보면 구글과 gmail 둘 다
엄청난 에러가 나옵니다.

며칠째 validator들이랑 씨름하다가 이걸보니
xhtml 1.0 이나 html 4.01을 완벽히 지켜야하는지 회의가 드는군요 :?

validation 을 안해도 되는 이유는 단지 브라우져가 에러를 발생하지 않기 때문입니다. 브라우져가 에러를 발생시키면 당연히 validation 을 해야 겠지요. 화면에 나오지 않으니까요. (firefox 에서 application/xhtml+xml 사용하듯이...)

이걸 다른 프로그램 언어에 적용하면 어떻게 될까요? ";" 몇개 빠지고, "(" 나 "{" 가 좀 없어도 컴파일러가 알아서 잘~ 해석을 해준다면...
생각만 해도 끔찍합니다. 그리고 그런 끔찍한 결과가 현재의 웹페이지들이지요.

사실 눈에만 잘 보인다고 생각을 하면 validation 은 해도 그만 안해도 그만입니다. 다만 그 웹페이지는 에러를 가지고 있기 때문에 미래에나 다른 사용자 환경에서 어떻게 보일지 보장할 수 없을 뿐입니다.

만든 사람만의 웹페이지를 제작하느냐, 많은 사용자를 위한 웹페이지를 제작하느냐의 차이일 뿐입니다. 선택은 각자가 하는 것이지요.

daybreaker의 이미지

01. 토끼군의 말대로 javascript를 이용해서 우회하는 방법을 쓰거나 Transitional DTD를 쓰시는 게 현재로서는 가장 타당해 보입니다.

02. 인라인 CSS는 어떤 경우에 사용될 수 있을까요?
일반적으로 전체 스타일은 CSS 파일로 분리해 두는 것이 좋습니다. 다들 말하면 디자인과 내용의 분리라든가 웹접근성이라든가 코드 간결성이라든가 등등등의 이유에 의해서 말이죠.

하지만, 게시물이나 블로그 본문을 작성할 때 특정 문단만 가운데 정렬을 하고 싶다거나, 특정 이미지만 border를 주고 싶다거나 하는 경우가 생길 수 있겠죠? 그럴 때 inline CSS를 써 주시면 됩니다. (즉, 사이트 개발자가 아닌 단순한 컨텐츠 작성일 경우에 말이죠. 블로그·게시물 작성하는 사람이 반드시 스킨이나 그 블로그 툴에서 사용하는 모든 CSS 규칙을 알 수는 없으니까요.)

03. table을 이용해서 전체 레이아웃을 잡는 것이 접근성 측면에서 문제가 되는 것입니다. (배치나 크기 조절, fallback 처리 등이 자유롭지 못하니까요) 게시물 목록, 달력, 시간표, 자료 Grid 등은 table로 쓰시는 게 맞습니다. (그렇다고 그걸 강제로 그렇게 해야 된다는 건 아니고, table이 그런 목적을 위해서 만들어졌다는 뜻입니다)

물론 본래 목적에 맞는 table을 쓰시더라도 th, thead, tbody, tfoot, caption 등의 태그와 summary 속성 등을 잘 활용하시면 더욱 좋겠지요.

참고 : 사각형 박스 모양의 링크를 만들고 싶다면, a 태그의 스타일에 display: inline-block;을 해 주신 다음 width, height, padding, margin, background 등을 지정하시면 됩니다.

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.