스타일시트 -1
스타일 시트란 ?
홈페이지 만드실때 이런 생각들 해보셨을 겁니다.
한글 문서 작성하듯이 서식과 양식 스타일등을 자유자재로 쓸수 있음 얼마나 좋을까...
자, 이러한 불편을 덜어주기 위해서 나온것이 css(cascading style sheet) 이랍니다.
html 4.0의 가장 큰 특징이 다이나믹html(dhtml)의 구현인데 이는 css에 기반을 두고 있습니다.
dhtml 이 무엇이냐고여?
쉽게 말해서 기존 html의 정형화, 규격화된 틀을 깨고 마치 한글 문서로 문서를 멋들어지게 뽑은 것처럼 여러가지가 혼합된 문서를 만들수도 있고 떠다니는 레이어와 타임라인이라는 개념을 도입해 플래시나 쇽웨이브같은 플러그인을 쓰지 않고도 동적인 화면 구성이 가능하단 이야기죠.
only 태그로만.
여담이지만 드림위버가 각광을 받는 이유중 하나가 이러한 dhtml을 이지윅 방식으로 완벽히 구현해 내었기 때문이라고 합니다.
여러분도 css 를 이용하시면 한글 문서를 하나 만든것처럼 그림과 글이 멋들어지게 조화된 홈페이지를 손쉽고 간단히 만들 수 있다는 이야깁니다.
자, 그럼 css가 대충 어떤건지 감을 잡겠지여. 지금 당장 배워보고 싶다구요 ok? ok!
그럼 css의 특징이 무엇일까나?
1. 이전에 비해 레이아웃이나 글꼴, 색상, 배경 및 다른 표현 효과들을 더욱 세밀하게 조절할 수 있습니다.
2. 문서 한 개만 변경하면서도 수많은 다른 웹 페이지의 외형이나 포맷을 수정할 수 있습니다.
3. 브라우저나 플랫폼 간에 호환이 됩니다.
4. 코딩이 줄고 페이지가 작아지면서 다운로드도 빨라집니다.
5. 익스플로어 4.0 이상이나 넷스케이프 4.0 이상의 브라우저가 필요하고 이 두가지 브라우저에서 css 서식이 완벽히 호환이 안되는 경우도 있습니다.
(대표적으로 background 관련 서식이나 마진 설정에서 그렇습니다. 넷스케이프는 이것들이 안먹습니다 --;
물론 6.0에서 많이 개선되긴 했습니다만 버그가 많기에 완벽하진 않고.그리구 html 4.0 에선 지원하는데 현존하는 브라우져에서 아직 지원 못하는 서식도 있고여...)
1.
<HTML>
<HEAD>
<TITLE>스타일 시트 적용한것 </Title>
<STYLE type="text/css">
P {color : red ; font-style : italic}
</STYLE>
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P>당신은 지금 스타일 시트가 적용된 문서를 보고 계십니다.</P>
<br> 이건 적용 안된곳이구<br>
<P>여기두 적용되었구여 </P>
<P>여기두 적용되었구여</P>
</BODY>
</HTML>
2.
<HTML>
<HEAD>
<TITLE>스타일 시트 안쓴것</TITLE>
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P><font color="red"><i>당신은 지금 스타일 시트를 안쓴 문서를
보고 계십니다.</i></font></P>
<br>이건 적용 안된곳이구<br>
<P><font color="red"><i>여기두 안썼음 </i></font></P>
<P><font color="red"><i>여기두 안썼음.그래두 보이긴 똑같이 보이죠?</i></font></P>
</BODY>
</HTML>
▶ 실행 결과 보기를 보면
아마 똑같은 모양으로 나올것입니다.
단지 다른 점이라면 위에것보다 아랫것이 쉽게 보인다는 점이죠.
만약 이 예제보다 문장에 같은 효과를 주어야 할 경우가 많다면 어떨까요. 아마 똑같은 태그를 일일히 쳐서 넣어야 되겠죠?
아래 예제에서
<P><font color="red"><i>여기두 안썼음</i></font></P>
이런식으로여 바로 이것이 스타일 시트의 장점입니다.
<head> 부분에 첫번째 예제와 같이 P {color : red ; font-style : italic} 라구 한번만 지정해 주면 태그내에서 <P> 로 둘러싸인 부분은 모두 이러한 효과를 내게 되니까요.
따라서 수정시에도 본문 전부를 수정할 필요없이 위에 스타일이 정의된 부분만 수정하면 되니까요.
^^. 대충 감잡으셨나요?
홈페이지 만드실때 이런 생각들 해보셨을 겁니다.
한글 문서 작성하듯이 서식과 양식 스타일등을 자유자재로 쓸수 있음 얼마나 좋을까...
자, 이러한 불편을 덜어주기 위해서 나온것이 css(cascading style sheet) 이랍니다.
html 4.0의 가장 큰 특징이 다이나믹html(dhtml)의 구현인데 이는 css에 기반을 두고 있습니다.
dhtml 이 무엇이냐고여?
쉽게 말해서 기존 html의 정형화, 규격화된 틀을 깨고 마치 한글 문서로 문서를 멋들어지게 뽑은 것처럼 여러가지가 혼합된 문서를 만들수도 있고 떠다니는 레이어와 타임라인이라는 개념을 도입해 플래시나 쇽웨이브같은 플러그인을 쓰지 않고도 동적인 화면 구성이 가능하단 이야기죠.
only 태그로만.
여담이지만 드림위버가 각광을 받는 이유중 하나가 이러한 dhtml을 이지윅 방식으로 완벽히 구현해 내었기 때문이라고 합니다.
여러분도 css 를 이용하시면 한글 문서를 하나 만든것처럼 그림과 글이 멋들어지게 조화된 홈페이지를 손쉽고 간단히 만들 수 있다는 이야깁니다.
자, 그럼 css가 대충 어떤건지 감을 잡겠지여. 지금 당장 배워보고 싶다구요 ok? ok!
그럼 css의 특징이 무엇일까나?
1. 이전에 비해 레이아웃이나 글꼴, 색상, 배경 및 다른 표현 효과들을 더욱 세밀하게 조절할 수 있습니다.
2. 문서 한 개만 변경하면서도 수많은 다른 웹 페이지의 외형이나 포맷을 수정할 수 있습니다.
3. 브라우저나 플랫폼 간에 호환이 됩니다.
4. 코딩이 줄고 페이지가 작아지면서 다운로드도 빨라집니다.
5. 익스플로어 4.0 이상이나 넷스케이프 4.0 이상의 브라우저가 필요하고 이 두가지 브라우저에서 css 서식이 완벽히 호환이 안되는 경우도 있습니다.
(대표적으로 background 관련 서식이나 마진 설정에서 그렇습니다. 넷스케이프는 이것들이 안먹습니다 --;
물론 6.0에서 많이 개선되긴 했습니다만 버그가 많기에 완벽하진 않고.그리구 html 4.0 에선 지원하는데 현존하는 브라우져에서 아직 지원 못하는 서식도 있고여...)
1.
<HTML>
<HEAD>
<TITLE>스타일 시트 적용한것 </Title>
<STYLE type="text/css">
P {color : red ; font-style : italic}
</STYLE>
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P>당신은 지금 스타일 시트가 적용된 문서를 보고 계십니다.</P>
<br> 이건 적용 안된곳이구<br>
<P>여기두 적용되었구여 </P>
<P>여기두 적용되었구여</P>
</BODY>
</HTML>
2.
<HTML>
<HEAD>
<TITLE>스타일 시트 안쓴것</TITLE>
</HEAD>
<BODY bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P><font color="red"><i>당신은 지금 스타일 시트를 안쓴 문서를
보고 계십니다.</i></font></P>
<br>이건 적용 안된곳이구<br>
<P><font color="red"><i>여기두 안썼음 </i></font></P>
<P><font color="red"><i>여기두 안썼음.그래두 보이긴 똑같이 보이죠?</i></font></P>
</BODY>
</HTML>
▶ 실행 결과 보기를 보면
아마 똑같은 모양으로 나올것입니다.
단지 다른 점이라면 위에것보다 아랫것이 쉽게 보인다는 점이죠.
만약 이 예제보다 문장에 같은 효과를 주어야 할 경우가 많다면 어떨까요. 아마 똑같은 태그를 일일히 쳐서 넣어야 되겠죠?
아래 예제에서
<P><font color="red"><i>여기두 안썼음</i></font></P>
이런식으로여 바로 이것이 스타일 시트의 장점입니다.
<head> 부분에 첫번째 예제와 같이 P {color : red ; font-style : italic} 라구 한번만 지정해 주면 태그내에서 <P> 로 둘러싸인 부분은 모두 이러한 효과를 내게 되니까요.
따라서 수정시에도 본문 전부를 수정할 필요없이 위에 스타일이 정의된 부분만 수정하면 되니까요.
^^. 대충 감잡으셨나요?
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
