Page 1 of 1
Safari와 오페는 CSS 지원 안되나요??
Posted: 2006 02 02 02:28 58
by PSQ
CSS입문한지 얼마 안된 초보입니다.
페이지를 CSS를 이용한 DIV작성후
제가 맥유저인 관계로 FF와 IE 테스트 후에
Safari와 Opera로 테스트를 했는데
FF와 IE에서는 잘 나오는게
Safari 와 Opera에서는 출력이 제대로 안되네요.
Safari와 Opera가 거의 동일한 결과물을 내뱉으는데요...
두 브라우져가 CSS를 지원하지 못하는 건가요???
//그리고 한가지더//
이곳 게시판에 이상하게 Opera 라는 글씨가 안써지네요...저만 그런가요??
Posted: 2006 02 02 09:13 17
by hyeonseok
타이거 쓰시나요? 보통은 Firefox 기준으로 맞추면 Opera와 Safari에서도 거의 동일하게 나옵니다.
코드를 보여주시면 더 확실히 알 수 있을 것 같습니다.
팬더이고요....
Posted: 2006 02 04 17:18 41
by PSQ
OS환경은 팬서 10.3.9 인데요.
두 브라우져가 CSS지원에 큰 문제가 없다면...
CSS문서를
PHP확장자로 놓고 PHP 내부에
일괄적인 스타일 처리 목적으로 현석님이 가르쳐주신,
header("Content-Type: text/css; charset=euc-kr");
위 내용을 삽입해놓고 PHP를 CSS를 읽게하는 형태로 사용중인데요...
제생각에는
두 브라우저가 PHP파일을 CSS형태로 인식하지 못하는데서 오는 문제라고 생각되는데요...
safari 및 opera 가 php를 css로 읽어오는데 문제가 있나요?
Posted: 2006 02 04 18:15 07
by PSQ
아무래도 PHP 에 CSS 삽입 문제는 아닌듯 하네요....
소스가 너무 복잡해서 뭘 올려야 할지 몰라서...
처음부터 opera 로 테스트해가면서 다시 코딩중입니다...
뭔가 FF/IE에서 지원하지만
Safari/Opera에서 지원못하는 부분같은게 존재하나 봅니다..
...
Posted: 2006 02 04 18:32 36
by PSQ
문제점을 찾았습니다.
IE/FF 와 다르게 Safari/Opera는 CSS 내부에 @Import 된
CSS 파일이 <?=변수;?> 형태를 읽지를 못하고 스킵해버립니다...
각 브라우저에서 동일한 출력을 갖으려면 @Import로 연결된 CSS파일에
PHP변수를 사용하면 안된다는 결론이 나오는데요...
무식하게 통짜 CSS를 구성하는 방법도 있겠지만 이 방법도 있지만...
이런방법보다는 어차피 PHP니깐 CSS의 @Import 대신에 PHP의 Include를 하는 방향으로...파일을 구조화시켜서 사용하려 하는데요.
Import 로 CSS 연결과 PHP Include 방식 연결에 큰 차이가 없다면 괜찮을것 같은데요..
어떨까요?
Posted: 2006 02 04 22:33 26
by eouia
그건 아니라고 봅니다.
아마도 서버쪽 세팅에서 css확장자에 대해 php해석을 안시키는게 아닐른지요?
서버쪽(아마도 아파치)에서 .css에 대해서도 php 해석을 시키도록 설정해주면 될 문제인 것 같습니다.
....
Posted: 2006 02 04 22:57 47
by PSQ
변수사용을 위해 CSS 문서 확장자를 모두 .PHP로 사용중입니다....
그리고 PHP 사용중 변수는 <?=변수;?> 형태도
첫번째 .PHP 확장자를 갖고 있는 CSS에서는 인식되지만
CSS에 Import로 링크된 하위 CSS(물론 .PHP 확장자를 갖고 있습니다)파일에서
<?=변수;?> 형태를 읽지 못하고 스킵해버립니다..
물론 파이어폭스와 익스플로러는 제대로 읽어냅니다.
오페라와 사파리에서만 문제가 발생합니다.
PHP의 Include 형태가 CSS의 Import 와 큰 차이가 없다면
Include를 통해 문서를 연결하려고 합니다.
그래서 두 형태 링크가 어떤 차이를 갖는지 궁금합니다.
Re: ....
Posted: 2006 02 05 21:45 46
by hyeonseok
PSQ wrote:PHP의 Include 형태가 CSS의 Import 와 큰 차이가 없다면
Include를 통해 문서를 연결하려고 합니다.
그래서 두 형태 링크가 어떤 차이를 갖는지 궁금합니다.
php의 include와 css의 import는 완전히 다릅니다.
php의 include는 서버측 문서포함입니다.
예를 들어서 a.php가 b.php를 인클루드 하고 있다면, 브라우져에서는 a.php만 호출을 하게 됩니다. 서버에서는 b.php가 a.php안에 포함이 되고 a.php에서 선언한 변수를 b.php에서 사용할 수 있게 됩니다. 이 인클루드 과정은 사용자 브라우져에 출력되기 전에 서버에서 a.php와 b.php를 합치고 다 처리가 끝난 후 a.php만을 출력합니다. b.php는 브라우와는 전혀 상관 없습니다.
1. 브라우져가 a.php호출
2. 서버에서 a.php가 b.php를 인클루드 하고 있는 것을 파악하고 a.php처리 시에 b.php를 포함하여 처리. 이 과정에서 변수 스코프 공유가 가능.
3. 서버는 2번에서 처리된 a.php + b.php를 a.php의 이름으로 브라우져로 출력
4. 브라우져는 a.php를 해석. a.php를 만들기 위해서 b.php가 사용되었다는 것을 브라우져는 전혀 알지 못함
반면에 css의 import는 브라우져측 문서포함입니다.
a.php에서 b.php를 임포트 하게 되면 브라우져는 a.php와 b.php를 각각 호출합니다. 서버는 각각의 a.php와 b.php의 호출에 대한 출력만을 하기 때문에 a.php의 변수를 b.php에서 사용할 수 없습니다.
1. 브라우져가 a.php호출
2. 서버는 a.php 출력
3. 브라우져가 a.php 해석. 이 과정에서 b.php가 임포트 된것을 알고 b.php를 호출
4. 서버는 b.php 출력. a.php는 이미 출력이 끝났기 때문에 변수 스코프가 공유되지 않음
5. 브라우져가 b.php를 해석 (import 구분은 css 파일의 최상단에 있어야 하기 때문에 아직 a.php의 임포트 구문 아래는 처리되지 않았음)
7. a.php의 나머지 선언부를 해석해서 랜더링 반영.
php는 서버에서 돌고 css는 브라우져에서 돕니다.
Posted: 2006 02 05 21:54 14
by hyeonseok
테스트 결과 이와 같이 사용하는데 있어서 브라우져의 차이는 없었습니다.
css.html
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css test</title>
<link rel="stylesheet" type="text/css" href="css.php" />
</head>
<body>
<p id="css-test">
This paragrahp is yellow.
</p>
<p id="css-import-test">
This paragrahp is red.
</p>
</body>
</html>
css.php
Code: Select all
<?php
header("Content-Type: text/css; charset=utf-8");
$color = "#ff0";
?>
@import url(css_imported.php);
#css-test {
background: <?=$color?>;
}
css_imported.php
Code: Select all
<?php
header("Content-Type: text/css; charset=utf-8");
$color = "#f00";
?>
#css-import-test {
background: <?=$color?>;
}
위에 설명한 것 처럼 import를 사용하게 되면 css.php에서 선언한 변수를 css_imported.css에서 사용할 수 없습니다. 테스트 결과 Firefox 1.5 alpha, Camino 1.0b, Opera8.51, Safari2 네 브라우져 모두 같은 결과를 얻었습니다.
IE와 Firefox에서는 정상적으로 나온다고 하셨는데 그 부분은 좀 이상합니다. 다른 요인이 있었던 것 같습니다.
...
Posted: 2006 02 08 04:33 16
by PSQ
CSS_imported.php 까지는 별문제 없이 4브라우저 모두 같은결과를 출력합니다.
CSS 속에 변수를 하나하나 찾으려면 복잡해서..
일괄적인 변수값처리를 위해서 CSS_variable.php 파일을 작성후
변수를 일괄 관리하며,
CSS_imported.php 하위에, 위에서 작성한 CSS_variable.php를
Include하는 경우에 오페라/사파리가 다른 결과를 출력합니다.
오페라/사파리의 경우,
CSS_imported.php가 CSS.php에 PHP의 Include 로된 경우는 문제를 일으키지 않지만,
CSS의 Import형태 사용시 CSS_variable.php를 읽어오질 못합니다.
더붙여 나름대로 CSS_variable.php라는 변수형태를 일괄저장하는게 편리한데,
이런 방식이 비효율적인지도 궁금합니다.
그리고 트래픽에는 큰 차이가 없을듯 한데, Include방식으로 문어발식 연결을 해두면
Import와 비교하여 서버에 큰 부하를 주게되는건 아니겠지요?
...
Posted: 2006 02 08 04:37 25
by PSQ
물론 Include Import 양쪽 모두
FireFox, IE 는 정상입니다
Opera 8.51 과 Safari 1.3.2 에서 다른 결과물 출력합니다.
Safari 2.0 은 타이거가 아니라서 아직 테스트를 못해봤습니다...
Re: ...
Posted: 2006 02 08 09:45 28
by 빛알갱이
PSQ wrote:물론 Include Import 양쪽 모두
FireFox, IE 는 정상입니다
.
현석님이 쓰신 것처럼 PHP 변수 선언이 들어간 파일을 CSS로서 import했을 ㅤㄸㅒㅤ FF/IE에서 제대로 동작한다는 것은 정말 이해가 안 되는군요. 그렇게 잘 동작하는 페이지의 URL을 한 번 줘 보시겠습니까?
Re: ...
Posted: 2006 02 08 09:47 58
by hyeonseok
PSQ wrote:CSS의 Import형태 사용시 CSS_variable.php를 읽어오질 못합니다.
이건 당연히 못불러옵니다. 위에서 말했다시피 import하면 php코드상의 변수는 공유 할 수 없습니다. 근데 IE/FF는 잘 나온다는게 이상하니, 현상이 재현되는 간단한 파일을 만들어서 올려줘 보시겠습니까? 참 신기한 현상이네요. 브라우져 종류를 떠나서 변수 공유가 안되는게 정상입니다.
PSQ wrote:더붙여 나름대로 CSS_variable.php라는 변수형태를 일괄저장하는게 편리한데,
이런 방식이 비효율적인지도 궁금합니다.
이건 개발 방법이므로 여기서 논의할 일은 아닌듯 싶습니다.특별히 비효율적이라고 생각하시는 이유가 있으신가요?
PSQ wrote:그리고 트래픽에는 큰 차이가 없을듯 한데, Include방식으로 문어발식 연결을 해두면
Import와 비교하여 서버에 큰 부하를 주게되는건 아니겠지요?
많아봤자 이미지나 플래시 크기에 비하면 아무것도 아닙니다.
....
Posted: 2006 02 08 19:19 35
by PSQ
변수는 각각 CSS에서 인클루드 됩니다.
그러면 IE/FF에서 정상작동됩니다.
그리고 OPERA/Safari 문제는 그냥 Include로 해결하기로 하고,
맥유저의 경우도 다수가 FF를 사용하므로..
잠정적으론 Import로 방치(?) 하기로 하고....
시간이 나면 Include로 수정할계획입니다.
hyeonseok님 및 빛알갱이님, eouia 님 답변감사드립다~^^;;
Posted: 2006 02 09 01:48 39
by 박민권
css 파일에 php 코드를 집어넣고 css 확장자도 .php로 사용하는 것은 추후 여러가지 문제점을 발생할 수 있습니다.
디자인 파일과 프로그램 파일이 서로에게 얽매여서 하나를 수정하면 다른 하나를 수정해야 하는 문제도 발생할 수 있습니다.
디자인 파일(css)만 보아서는 해당 css의 동작을 명확히 알 수가 없으며 php코드와 함께 해석해야 어떤 동작을 하는지 해석할 수 있습니다.
디자이너가 css 작성시에 프로그래머와 더욱 많은 상의가 필요해지며 스타일을 변경하려면 php코드를 건드려야 합니다.
때문에 아래와 같은 개발방식을 권해드립니다.
1. css의 상속성을 잘 활용하여 문서 출력시 php코드로 id와 class명 변경을 통한 스타일 변경이 일어나도록 한다.
2. css 파일을 특징별로 잘 분리하여 상황에 맞춰 새로운 css 파일에 분리된 여러 css 파일을 import 하는 파일을 만든다.
예) 제품소개 페이지에 적용할 css는 product.css 로써 product.css 내부는 head.css, foot.css, public.css, prod.css를 import 하고 있다.
css는 id와 class명에 따른 여러 스타일을 제공하며,
표현될 문서에서는 php코드를 이용하여 필요한 css파일을 link하거나 id와 class명을 변경함으로써 css에서 제공되는 스타일을 표현하는식의 개발방식이 좋다고 생각합니다.
아래의 방식이 지금 방식이라면
Code: Select all
<?php
$color = "#fff";
$color = "#000";
?>
#Box {color: <?=$color?>}
추천하는 방식은 아래와 같습니다.
Code: Select all
#Box .prod-title{color: #000;}
#Box .cust-title{color: #fff;}
<?php $title="cust-title"; ?>
<div id="Box">
<h3 class="<?=$title?>"></h3>
</div>