JQuery Tip!!

                                                               test code 

 

 

1. 브라우저 크기에 따른 스타일적용(다른 내용으로 보이도록하기)

 

아래와 같은 코드를 적용합니다.

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

 

아래의 코드를 예로 들어보면

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

line 1 은 브라우저의 폭이 599까지이면 mobile이라는 css 스타일을 적용

 

line 2 는 브라우저의 폭이 600보다 크면 desktop이라는 css 스타일 적용

 

 

아래의 코드를 작성했다고 하면

 

<div id="pc_view">
        <p >
            <span>T</span>
                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.
        </p>
    </div>
   
    <div id="mobile_view">
        <p>
            <span><img src="http://www.w3.org/Icons/WWW/w3c_home_nb"></span>
                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.</p>
   </div>

아래와 같이 보일 것입니다.

 

모바일 버전(width가 599px 이하)일때 

 

이것은 데스크탑버전(width가 600px 이상)일때

 

 

 

2. 공통되는 스타일 코드하나로 적용하기

 

아래와 같이 스타일 태그 안에 넣어주면 됩니다.

 

<style>
   your style code.
</style>

예를 들어 h2태그는 컬러를 빨간색으로 칠해보죠

<style type="text/css">
    h2{
    color:#F00;
    }
</style>

 

 

그리고 h3태그와 h2태그를 같은 내용으로 적어줍니다.

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

그럼 아래의 h2태그만 색이 변한 것을 볼 수 있습니다.

 

 

 

3. 폰트 적용하기 

 

폰트적용 코드는 아래와 같습니다.

 

font-family:your font...;

 

이번에도 h2와 h4를 다르게 적용해보죠~

 

h2{
    color:#F00;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
}
h4{
    color:#0F0;
    font-family:"Comic Sans MS", cursive;
    font-size:15px;
}

그럼 아래와 같이 적용된 것을 볼 수 있습니다.