2016년 1월 31일 일요일

[CSS] Box


  • Navigation 메뉴를 구성

   li {
                display: inline;
                margin: 0px 3px;}

<!DOCTYPE html>
<html>
    <head>
        <title>Boxes</title>
        <style type="text/css">
            body {
                font-size: 80%;
                font-family: "Courier New", Courier, monospace;
                letter-spacing: 0.15em;
                background-color: #efefef;}
            #page {
                max-width: 940px;
                min-width: 720px;
                margin: 10px auto 10px auto;
                padding: 20px;
                border: 4px double #000;
                background-color: #ffffff;}
            #logo {
                width: 150px;
                margin: 10px auto 25px auto;}
            ul {
                width: 570px;
                padding: 15px;
                margin: 0px auto 0px auto;
                border-top: 2px solid #000;
                border-bottom: 1px solid #000;
                text-align: center;}
            li {
                display: inline;
                margin: 0px 3px;}
            p {
                text-align: center;
                width: 600px; 
                margin: 20px auto 20px auto; 
                font-weight: normal;}
            a {
                color: #000000;
                text-transform: uppercase;
                text-decoration: none;
                padding: 6px 18px 5px 18px;}
            a:hover, a.on {
                color: #cc3333;
                background-color: #ffffff;}
        </style>
    </head>
    <body>
        <div id="page">
            <div id="logo">
                <img src="images/logo.gif" alt="The Analog Specialists" />
            </div>
            <ul id="navigation">
                <li><a href="#" class="on">Home</a></li>
                <li><a href="#">For Sale</a></li>
                <li><a href="#">Repairs</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <p>
                <img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
            </p>
            <p>
                We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
            </p>
        </div>
    </body>
</html>
cs
작성자: 시간: 댓글 없음:
라벨:

[CSS] margin



<!DOCTYPE html>
<html>
    <head>
        <title>Centering Content</title>
        <style type="text/css">
            body {
                text-align: center;}
            p {
                width: 300px;
                padding: 50px;
                border: 20px solid #0088dd;}
            /*
                margin : top right bottom left
                auto로 주면 동일하게 여백을 줘서, 가운데 정렬이 된다.
            */
            p.example {
                margin: 10px auto 10px auto;
                text-align: left;}
        </style>
    </head>
    <body>
        <p>jteve</p>
        <p class="example">jteve</p>
    </body>
</html>
cs

작성자: 시간: 댓글 없음:
라벨:

2016년 1월 30일 토요일

[CSS] font, text


<!DOCTYPE html>
<html>
    <head>
        <title>Text</title>
        <style type="text/css">
            /*
            font-family : 설치되어있는 폰트를 앞에서 부터 찾음
            text-shadow : 좌우 상하 그림자크기 색상
            em: 글자 자간
            uppercase : 대문자
            letter-spacing : 자간
            line-height : 행간
            hover:마우스 올라 갔을 때
            active : 눌렀을 때
            */
            body {
                padding: 20px;}
            h1, h2, h3, a {
                font-weight: normal;
                color: #0088dd;
                margin: 0px;}
            h1 {
                font-family: Georgia, Times, serif;
                font-size: 250%;
                text-shadow: 2px 2px 10px #666666;
                padding-bottom: 50px;}
            h2 {
                font-family: "Gill Sans", Arial, sans-serif;
                font-size: 90%;
                text-transform: uppercase;
                letter-spacing: 0.1em;}
            h3 {
                font-size: 200%;}
            p {
                font-family: Arial, Verdana, sans-serif;
                line-height: 3.0em;
                color: #665544;}
            p.intro:first-line {
                font-weight: bold;}
            .credits {
                font-style: italic;    
                text-align: right;}
            a {
                text-decoration: none;}
            a:hover {
                text-decoration: underline;}
        </style>
    </head>
    <body>
        <h1>Briards</h1>
        <h2>A Heart wrapped in fur</h2>
        <p class="intro">The <a class="breed" href="http://en.wikipedia.org/wikiBriard">briard</a>, or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
        <h3>Breed History</h3>
        <p>The briard, which is believed to have originated in France, has been bred for centuries to herd and to protect sheep. The breed was used by the French Army as sentries, messengers and to search for wounded soldiers because of its fine sense of hearing. Briards were used in the First World War almost to the point of extinction. Currently the population of briards is slowly recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
        <p class="credits">by Ivy Duckett</p>
    </body>
</html>
cs
작성자: 시간: 댓글 없음:
라벨:

[CSS] cascade



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
    <head>
        <title>How CSS Rules Cascade</title>
        <style type="text/css">
            /*
             * : 모든 선택자로 우선순위가 낮다.
             */
            * {
                font-family: Arial, Verdana, sans-serif;}
            h1 {
                font-family: "Courier New", Courier, monospace;}
            /*
             Cascade : 뒤에있는 선택자로 덮어 써진다.
             */
            i {
                color: green;}
            i {
                color: red;}
            b {
                color: pink;}
            /*
             Cascade : 뒤에있는 선택자로 덮어 써지지 않기 위해서 !important를 추가한다.
             */
            p b {
                color: blue !important;}
            p b {
                color: violet;}
            /*
             #intro : 첫번째 p에만 적용
             */
            p#intro {
                font-size: 100%;}
            p {
                font-size: 50%;}
        </style>
    </head>
    <body>
        <h1>Potatoes</h1>
        <p id="intro">There are <i>dozens</i> of different <b>potato</b> varieties.</p>
        <p>They are usually described as early, second early and maincrop potatoes.</p>
    </body>
</html>
 
cs
작성자: 시간: 댓글 없음:
라벨:

2016년 1월 28일 목요일

[NodeJS] html read

$ npm init

$ npm install express fs --save


  • package.json
  • node_module
  • app
    • index.html
    • data.json


  • server.js


0. Packgage.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
{
  "name": "app1",
  "version": "1.0.0",
  "description": "first app",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "jteve",
  "license": "MIT",
  "dependencies": {
    "express": "^4.13.4",
    "fs": "0.0.2"
  }
}
 
cs

1. Server.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var express = require('express');
var app = express();
var fs = require('fs');
 
 
app.use(express.static('app'));
 
app.listen(3000,function(){
    console.log('server start 3000');
});
 
app.get('/', function(req,res){
    fs.readFile('app/index.html', function(error,data){
        if(error){
            console.log(error);
        }
        else{
            res.writeHead(200,{'Content-Type':'text/html'});
            res.end(data);
        }
    });        
});
 
cs
2. index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
 
  </head>
  <body ng-app='app'>
     <div ng-controller='DataCtrl'>
       <button ng-click='getTestHttp()'>Http Call </button>
       <h2>{{dataStr}}</h2>
     </div>
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
     <script>
     var app  = angular.module('app',[]);
 
     app.controller("DataCtrl", function($scope, $http){
       $scope.getTestHttp = function(){
           $http({
             method:'GET',
             url:'data.json'
           }).success( function(data, status, headers, config){
             console.log("success" );
             console.dir(data);
           }).error( function(data, status, headers, config){
             console.log("error" );
           });
       };
     });
     </script>
   </body>
 </html>
 
cs



작성자: 시간: 댓글 없음:
라벨:

[AngularJS] Provider service


  • 프로바이더 서비스
  • get 을 이용하는 것 외에는 factory 서비스와 유사하다
  • config을 사용해서, 모듈별로 다른 설정을 해서 사용할 수 있어서 확장이 유연하다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
  </head>
  <body ng-app='helloApp'>
    <div ng-controller='InputController' ng-init="inputNum =0">
    <span>Input</span>
    <input type='text' ng-model='inputNum' ng-click='calcNum()'>
    <p> {{getResult()}}</p>    
    </div>
    
    <div ng-controller='OutputController'>
    <span>Output</span>
    <p> {{getCurrent()}}</p>    
    </div>
        
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
    <script>
    var hello  = angular.module('helloApp',[]);
    //Get 으로 factory 등과 동일하게 작성된다.
    hello.provider('HelloProvider',function() {
      var configValue = 0;
      this.$get = function(){
       return {
          sum: configValue,            
          add:function(num){ this.sum += num;},          
          getSum :function(){return this.sum;}
        };
      };
      this.setStartValue = function(numValue){
        console.log(numValue);
        configValue= numValue;
      };    
    });
    // 다른 점은 각 모듈의 config를 원하는 속성으로 조절해서 사용할 수 있다.
    hello.config(function(HelloProviderProvider) {
      HelloProviderProvider.setStartValue(100);
    });
        
    hello.controller('InputController', function($scope, HelloProvider){
      $scope.getResult = function(){
        return HelloProvider.getSum();
      };
      //마우스 클릭하면, 숫자가 업데이트 된다.
      $scope.calcNum= function(){
        HelloProvider.add(Number($scope.inputNum));
      };      
    });
    
    // input/output 컨트롤러는 하나의 서비스 데이터를 공유한다.
    hello.controller('OutputController', function($scope, HelloProvider){
      $scope.getCurrent = function(){
        return HelloProvider.getSum();
      };    
    });    
    </script>
  </body>
</html>
cs
작성자: 시간: 댓글 없음:
라벨:
피드 구독하기: 글 (Atom)