빈집 채우는 중

<?php

echo <<< EOD

{

    "type" : "buttons",

    "buttons" : ["공지사항 확인", "도움말", "직접 소통하기"]

}

EOD;

?>

<?php

include_once 'Snoopy.class.php';

function rtn_message(){

           $snoopy = new snoopy;

           $snoopy->fetch("http://cs.kw.ac.kr/department_office/lecture.php");

           $txt = $snoopy->results;

           $cs_link = "http://cs.kw.ac.kr";

           $rex = "/^site_type=3\"\>.+\<\/a\>$/i";

           $rex_a = "|<a[^>]+>(.*)</a>|U";

           $rex_sbj = "/\<td class=\"subject\"\>(.*)\<\/td\>/i";

           $rex_tr = "/\<tr\>(.*)\<\/tr\>/i";

           $rex_date = "/[0-9]{4}\-[0-9]{2}\-[0-9]{2}/";

           $exp_tr = explode("<tr>",$txt);

           $now_date = date("Y-m-d",strtotime("+9 hours"));

           $n_date = date_create(date("Y-m-d"));

           $message = "";

           for($i = 5;$i<11;$i++){

                     $date = "";

                     $url_a_tag = explode("\"",$exp_tr[$i]);

                     $whole_url = $cs_link . $url_a_tag[5];

                     $slice_a = $url_a_tag[6];

                     $title_str = substr($url_a_tag[6],3,strlen($url_a_tag[6])-19);

                     preg_match_all($rex_date,$exp_tr[$i],$date);

                     $t_date = date_create($date[0][0]);

                     $interval = date_diff($n_date,$t_date);

                     if($interval->days<=14){

                                // print($date[0][0]);

                                $message = $message."게시일: ".$date[0][0]."\\n";

                                $message = $message.$whole_url."\\n";

                                $message = $message."\\n";

                     }

           }

           if($message==""){

                     $message="최근 14일간 올라온 공지사항이 없습니다.";

           }

           return $message;

}

$data = json_decode(file_get_contents('php://input'));

if($data->content == "공지사항 확인"){

           $message = rtn_message();

           echo <<< EOD

{

           "message":{

                     "text": "$message"

           },

           "keyboard":{

                     "type": "buttons",

                     "buttons" : ["알림 시작하기", "도움말", "직접 소통하기"]

           }

}

EOD;

}

if($data->content == "도움말"){

           echo <<< EOD

{

           "message":{

                     "text": "소프트웨어학부 제2대 학생회 [프리]입니다. \\n프리의 플러스친구는 소프트웨어학부의 최근 14일간 공지사항을 버튼 하나로 자동으로 알려주는 기능을 하고 있습니다. \\n또한, 학생회에 질문하거나 전달하고 싶으신 말씀이 있으면 여기에 남겨주세요.",

                     "photo":{

                                "url": "http://server_url/kakao_auto/pree1.jpg",

                                "width": 600,

                                "height": 600

                     },

                      "message_button":{

                                "label": "소프트 학생회 페이스북",

                                "url": "http://www.facebook.com/softwarekw/"

                     }

           },

           "keyboard":{

                     "type": "buttons",

                     "buttons" : ["알림 시작하기", "도움말", "직접 소통하기"]

           }

}

EOD;

}

if($data->content == "직접 소통하기"){

           echo <<< EOD

{

           "message":{

                     "text": "소프트웨어학부 제2대 학생회 [프리]입니다. \\n전달하고자 하시는 말씀이 있으시면 여기에 메세지를 남겨주세요. 최대한 빠르게 확인하여 답변 드리도록 하겠습니다."

           },

           "keyboard":{

                     "type": "text"

           }

}

EOD;

}

?>

function Ultra(){}

Ultra.prototype.ultraProp = true;

function Super(){}

Super.prototype = new Ultra();

function Sub(){}

Sub.prototype = new Super();

var o = new Sub();

console.log(o.ultraProp);

var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');

function getRandomValueFromArray(haystack){

    var index = Math.floor(haystack.length*Math.random());

    return haystack[index];

}

alert(getRandomValueFromArray(arr));

Array.prototype.rand = function(){

    var index = Math.floor(this.length*Math.random());

    return this[index];

}

var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');

alert(arr.rand());

Object.prototype.contain = function(neddle) {

    for(var name in this){

        if(this[name] === neddle){

            return true;

        }

    }

    return false;

}

var o = {'name':'BinZIP', 'city':'seoul'}

alert(o.contain('BinZIP'));

var a = ['BinZIP','supernice','bin'];

alert(a.contain('supernice'));

for(var name in o){

    console.log(name); 

}

for(var name in o){

    if(o.hasOwnProperty(name))

        document.write(name+'<br/>'); 

}

var str='hello';

document.write(str.length);

document.write('<br/>');

document.write(str.charAt(0));

var a = {'id':1};

var b = a;

alert(b.id);

var a = {'id':1};

var b = a;

b.id=2;

alert(a.id);

var a = 1;

var b = a;

b = 2;

alert(a+' '+b);

var a = {'id':1};

function func(b){

    b = {'id':2};

}

func(a);

alert(a.id);

var a = {'id':1};

function func(b){

    b.id = 2;

}

func(a);

alert(a.id);

function Person(name){

    this.name = name;

    this.introduce = function(){

        return 'My name is '+this.name;

    }  

}

var p1 = new Person('BinZIP');

document.write(p1.introduce()+"<br />");

var p2 = new Person('supernice');

document.write(p2.introduce());

var o = {'func':function(){

    alert('Hello?');

}}

o.func();

window.o.func();

function func(){

    if(window === this){

        document.write("window === this");

    }

}

func();

var o = {

    func : function(){

        if(o === this){

            document.write("o === this");

        }

    }

}

o.func();

var funcThis = null;

function Func(){

    funcThis = this;

}

var o1 = Func();

if(funcThis === window){

    document.write('window <br />');

}

var o2 = new Func();

if(funcThis === o2){

    document.write('o2 <br />');

}

var o = {}

var p = {}

function func(){

    switch(this){

        case o:

            document.write('o<br />');

            break;

        case p:

            document.write('p<br />');

            break;

        case window:

            document.write('window<br />');

            break;         

    }

}

func();

func.apply(o);

func.apply(p);

function Person(name){

    this.name = name;

    this.introduce = function(){

        return 'My name is '+this.name;

    }  

}

var p1 = new Person('BinZIP');

document.write(p1.introduce()+"<br />");

function Person(name){

    this.name = name;

}

Person.prototype.name=null;

Person.prototype.introduce = function(){

    return 'My name is '+this.name;

}

var p1 = new Person('egoing');

document.write(p1.introduce()+"<br />");

function Person(name){

    this.name = name;

}

Person.prototype.name=null;

Person.prototype.introduce = function(){

    return 'My name is '+this.name;

}

function Programmer(name){

    this.name = name;

}

Programmer.prototype = new Person();

var p1 = new Programmer('BinZIP');

document.write(p1.introduce()+"<br />");

function Person(name){

    this.name = name;

}

Person.prototype.name=null;

Person.prototype.introduce = function(){

    return 'My name is '+this.name;

}

function Programmer(name){

    this.name = name;

}

Programmer.prototype = new Person();

Programmer.prototype.job = function(){

    return "Job : Programmer";

}

var p1 = new Programmer('BinZIP');

document.write(p1.introduce()+"<br />");

document.write(p1.job()+"<br />");

function outter(){

    var title = 'coding everybody'; 

    return function(){       

        alert(title);

    }

}

inner = outter();

inner();

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

alert(ghost.get_title());

alert(matrix.get_title());

ghost.set_title('공각기동대');

alert(ghost.get_title());

alert(matrix.get_title());

var arr = []

for(var i = 0; i < 5; i++){

    arr[i] = function(){

        return i;

    }

}

for(var index in arr) {

    document.write(arr[index]()+'<br/>');

}

var arr = []

for(var i = 0; i < 5; i++){

    arr[i] = function(id) {

        return function(){

            return id;

        }

    }(i);

}

for(var index in arr) {

    document.write(arr[index]()+’<br/>’);

}

function sum(){

    var i, _sum = 0;   

    for(i = 0; i < arguments.length; i++){

        document.write(i+' : '+arguments[i]+'<br />');

        _sum += arguments[i];

    }  

    return _sum;

}

alert('result : ' + sum(1,2,3,4));

function zero(){

    document.write(

        'zero.length : ', zero.length+'<br/>',

        'arguments : ', arguments.length+'<br/>'

    );

}

function one(arg1){

    document.write(

        'one.length : ', one.length+'<br/>',

        'arguments : ', arguments.length+'<br/>'

    );

}

function two(arg1, arg2){

    document.write(

        'two.length : ', two.length+'<br/>',

        'arguments : ', arguments.length+'<br/>'

    );

}

zero();

one('val1', 'val2');

two('val1');

function func(){

}

func();

function sum(arg1, arg2){

    return arg1+arg2;

}

alert(sum.apply(null, [1,2]))

o1 = {val1:1, val2:2, val3:3};

o2 = {v1:10, v2:50, v3:100, v4:25};

function sum(){

    var _sum = 0;

    for(name in this){

        _sum += this[name];

    }

    return _sum;

}

document.write(sum.apply(o1));

document.write('<br/>');

document.write(sum.apply(o2));

var vscope = 'global';

function fscope(){

    var vscope = 'local';

    alert('함수안 '+vscope);

}

fscope();

alert('함수밖 '+vscope);

var vscope = 'global';

function fscope(){

    vscope = 'local';

    alert('함수안'+vscope);

}

fscope();

alert('함수밖'+vscope);

MYAPP = {}

MYAPP.calculator = {

    'left' : null,

    'right' : null

}

MYAPP.coordinate = {

    'left' : null,

    'right' : null

}

MYAPP.calculator.left = 10;

MYAPP.calculator.right = 20;

function sum(){

    return MYAPP.calculator.left + MYAPP.calculator.right;

}

(function(){

    var MYAPP = {}

    MYAPP.calculator = {

        'left' : null,

        'right' : null

    }

    MYAPP.coordinate = {

        'left' : null,

        'right' : null

    }

    MYAPP.calculator.left = 10;

    MYAPP.calculator.right = 20;

    function sum(){

        return MYAPP.calculator.left + MYAPP.calculator.right;

    }

    document.write(sum());

}())

var i = 5;

function a(){

    var i = 10;

    b();

}

function b(){

    document.write(i);

}

a();

function cal(func, num){

    return func(num)

}

function increase(num){

    return num+1

}

function decrease(num){

    return num-1

}

alert(cal(increase, 1));

alert(cal(decrease, 1));

function cal(mode){

    var funcs = {

        'plus' : function(left, right){return left + right},

        'minus' : function(left, right){return left - right}

    }

    return funcs[mode];

}

alert(cal('plus')(2,1));

alert(cal('minus')(2,1));

var process = [

    function(input){ return input + 10;},

    function(input){ return input * input;},

    function(input){ return input / 2;}

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

alert(input);

function sortNumber(a,b){

    return b-a;

}

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];

alert(numbers.sort(sortNumber));

var pattern = /a/

var pattern = new RegExp(‘a’);

alert(pattern.exec(‘asdf1234’));

alert(pattern.exec(‘qwerzxcv’));

alert(pattern.test(‘asdf1234’));

alert(pattern.test(‘qwerzxcv’));

alert(‘asdf1234’.match(pattern));

alert(‘qwerzxcv’.match(pattern));

alert(‘asdf1234’.replace(pattern,’q’));

alert(‘qwerzxcv’.replace(pattern,’q’));

var Check = /a/;

var CheckAll = /a/g;

alert('asdfasdfasdf'.match(Check));

alert('asdfasdfasdf'.match(CheckAll));

var pattern = /(\w+)\s(\w+)/;

var str = "coding everybody";

var result = str.replace(pattern, "$2, $1");

alert(result);

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;

var content = '빈집 채우는 중 : http://binzip2.tistory.com 입니다.';

var result = content.replace(urlPattern, function(url){

    return '<a href="'+url+'">'+url+'</a>';

});

alert(result);

function add( var a, var b ){

           alert(a);

           alert(b);

           return a+b;

}

var 배열명 = [‘첫 번째 요소’, ‘두 번째 요소’, …]

var level = {‘BinZIP’:1, ‘Newbie’:1, ‘ZzangHacker’:999};

var level = new Object();

level[‘BinZIP’] = 1;

level[‘Newbie’] = 1;

level[‘ZzangHacker’] = 999;

var grade = {

           'list': {'BinZIP':1,'Newbie':1,'ZzangHacker':999},

           'show': function(){

                     for(var name in this.list){

                                alert(name+':'+this.list[name]);

                     }

           }

};

grade.show();

<script scr=”모듈의 주소”></script>

<!DOCTYPE html>

<html>

<head>

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

</head>

<body>

    <ul id="list">

        <li>empty</li>

        <li>empty</li>

        <li>empty</li>

        <li>empty</li>

    </ul>

    <input id="execute_btn" type="button" value="execute" />

    <script type="text/javascript">

     $('#execute_btn').click(function(){

        $('#list li').text('coding everybody');

     })

    </script>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

    <ul id="list">

        <li>empty</li>

        <li>empty</li>

        <li>empty</li>

        <li>empty</li>

    </ul>

    <input id="execute_btn" type="button" value="execute" />

    <script type="text/javascript">

    function addEvent(target, eventType,eventHandler, useCapture) {

        if (target.addEventListener) { // W3C DOM

            target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);

        } else if (target.attachEvent) {  // IE DOM

            var r = target.attachEvent("on"+eventType, eventHandler);

        }

    }

    function clickHandler(event) {

        var nav = document.getElementById('list');

        for(var i = 0; i < nav.childNodes.length; i++) {

            var child = nav.childNodes[i];

            if(child.nodeType==3)

                continue;

            child.innerText = 'Coding everybody';

        }

    }

    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);

    </script>

</body>

</html>

<!DOCTYPE html>

<html>

           <head>

                     <meta charset="utf-8">

                     <title>Exercise </title>

           </head>

           <body>

                     <script>

                                alert('Hello, World!');

                     </script>

           </body>

</html>

#cssex10_1.css

@charset "utf-8";

body { display:block; width:950px; margin:0; padding:0; }

#head_area { float:left; width:100%; background-color:yellow; }

#foot_area { clear:both; width:100%; background-color:yellow; }

#wrapper { width:950px; }

#left_area { float:left; width:200px; background-color:aqua; min-height:100px; }

#content_area { float:left; width:300px; background-color:#fff; min-height:100px; }

#right_area { float:left; width:150px; background-color:skyblue; min-height:100px; }

#cssex10_2.html

<head>

             <title> 레이아웃 구성하기 </title>

             <meta charset="utf-8" />

             <link href="./cssex10_1.css" rel="stylesheet" />

</head>

<body>

             <div id="head_area"> HEADER </div>

             <div id="wrapper">

                           <div id="left_area"> LEFT </div>

                           <div id="content_area"> CONTENT </div>

                           <div id="right_area"> RIGHT </div>

             </div>

             <div id="foot_area"> FOOTER </div>

</body>

#cssex11_1.css

@charset "utf-8";

body { text-align:center; padding:0; margin:0; }

header { width:100%; background-color:yellow; }

footer { width:100%; background-color:yellow; }

section { width:100%; box-orient:horizontal; display:box; display:-moz-box; display:-webkit-box; }

#box-1 { box-flex:1; -webkit-box-flex:1; min-height:100px; background-color:aqua; }

#box-2 { box-flex:1; -webkit-box-flex:1; min-height:100px; background-color:#ccc; }

#box-3 { box-flex:1; -webkit-box-flex:1; min-height:100px; background-color:aqua; }

#cssex11_2.html

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 유연한 박스 모델 구성하기 </title>

                           <meta charset="utf-8" />

                           <link href="./cssex11_1.css" rel="stylesheet" />

             </head>

             <body>

                           <header>

                           <h1> HEADER </h1>

                           <p> 머리글 영역입니다. </p>

                           </header>

                           <section>

                                        <nav id="box-1">

                                                     <h1> LEFT </h1>

                                                     <p> 이곳은 왼쪽 영역입니다. </p>

                                                     <p> 내비게이션을 주로 작성하는 곳으로 사용됩니다. </p>

                                        </nav>

                                        <article id="box-2">

                                                     <h1> CONTENT </h1>

                                                     <p> 이곳은 가운데 영역입니다. </p>

                                                     <p> 주요 본문을 주로 작성하는 곳으로 사용됩니다. </p>

                                        </article>

                                        <aside id="box-3">

                                                     <h1> RIGHT </h1>

                                                     <p> 이곳은 오른쪽 영역입니다. </p>

                                                     <p> 어사이드 내용을 주로 작성하는 곳으로 사용됩니다. </p>

                                        </aside>

                           </section>

                           <footer>

                                        <h1> FOOTER </h1>

                                        <p> 바닥글 영역입니다. </p>

                           </footer>

             </body>

</html>

#cssexadv_1.css

@charset"utf-8";

* { margin:0; }

ul, li { list-style:none; }

a { color:#fff; text-decoration:underline; }

a:hover { color:#000; text-decoration:none; }

.gnb{padding:0}

.gnb a {width:135px; padding:0 5px 0 5px; display:block; text-decoration:none; }

.gnb li { position:relative; float:left; margin-right:11px; }

.gnb li a { height:50px;text-align:center; line-height:50px; font-size:1.05em; color:#000; }

.gnb li a:hover { color:#09f; }

.gnb li ul { display:none; position:absolute; top:50px; left:0; }

.gnb li:hover ul { display:block; }

.gnb li ul a {width:120px; height:35px; background-color:#000; color:#fff; text-align:center; line-height:37px; border-bottom:1px solid #fff; }

.gnb li ul a:hover { background-color:#555; }

#wrap{width:980px; height:auto; float:left;}

#main_menu{width:700px; height:50px; float:left; background:#92c121;}

#cssexadv_2.html

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title>메인 메뉴</title>

                           <meta charset="utf-8" />

                           <link href="./cssexadv_1.css" rel="stylesheet" />

             </head>

             <body>

                           <div id="wrap">

                                        <div id="main_menu">

                                                     <ul class="gnb">

                                                                  <li>

                                                                                <a href="http://binzip2.tistory.com" title="블로그 이동">블로그 이동</a>

                                                                  </li>

                                                                  <li>

                                                                                <a href="/index.php/1" title="웹 프로그래밍">웹 프로그래밍</a>

                                                                                <ul>

                                                                                             <li>

                                                                                                          <a href="/index.php/1" title="HTML">HTML</a>

                                                                                             </li>

                                                                                             <li>

                                                                                                          <a href="/index.php/2" title="CSS">CSS</a>

                                                                                             </li>

                                                                                             <li>

                                                                                                          <a href="/index.php/3" title="JS">JS</a>

                                                                                             </li>

                                                                                </ul>

                                                                  </li>

                                                                  <li>

                                                                                <a href="/board/sub.php/list" title="방문자 게시판">방문자 게시판</a>

                                                                                <ul>

                                                                                             <li>

                                                                                             <a href="/board/sub.php/list" title="자유게시판">자유게시판</a>

                                                                                             </li>

                                                                                </ul>

                                                                  </li>

                                                                  <li>

                                                                                <a href="/member/sub.php/login" title="로그인">로그인</a>

                                                                                <ul>

                                                                                             <li>

                                                                                                          <a href="/member/sub.php/login" title="로그인">로그인</a>

                                                                                             </li>

                                                                                             <li>

                                                                                                          <a href="/member/sub.php/join" title="회원가입">회원가입</a>

                                                                                             </li>

                                                                                </ul>

                                                                  </li>

                                                     </ul>

                                        </div>

                           </div>

             </body>

</html>

@charset "utf-8"; p {

font-style:italic; color:blue;

}

* { margin:0; padding:0; }

태그 { 속성:값; }

#id명 { 속성:값; }

.클래스명 { 속성:값; }

<body>

             <p style="color:blue;"> 인라인

                           <span style="color:red;"> 스타일입니다.

                           </span>

             </p>

             <p> 일반 스타일입니다.

             </p>

</body>

<head>

             <style>

             p { font-size:12pt; color:red; text-align:center; }

             </style>

</head>

<body>

             <p> 내부 스타일입니다.

             </p>

             <span> 일반 스타일입니다.

             </span>

</body>

#cssex3_1.css

@charset "utf-8";

p{ display:block; font-size:20pt; color:green;

text-align:right; border:5px double red; }

#cssex3_2.html

<head>

             <link rel="stylesheet" href="./cssex3_1.css" />

</head>

<body>

             <pre>

                           <p>

외부 스타일이 적용되어 블록이 설정되고

블록의 테두리 두께는 5px, 빨간 이중선으로, 글자는 녹색의 20pt로 블록의 오른쪽에 나타납니다.

                           </p>

             </pre>

             <span>

             일반 스타일입니다.

             </span>

</body>

#cssex4_1.css

@charset "utf-8";

body { text-align:center; }

#txt1 { font-size:28px; color:rgba(0,0,255, 0.7); }

.over1 { font-family:"궁서", Arial;

width:200px; height:100px; margin:10px auto;

line-height:1.5; overflow:auto; border:1px solid #ccc; }

#cssex4_2.html

<head>

             <title> 글자 효과 지정 </title>

             <meta charset="utf-8" />

             <link rel="stylesheet" href="./cssex4_1.css" />

</head>

<body>

             <div id="txt1"> 글자 관련 스타일 </div>

             <br />

             <br />

             <div class="over1"> 글자 관련 스타일 속성을 이용하여 글꼴, 글자크기와모양,색상,표현범위지정등을설정한다.이외에도자간,굵기,줄간격을설정할수있다.

             </div>

</body>

#cssex5_1.css

@charset "utf-8";

h1 { text-align:center; text-indent:50px; }

#text1 { text-transform:capitalize; }

#text2 { text-decoration:underline; }

#text3 { text-decoration:line-through; }

a:link { text_decoration:none; }

a:hover { text-decoration:underline; color:red; }

#cssex5_2.html

<head>

             <title> 문단과 링크 효과 설정 </title>

             <meta charset="utf-8" />

             <link rel="stylesheet" href="./cssex5_1.css" />

</head>

<body>

             <h1> 문단과 링크 효과 </h1>

             <p id="text1"> CSS3의 문장과 문단 style </p>

             <p id="text2"> 문장 밑줄 효과(underline) </p>

             <p id="text3"> 문장 취소선 효과(line-through) </p>

             <a href="http://www.naver.com"> 네이버로 이동 </a>

             <br />

             <br />

             링크 위에 마우스를 올리면 밑줄이 나타납니다. <br />

</body>

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 여백과 위치 지정 </title>

                           <meta charset="utf-8" />

                           <style>

                                        body { margin:0; padding:0; }

                                        p, div { display:block; margin:50px 10px; width:300px; text-align:center; background:#ddd; }

                                        .text1 { border:1px solid red; color:green; float:left; }

                                        .text2 { border:3px dotted green; float:left; }

                           </style>

             </head>

             <body>

                           <div class="text1"> 여백과 위치 1 </div>

                           <p class="text2">여백과위치2 </p>

             </body>

</html>

<head>

             <style>

             body { margin:0; padding:0; }

             #main_menu { background:#aaa; }

             #main_menu li { padding:5px; display:inline-block; list-style:none; }

             </style>

</head>

<body>

             <nav id="main_menu">

                           <ul>

                                        <li> 회사 소개 | </li>

                                        <li> 공지사항 | </li>

                                        <li> 자주 묻는 질문 | </li>

                                        <li> 자유게시판 </li>

                           </ul>

             </nav>

</body>

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 테두리와 아웃라인 </title>

                           <meta charset="utf-8" />

                           <style>

                                        body { text-align:center; font:bold 16px Arial; }

                                        .box1 { display:block; width:600px; height:100px; border:2px solid red; outline:3px dotted #00f; outline-offset:10px; }

                           .box2 { display:block; width:600px; height:100px; border:3px dashed #000; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; }

                           </style>

             </head>

             <body>

                           <h2> 테두리와 아웃라인 효과 </h2>

                           <p class="box1"> 높이100px,너비300px크기의블록에 <br/>

                           빨간색 단선 테두리와 <br />

                           파란색 점 아우트라인 효과를 준 스타일입니다. </p>

                           <br />

                           <p class="box2"> 높이100px,너비300px크기의블록에<br/>

                           대시 테두리, <br />

                           박스의 둥근 모서리 효과를 준 스타일입니다. </p>

             </body>

</html>

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 배경 이미지 </title>

                           <meta charset="utf-8" />

                           <style>

                                        body { background:url("./LA1.png"); background-repeat:no-repeat; background-size:cover; text-align:center; }

                                        #title { display:block; width:300px; height:30px; text-align:center; margin:50px auto; border:1px solid; border-radius:20px; background:-webkit-linear-gradient(top,#fff,#000); }

                                        #font1 { color:rgb(255,255,255); font-size:16px; }

                           </style>

             </head>

             <body>

                           <p id="title"> 그래디언트 배경 설정 </p>

                           <p id="font1" > 배경 이미지가 가로/세로 크기 비율은 고정되고

                           이미지의 가로 크기만 본문의 가로 크기에 맞추어 집니다. </p>

             </body>

</html>