Mozilla 한국 커뮤니티

메모장 등으로 텍스트 홈만 주욱 만들어 온 학생입니다.
포럼은 전부터 들러왔는데 글쓰기 하려고 보니까 괜히 가입하고싶어지더군요.
(원래는 네이버 자바스크립트 오류때문에
파폭에서 억지로라도 돌려볼 방법이 없을까 질문하려고 했는데 샛길로 빠져서.)

맨날 밋밋한 홈페이지만 만드는데 오늘 갑자기 호기심이 발동했습니다.

라운디드 코너… 테이블과 이미지로 만드는 방식 말곤 없나 하고요.
레이아웃을 바이너리 파일 없이 구상하다보니 항상 네모반듯한 홈이 되더군요.
지난번엔 테이블을 전부 css와 div로 대체했는데 당연히 별 티가 안나고

메모장 하나 열고 삽질 시작했습니다. 딱히 일도 없이
밥먹고 메신저 켜놓고 놀면서 생각하다보니 진척이 느리더군요.

다음은 네시간동안 삽질해서 만든 소스입니다.
결과는 어쩌다보니 성공… 입니다. 코드가 지저분해도 이해해 주시길.

1. IE와 불여우가 그려주는 방식이 다르다는 것하고
2. 제 소스가 표준에 어긋나지 않는가 하는 점.
3. 비효율적인 부분이 있는지.
4. width를 상대값으로 만들 수 없을지

이곳에 와서 얘기해보고 싶었습니다.

많은 지적 기대하겠습니다-

덧. 주석처리한 css 한줄은 IE에서 전부 표시할 때 어색해서 여러가지 시도하다가 그나마 낫게 조절해 본 것입니다. 불여우에서는 주석처리 하지 않으면 원래 의도대로 표현이 됩니다.

덧2. 만들다보니 이미지를 쓰지 않았을 때 가능한 장점들이 죄다 희석되어 버렸습니다.

그래도 나름대로 쓸만하다고 생각하지만.

덧3.
http://www.fireandknowledge.org/archive ... es-part-1/
위 주소에서 찾은 방식은 제대로 구현이 안되던데, Css2.0 이 완전히 지원되어야만 하는 걸까요?
-- - 소스 - --
<html><head><style type=text/css>

body {background:#fff;color:#000;font-size:9pt;letter-spacing:-0.1em;}

div {background:#eee;}

div.box {width:200px;}

.headfoot {width:200px;background:#fff}
div#px0 {width:168px;font-size:0px;height:1px;}
div#px4 {width:176px;font-size:0px;height:1px;}
div#px7 {width:182px;font-size:0px;height:1px;}
div#px9 {width:186px;font-size:0px;height:1px;}

div#px11 {width:190px;font-size:0px;height:1px;}
div#px12 {width:192px;font-size:0px;height:1px;}
div#px13 {width:194px;font-size:0px;height:1px;}
div#px14 {width:196px;font-size:0px;height:2px;}
div#px15 {width:198px;font-size:0px;height:3px;}

div#content {padding:16px;}
div#dummy {background:#fff;}

</style></head>
<body>

<div class=box>
<div class=headfoot align=center>
<div id=px0> </div>
<div id=px4> </div>
<div id=px7> </div>
<div id=px9> </div>

<div id=px11> </div>
<div id=px12> </div>
<div id=px13> </div>
<div id=px14> </div>
<div id=px15> </div>
</div>

<div id=content>
괜히 집어넣은것 같아서 내용은 생략합니다</div>

<div class=headfoot align=center>
<div id=px15> </div>
<div id=px14> </div>
<div id=px13> </div>
<div id=px12> </div>

<div id=px10> </div>
<div id=px9> </div>
<div id=px7> </div>
<div id=px4> </div>
<div id=px0> </div>
</div>
</div>

</body></html>

훌륭한 시도 입니다. 결과도 잘 나오는 군요

코드가 맞는가는 W3C 의 validator ( http://validator.w3.org/ )를 사용해서 체크해 보시면 됩니다.

1. !DOCTYPE 선언이 되어 있지 않습니다.
2. 모든 속성값은 "" 로 감싸 주어야 합니다. type="text/css" 와 같이요.
3. 문서에 title 과 charset 선언이 없습니다.

코드가 valid 하다고 웹표준이라고 말 할 수 있는 것은 아닙니다. 웹표준은 HTML 의 구조를 의미에 맞게 작성하고 디자인을 CSS 로 하는 것에 있습니다.
작성하신 코드의 #px4, #px0 등은 문서의 구조와는 별로 관계가 없는 라운드 코너를 만들기 위해서 삽입된 불필요한 markup 입니다.

mozilla 에는 라운드 코너를 만들기 위한 CSS Extension 이 있습니다. Mozilla 에서만 작동을 해서 일반적으로 사용하기는 힘들지요.

추가 markup 을 사용안하고 javascript 를 이용해서 동적으로 element 를 생성하는 방법도 생각해 볼 수 있습니다. 이렇게 하면 의미를 전달하는 markup 을 깨끗하게 할 수 있고 원하는 효과를 얻을 수 있을 듯 합니다. 삼각함수를 사용해서 round 를 더 깨끗하게 넣을 수도 있겠군요.

width 값을 상대적으로 줄 수는 있겠지만 이것은 resolution 에 관계가 될 것 같습니다. width 가 커지면 각 div 들의 height 도 높아져야 round 가 원형을 유지하겠죠.

둥근 모서리에 대한 아쉬움은 항상 CSS를 쓰면서 느꼈던 것입니다. 님께서 쓰신 방법은 기발하고 아주 재미있어 보입니다. 그런데 꼭 그렇게까지 해서 둥근 모서리를 만들어써야 되는 현실이 안타깝습니다. 또, 이럴 때에는 꼭 이미지를 그렇게 피해야 하나 하는 생각도 듭니다.

Eric Myer는 또다른 방식으로 이미지를 써서 둥근 모서리를 만들었습니다. 크기는 고정되어 있는데 재미있는 것은 텍스트가 마치 둥근 모서리를 따라 적절히 흐르는 것처럼 보이게 한다는 것입니다.

http://www.meyerweb.com/eric/css/edge/c ... /demo.html

만약 박스의 크기가 상하로는 고정되어 있다면, 이미지를 3벌 정도 만들어서 배경으로 처리해주면 그런데로 텍스트의 크기에 비례해 유연하게 변경될 수 있는 둥근 모서리의 버튼 같은 것을 만들면 되겠지요. 이번에 저희 회사에서 오라클의 교육 시스템을 쓰게 되었는데 거기에는 버튼 이미지를 그런 식으로 쓰게 되어있더군요. 불필요하게 테이블을 많이 쓴 것이 깔끔하지는 않지만....조금 수정하면 될 것 같기도 하고. 어떤 것이 더 좋은 방법일지 잘 판단이 안 되는군요. 불필요한 코드가 최대한 배제되고 의미적인 코드 위주로 된 것이 더 좋겠지요.

http://ilearning.oracle.com/ilearn/en/l ... /login.jsp
(로그인 버튼을 보시면 됩니다.)

CSS3 Working Draft의 Border Module을 보니 둥근 모서리의 정도를 지정하는 border-radius 속성이 제안이 되어있던데 이것이 구현되면 CSS 디자이너들이 상당히 기뻐할 수 있을 것 같습니다. 아직 지원하는 브라우저는 없는 것 같지만...

http://www.w3.org/TR/2002/WD-css3-borde ... der-radius

라운드코너 자바스크립트는 전에 만들었습니다.
아무리 구글을 뒤져봐도 이미지없는 라운딩코너는 없더군요.
그래서 삼각함수 이용해서 만들었습니다.

전에 hyeonseok님한테 보내드린건 표준에 좀 어긋난 자바스크립트에
버그가 좀 있었습니다. 저희 디자이너가 테스트 하면서 버그도 다 잡고 현재는
아무 문제가 없어 보입니다.

익스 모질라 둘다 잘되는데 익스에서는 xhtml dtd선언이 되있어야 합니다.
html 4.01 dtd에서는 테스트 안해봐서 잘 모르겠습니다. 테스트 하는건 귀찮아서 ㅡㅡ;
익스에서 dtd 선언 안하면 css가 제대로 안먹어서 다 깨진다는...
국내는 표준 지켜서 하는 사람도 거의 없고 하니 괜히 배포했다가 dtd도 선언안하고
익스에서 깨진다고 욕먹을 바에 그냥 짱박었습니다.

뭐 세월 지나서 css3 나오면 라운딩 지원하겠죠.
그럼 지금 만든것도 필요없어질듯.

CSS 에서 라운드 코너를 지원 할 수 있는 가장 좋은 방법은 하나의 element 에 background-image 를 background-position 이나 background-repeat 에 따라서 여러개 쓸 수 있게 하는 것입니다.

현재로서는 content 속성과 :before, :after pseudo class 를 사용해서 구현을 할 수 있지만 약간은 모자람이 있고, 결정적으로 IE 가 이 속성들을 잘 지원을 안해서 사용이 힘들죠.

javascript 로 content 와 :before, :after 와 같은 방법을 구현하면 복잡한 삼각 함수도 필요 없고 round 뿐만 아니라 다른 형태의 block 디자인도 손쉽게 적용 할 수 있을 것입니다. javascript 로는 이들 속성이 구현이 간단하죠.

CSS4 정도에서 여러개의 background-image 를 지원했으면 좋겠네요. ^^

rect() 이 속성값으로 보이는 공간을 설정해주는거 있잖아요.
어디선가 들은 이야기로는 현재는 사각만 지원하지만 앞으로는 원도 지원할거라면서.
이런게 어서 적용되야 자바 삽질을 안할텐데요. 에휴~

hyeonseok wrote:훌륭한 시도 입니다. 결과도 잘 나오는 군요

코드가 맞는가는 W3C 의 validator ( http://validator.w3.org/ )를 사용해서 체크해 보시면 됩니다.

1. !DOCTYPE 선언이 되어 있지 않습니다.
2. 모든 속성값은 "" 로 감싸 주어야 합니다. type="text/css" 와 같이요.
3. 문서에 title 과 charset 선언이 없습니다.

코드가 valid 하다고 웹표준이라고 말 할 수 있는 것은 아닙니다. 웹표준은 HTML 의 구조를 의미에 맞게 작성하고 디자인을 CSS 로 하는 것에 있습니다.
작성하신 코드의 #px4, #px0 등은 문서의 구조와는 별로 관계가 없는 라운드 코너를 만들기 위해서 삽입된 불필요한 markup 입니다.

mozilla 에는 라운드 코너를 만들기 위한 CSS Extension 이 있습니다. Mozilla 에서만 작동을 해서 일반적으로 사용하기는 힘들지요.

추가 markup 을 사용안하고 javascript 를 이용해서 동적으로 element 를 생성하는 방법도 생각해 볼 수 있습니다. 이렇게 하면 의미를 전달하는 markup 을 깨끗하게 할 수 있고 원하는 효과를 얻을 수 있을 듯 합니다. 삼각함수를 사용해서 round 를 더 깨끗하게 넣을 수도 있겠군요.

width 값을 상대적으로 줄 수는 있겠지만 이것은 resolution 에 관계가 될 것 같습니다. width 가 커지면 각 div 들의 height 도 높아져야 round 가 원형을 유지하겠죠.

border-radius 속성은 -moz-border-radius로 하면 됩니다. 단, 익스에서는 안나오겠죠.

hyeonseok wrote:CSS4 정도에서 여러개의 background-image 를 지원했으면 좋겠네요. ^^

CSS3 에 있군요. ^^

http://www.w3.org/TR/2005/WD-css3-backg ... /#layering

hyeonseok wrote:
hyeonseok wrote:CSS4 정도에서 여러개의 background-image 를 지원했으면 좋겠네요. ^^
CSS3 에 있군요. ^^

http://www.w3.org/TR/2005/WD-css3-backg ... /#layering

아! 꼭 있었으면 했던 바로 그 기능이군요..

IE7이나 FF2(?)에서 지원하면 좋겠네요

Mozilla 한국 커뮤니티

css 라운디드코너(without image)

css 라운디드코너(without image)

기발하긴 한데

라운딩 스크립트를 만들긴 했습니다.

그 뭐더라