스크립트 질문
조회수 3246 답변수 2 반응수 2 등록일 2016.08.11 19:36:23

  1. <div class="random-banner">
  2. <script type="text/javascript">
  3.     <!--
  4. { 
  5.     var abody=new Array();
  6.      abody[0]='<img src="//i.imgur.com/Jrd2eca.jpg7" /></a>';
  7.      abody[1]='<img src="//i.imgur.com/tsprAkL.jpg" /></a>';
  8.      abody[2]='<img src="//i.imgur.com/EnWtJc7.jpg" /></a>';
  9.      abody[3]='<img src="//i.imgur.com/xfnv11L.jpg" /></a>';
  10.      vl=abody.length;
  11.      vn=Math.floor(Math.random() * 4);
  12.      document.write(abody[vn]);
  13. }
  14. // -->
  15. </script>
  16. </div>



배너 사이즈 크기를 작게하고 싶은데요 예를들어 200x200 사이즈로

이 소스코드에다가 적용해주고 싶습니다. 

css 파일을 따로 만들어 적용하는것이 아니라 그냥 소스코드 전체 사용할수있게

어떻게 해야하나요?


Internal Style로 작성하는 방법:

  1. <style>
  2.     .random-banner img {
  3.     width:200px;
  4.     height:200px;
  5. }
  6. </style>
  7. <div class="random-banner">
  8. <script type="text/javascript">
  9.     { 
    1. var abody=new Array();
    2.  abody[0]='<img src="//i.imgur.com/Jrd2eca.jpg7"/></a>';
    3.  abody[1]='<img src="//i.imgur.com/tsprAkL.jpg" /></a>';
    4.  abody[2]='<img src="//i.imgur.com/EnWtJc7.jpg" /></a>';
    5.  abody[3]='<img src="//i.imgur.com/xfnv11L.jpg" /></a>';
    6.  vl=abody.length;
    7.  vn=Math.floor(Math.random() * 4);
    8.  document.write(abody[vn]);
  10.     }
  11. </script>
  12. </div>


Inline Style로 작성하는 방법:

  1. <div class="random-banner">
  2. <script type="text/javascript">
  3. { 
  4.     var abody=new Array();
  5.     abody[0]='<img src="//i.imgur.com/Jrd2eca.jpg7" style="width:200px;height:200px;"/></a>';
  6.     abody[1]='<img src="//i.imgur.com/tsprAkL.jpg" style="width:200px;height:200px;"/></a>';
  7.     abody[2]='<img src="//i.imgur.com/EnWtJc7.jpg" style="width:200px;height:200px;"/></a>';
  8.     abody[3]='<img src="//i.imgur.com/xfnv11L.jpg" style="width:200px;height:200px;"/></a>';
  9.     vl=abody.length;
  10.     vn=Math.floor(Math.random() * 4);
  11.     document.write(abody[vn]);
  12. }
  13. </script>
  14. </div>


2016.08.11 21:58:07 반응 이력
둘의 차이가 무엇이고 어느것을 주로 쓰는것이 더 좋은가요? 또 어떠한 경우에 어느것을 쓰는건가요? 알려주시면 감사하겟습니다. 안녕하세요 2016.08.12 19:05:07

HTML 문서에 CSS를 사용하는 방법은 3가지의 방법이 있습니다. 


1. 외부 스타일 시트 (External Style Sheet))

HTML 문서와 별개로 스타일을 정의해 놓은 파일을 불러와서 사용하는 방법

웹어플리케이션 전체의 스타일을 일관성 있게 관리하기 용이합니다.

  1. <link rel="stylesheet" href="/style.css">


2. 내부 스타일 시트 (Internal Style Sheet)

HTML 문서 내 <head></head> 사이에 스타일을 정의하여 사용하는 방법

하나의 HTML 문서에 스타일을 적용하고자 하는 경우

  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.                img{width:200px;height:200px; }
  5.         </style>
  6.     </head>
  7. </html>


3. 인라인 스타일 시트 (Inline Style Sheet)

태그 안에 정의하는 방법

태그 영역 내에서만 적용하고 하는 경우

  1.  <img src="/test.png" style="width:200px;height:200px;">


스타일이 적용되는 우선순위도 알아두시는게 좋아요

인라인 > 내부 > 외부 우선순위로 스타일이 적용됩니다.


2016.08.16 21:06:00 반응 이력
정말 대단히 감사합니다!! 안녕하세요 2016.08.18 00:25:07

답변 작성

질문에 적합한 답변을 상세히 작성해 주시기 바랍니다.

답변이 찬성되면 태그평판 +2점이 적립, 반대되면 태그평판 -1점 차감됩니다.

답변이 채택되면 태그평판 +10점이 적립됩니다.