기본문법 매뉴얼

번역하고 싶은 언어를 선택해 주세요.

<head>에 CSS,JS 추가방법

다양한 프로그램과 페이지를 제작하다보면 CSS 및 JS파일을 <head>에서 불러와야 하는 경우가 많이 발생 됩니다.
그렇다고 해서 모든 페이지의 <head>에 CSS, JS파일을 등록하는것은 페이지의 로딩속도가 느려질수있으며,
<body>에서 CSS, JS파일을 불러오는 경우 오류가 발생될수 있습니다.

본 솔루션에서는 이러한 문제를 개선하기 위해 <load>태그가 제공 되고 있으며, 다음과 같은 방법으로 자동으로 <head>에 CSS 및 JS를 추가할 수 있습니다.

<load target="파일명" targetie="IE 버전" /> IE 버전에 따라 동작이 가능하다. (ie9 이하에서만 targetie를 지원합니다.)
<load target="파일명" index="우선순위" /> 우선순위가 낮을수록 먼저 선언된다.
<load target="파일명.js" type="body" /> js파일을 <body>의 하단부에서 불러온다.
<load target="파일명.css" media="미디어쿼리" /> css파일을 미디어쿼리로 구분하여 동작하도록 설정한다.
<load target="파일명" device="디바이스" /> 디바이스의 종류에 따라 구분하여 동작하도록 설정한다.

1. 기본 사용법

<load target="skin_ie6.css" targetie="IE 6" /> IE 6 에서만 동작하며 이외의 브라우저에선 주석처리 된다.
<load target="skin_ie7.js" targetie="IE 7" /> IE 7 에서만 동작하며 이외의 브라우저에선 주석처리 된다.
<load target="skin_aaa.css" index="-3" /> 우선순위가 -3인 skin_aaa.css를 추가한다.
<load target="skin_bbb.js" index="-2" /> 우선순위가 -2인 skin_bbb.js를 추가한다.
<load target="skin_ccc.js" type="body" /> <body>의 하단부에 skin_ccc.js를 추가한다.
  • 사용방법

    <load target="skin_ie6.css" targetie="IE 6" />
    <load target="skin_ie7.js" targetie="IE 7" />
    <load target="skin_aaa.css" index="-3" />
    <load target="skin_bbb.js" index="-2" />
    <load target="skin_ccc.js" type="body" />
    
  • 변환된 html 소스코드

    <head>
    	<link rel="stylesheet" type="text/css" href="skin_aaa.css" />
    	<script src="skin_bbb.js"></script>
    	<!--[if IE 6]>
    		<link rel="stylesheet" type="text/css" href="skin_ie6.css" />
    	<![endif]-->
    	<!--[if IE 7]>
    		<script src="skin_ie7.js"></script>
    	<![endif]-->
    	<link rel="stylesheet" type="text/css" href="skin_ddd.css" media="all"/>
    </head>
    
    <body>
    	... 내용 ...
    	<script src="skin_ccc.js"></script>
    </body>
    

2. 미디어쿼리 사용하기 (css)

웹브라우저의 가로크기를 체크하여, 특정 크기에서만 동작하도록 설정이 가능합니다.

반응형웹에서 응용하여 사용하는데 편리합니다.

<load target="skin_mobile.css" media="all" /> 모든 사이즈에서 동작합니다. (주로 모바일 css 에서 사용합니다.)
<load target="skin_tablet.css" media="only all and (min-width:768px)" /> 태블릿, 데스크탑에서 동작합니다. (태블릿 기준 사이즈(768px) 보다 클 경우 동작합니다.)
<load target="skin_pc.css" media="only all and (min-width:1024px)" /> PC에서 동작합니다. (PC 기준 사이즈(1024px) 보다 클 경우 동작합니다.)
<load target="skin_custom.css" media="only all and (min-width:400px) and (max-width:800px)" /> 가로크기가 400~800px 사이일 경우 동작합니다. (수치를 변경하여 원하는 형태로 사용이 가능합니다.)

3. 디바이스 구분 사용하기

PC웹브라우저, 모바일기기, 하이브리드APP 3가지의 디바이스를 구분하여 동작하도록 설정이 가능합니다.

<load target="devide_pc.css" device="pc" /> PC웹브라우저로 접속 시 동작합니다.
<load target="devide_mobile.css" device="mobile" /> 모바일기기로 접속 시 동작합니다.
<load target="devide_app.css" device="app" /> 하이브리드APP으로 접속 시 동작합니다.


PC웹브라우저에서 모바일사이트(m.)를 보더라도 pc 로 인식합니다.
모바일기기에서 PC웹을 보더라도 mobile 로 인식합니다.
모바일기기에서 하이브리드APP으로 접속할 경우 app 으로 인식합니다.