J-query Tip

한글 블로그로 보기


test code

1. Change the style by browser size.

We use this code.

<link href="size_1.css" rel="stylesheet" type="text/css" media="screen and(max-width:Apx)">

example

1. <link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:599px)">
2. <link href="desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width:600px)">

line 1 means screen size(width) smaller than 599px is mobile page.

line 2 means screen size(width) larger than 600px is pc page.

If my body code is this

1.     <div id="pc_view">
2.         <p >
3.             <span>T</span>
4.                 his is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.
5.         </p>
6.     </div>
7.    
8.     <div id="mobile_view">
9.         <p>
10.             <span><img src="http://www.w3.org/Icons/WWW/w3c_home_nb"></span>
11.                 This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.This is example.</p>
12.    </div>

You can see this

This is mobile page!! 

This is PC page!!

2. Apply to common style.

We will using 'style tag' in head tag.

<style>
   your style code.
</style>

example

1. <style type="text/css">
2.     h2{
3.     color:#F00;
4.     }
5. </style>

This example means 'h2' tag's color is red .

If my body code is

1. <h3> You can see change view.</h3>
2. <h2> You can see change view.</h2>

You can see this

3. Using special font 

Using this style tag.

font-family:your font...;

example

1. h2{
2.     color:#F00;
3.     font-family:Arial, Helvetica, sans-serif;
4.     font-size:15px;
5. }
6. h4{
7.     color:#0F0;
8.     font-family:"Comic Sans MS", cursive;
9.     font-size:15px;
10. }

You can see this