'publishing'에 해당되는 글 18건

  1. 2017.03.28 if문
  2. 2017.03.25 java script
  3. 2017.03.25 array_test
  4. 2017.03.22 array(배열)
  5. 2017.03.22 number(숫자), variable(변수)
  6. 2017.03.22 string(문자)
  7. 2017.02.26 html5, xhtml, div video, picture 2
  8. 2017.02.26 flaticon, themeforest 1
  9. 2017.02.26 headingmap, cite, figure, pre, details, datalist, blockquote, docttype, charset
  10. 2017.02.25 cascading, position, z-index,

if문

2017. 3. 28. 00:40
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

<script>


  //조건연산자


  var a;

  if(a != true){

    console.log("if");

  } //a가 undifined. true가 아니기때문에 실행

  var a = "apple";

  if(a == "apple"){

    console.log("if : apple");

  }

  if(a == "orange"){

    console.log("if : orange");

  }


  if(a == "apple"){

    console.log(a = "입니다");

  }else{

    console.log("apple이 아니고"+a+"입니다");

  }




  console.log("실행");


  if(1 == 2){

    console.log("if실행");

  }

//true면 실행, false면 실행하지 않는다.

  console.log("실행끝");





//example 과일

var text = prompt("과일을 입력하세요");

if(text == "apple"){

  console.log(text);

}else if(text == "orange"){

  console.log(text);

}else if(text == "pineapple"){

  console.log(text);

}


//example 홀짝만들기

var text = prompt("숫자를 입력하세요");

if(text%2==1){

  console.log("홀수");

}else if(text%2==0){

  console.log("짝수");

}

//홀짝 2

var num = prompt("숫자를 입력하세요");

var tt = num%2;

if(tt == 0){

  alert('짝');

}else if(tt == 1){

  alert('홀');

}else{

  alert('숫자아님');     

}

</script>



'publishing > java script' 카테고리의 다른 글

java script  (0) 2017.03.25
array_test  (0) 2017.03.25
array(배열)  (0) 2017.03.22
number(숫자), variable(변수)  (0) 2017.03.22
string(문자)  (0) 2017.03.22

java script

2017. 3. 25. 00:38
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.



   javascript


    core  ->  일반적으로 사용 

    dom  ->  문서에 접근해서 사용

(document object model)


   #id = id선택할떄

   document.getElementById(id)  -> 자스문법이 너무 어려워서

   $('#id')                                       -> 자주 쓰는걸 제이쿼리로 쉽게


   ECMAscript6(2016)

     Angular

     React


   javascript

   library -> jQuery

                    React 일방향

   framework -> Angular  

                           Cencha 양방향

   flatform


   node js

   브라우저가 자바스크립트를 해석하고

   pc는 할수없는데 node.js를 설치하면 pc가 해석할수있다.

   pc에서 스크립트 코딩을 할수있다!

   클라이언트(우리가 쓰고있는 윈도우같은 프로그램)에서 구동되는 해석언어


   php

   DB(database)   -   SQL  php배우기전에 sql부터


   html, css

   javascript  >  Express   > NoSQL MongoDB


   javascript Core

   jQuery

   Ecpress

   MongoDB


     view엔진   jade

     미들웨어    ejs

                        swig

                        handlebar    ->하는일은 똑같음. 선택해서 사용


   배우게 되는것들

     문자 string

     숫자 number

     상수

     변수 variable

     연산자

     배열 array

     조건문 if

     반복문 for

     함수 function

             -리터럴 함수

             -보이드 함수

             -인자 함수

             -콜백

             -클로저

     객체 object





'publishing > java script' 카테고리의 다른 글

if문  (0) 2017.03.28
array_test  (0) 2017.03.25
array(배열)  (0) 2017.03.22
number(숫자), variable(변수)  (0) 2017.03.22
string(문자)  (0) 2017.03.22

array_test

2017. 3. 25. 00:17
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.




  <script>


    var text1 = ['일단','어디보자','음...','아몰랑'];

    var text2 = ['똘끼','어여쁨','귀여움','흥','술','잘생김'];

    var text3 = ['한숟갈','두숟갈','헉....쏟았다','없네...','있긴하네'];



//  console.log(text1.length);   -> 4

//  console.log(Math.random()*10);   -> 0부터 10미만의 실수를 생성

//  console.log(Math.floor(1.123423));   -> 뒤에 난수를 절삭해줌

//  console.log(Math.floor(Math.random()*10));   

  또는

//  var ran=Math.random()

//  console.log(Math.floor(ran);


//  var ran = Math.random()*4;

//  var num1 = Math.floor(ran);



    var num1 = Math.floor(Math.random()*text1.length);

    var num2 = Math.floor(Math.random()*text2.length);

    var num3 = Math.floor(Math.random()*text3.length);

 

    var user = prompt("당신의 이름을 입력하세요");

    console.log(user);


    document.write(user+"을(를) 만들어볼까?");

    document.write(text1[num1]+text2[num2]+text3[num3]);


  </script>





'publishing > java script' 카테고리의 다른 글

if문  (0) 2017.03.28
java script  (0) 2017.03.25
array(배열)  (0) 2017.03.22
number(숫자), variable(변수)  (0) 2017.03.22
string(문자)  (0) 2017.03.22
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.





   var ppap = ["파인애플","팬","애플"];  -> 배열은 [ ]

                            0          1       2        -> 순서는0부터 센다


   console.log(ppap[0]);  -> 파인애플

   console.log(ppap[1]);   -> 팬

   console.log(ppap[2]);  -> 애플

   console.log(ppap[0] + ppap[1] + ppap[2] + ppap[1]);  -> 파인애플팬애플팬


   var pp = ppap[0] + ppap[1] + ppap[2] + ppap[1];

   console.log(pp);  -> 파인애플팬애플팬





   //




   var a = new Array();


   var txt = prompt("써.");


   a.push(txt);  -> a에 txt를 push

   console.log(txt);  -> txt확인


   a = [1,2,3,4,5,6,7]

   a.splice(0,1);  -> 0은 시작점, 1은 갯수 [2,3,4,5,6,7]

                         -> 배열자리 0부터   -삭제


   a.splice(0,1,"hi");  -> 빠진자리에 hi를 넣는다.  -수정

   a[1] = "his";  -> 다른수정방법. a배열 1을 "his"로 수정

   console.log(a);


   var multi = ["orange","apple"];

   console.log(multi[0]);  -> orange



                      0  1  2 3  4 5

   var multi = [[],[],[],[],[],[]]  ->이차원배열

   var multi = [

     0["권서정","조성국","김서영","김해정"],

     1["권서연","선광민","김현숙","권인주"]

   ]  ->이차원배열

   console.log)multi[0][2]);  -> 조성국


   var aaa = [[[],[],[]],[]] ->삼차원배열






'publishing > java script' 카테고리의 다른 글

if문  (0) 2017.03.28
java script  (0) 2017.03.25
array_test  (0) 2017.03.25
number(숫자), variable(변수)  (0) 2017.03.22
string(문자)  (0) 2017.03.22
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.





   < number >

  

   console.log(1);  -> console을 찍어볼떄 파란색은 숫자. 검정색은 문자.

   console.log(1000 + 10);  ->숫자의 장점은 연산이 가능하다.

   document.write(1000 + 10);  ->browser에 나온다. (console은 개발자도구에나옴, 브라우저에 안나옴)

                                                  -> dom은 문서에 있는 element 건드는것.





   < variable >


    var a;   ->변수  a 지정

    a = 10;

   console.log(a);  ->a를 console.log로 확인 a는 10

   a = 20;

   console.log(a);  -> a는 20

   a = a + 20;

   console.log(a);   ->a는 40 






'publishing > java script' 카테고리의 다른 글

if문  (0) 2017.03.28
java script  (0) 2017.03.25
array_test  (0) 2017.03.25
array(배열)  (0) 2017.03.22
string(문자)  (0) 2017.03.22
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

   문자는 " "나 ' '로 표시



   --> 위에 먼저 실행후 정지, 그다음으로 넘어가면 다음것을 실행한다.

   alert("이것은 '문자' 문자입니다");

     -이것은 '문자' 문자입니다

   alert('이것은 "문자" 문자입니다');

     -이것은 "문자" 문자입니다


   alert('이것은 '문자' 문자입니다'); ->잘못된 예


   console.log("이것은 '문자' 문자입니다");

   console.log('이것은 "문자" 문자입니다');

   console.log('1234'); ->숫자 1234가 아니라 문자 1234이다.



   //

   alert('값');  -> 경고창을 말한다.

   console.log('값');

   document.write('값');






'publishing > java script' 카테고리의 다른 글

if문  (0) 2017.03.28
java script  (0) 2017.03.25
array_test  (0) 2017.03.25
array(배열)  (0) 2017.03.22
number(숫자), variable(변수)  (0) 2017.03.22
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.



100%


      canvas

      geolocation

      localstorage

      media(video, audio)


이를 제외한 element  5%(아래 나열)




5% 


div


header

footer

article

aside

nav(div로 감싸는게 아니로 nav로 감싸게 되어있음.)                   ---> 이름이 붙은 div들

section


                         -->element 태그들이  ie 9 이하에선 작동이 안된다.

                               하지만 아래 문장을 쓰면 호환이 가능하다.


<!--[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->


lt가 부등호 '<'

IE 9보다 버전이 낮으면 참


<!--[if IE 8]>

익스플로러 버전 낮음. 업뎃.

<![endif]-->


조건주석문

  ! : 아니다(not) - 예) [if !ie] ie가 아니라면

  lt : 작다(less than) - 예) [if le ie9] ie9보다 작다면

  lte : 작거나 같다(less than equal) -- 예) [if lte ie8] ie8 보다 작건 같다면

  gt : 크다(greater than) - 예) [if gt ie6] ie6보다 크다면

  gte : 크거나 같다(greater than equal) - 예) [if gte ie7] ie7보다 크거나 같다

  () : 우선처리

  & : 그리고(and) - 예) [if (gte ie7)&(lt ie9)] ie7 이상이고 ie9미만이라면

  |  : 또는(or) - 예) [if (ie7)|(ie8)] ie7이거나 ie8이라면


출처:  http://webdir.tistory.com/451 [WEBDIR]


html5

반응형웹 (유지보수가 힘들다)

--> ie 6, 7, 8 지원하지않고 ie 9, 10, 11을 쓴다.


xhtml (유지보수 쉽고, 그라데이션, 섀도우)



<video width="400" controls>

  <source src="mov_bb.mp4" type="video/mp4">

  <source src="mov_bb.ogg" type="video/ogg">

</video>


호환이 되기위해 확장자가 다른, 똑같은 비디오를 여러개 태그한다.


<video autoplay="yes" loop width="100%">

  <source src="../video/Clouds - 7001.mp4" type="video/mp4"

      autoplay = 들어가자마자 시작 . loop = 무한루프

                                                                              스마트웹앱 p40



<picture>

  <source media="(min-width: 650px)" secret="사진.jpg">

  <source media="(min-width: 465px)" secret="사진2.jpg">

  <img src="사진3.jpg" alt="flowers" style="width:auto;"

</picture>


창넓이 최소 650부터 사진

최소 465부터 사진2가 뜬다. 기본사진은 사진3.


progress



  


336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1. flaticon


Click1 ->   http://www.flaticon.com/


무료로 제공하는 다양한 자료, 이쁜 아이콘이 많다

사이트 상단 우측에 유저아이콘을 눌러 가입 또는 로그인을 한후

그옆에 4개의네모상자를 클릭하면 

내가 추가한 아이콘들이 뜬다.






아래 이모티콘에 커서를 대면 내 아이콘 컬렉션에 추가를 할수가 있다.

그리고 내 컬렉션에서 아이콘에 커서를 대면 리스트에서 뺄수있음.






png, psd등 다양한 형식으로 다운이 가능하고

다운로드할때 fonticon으로 다운받으면 폰트컬러로, 사이즈로 

아이콘의 컬러와 사이즈를 바꿀수있다.









2. themeforest


Click! -> http://themeforest.net/


각종 템플릿을 저렴하게 파는 사이트.

우선 사이트 우측 상단에서 create account를 클릭해 계정생성을 한다.

생성뒤에는 이메일을 보냈다는 메시지가 나타난다.

이메일에 들어가 확인링크를 누르면 이용약관 동의 화면이 뜬다. 

동의하면 됨.


좋은 점은 한달간격으로 무료 아이템을 제공한다. 

페이지 중간에 이달의 free items가 있는데 

다달이 유용한게 있는지 체크해보심이 ㅎㅎ





336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.



1. document type difinition


http://www.w3schools.cpm/tags/tag_doctype.asp


<!doctype html>  ->html5

html타입, 유효성검사할 버전을 구분한다.

thml 4.01 transitional

html 4.01 frameset ->transitional도 되고 frameset까지 허용

xhtml 1.0 frameset ->transitional도 되고 frameset까지 허용

xhtml 1.1 동아시아 지원


2. charset


http://www.w3schools.com/html/html_charset.asp


html4는 charset이 길다.

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> -> 이런식으로(html4)


html5는 charset이 간결하다.

<meta charset="UTF-8"> ->이런식으로html5)


html5에서는 아무것도 쓰지않으면  UTF-8 기본문자인코딩됨



3.  헤딩맵


http://www.w3schools.com/html/html_headings.asp



4.  p태그 단락


http://www.w3schools/html/html_paragraphs.asp



5.  blockquote 인용문 출처


http://www.w3schools/html/html_quotation_elements.asp



6.  ul과 li, ol과 li사이에 어떤 태그도 들어가면 안된다.


http://www.w3scools.com/html/html_list.asp



7.  알파벳 정의


http://www.w3schools.com/tags/default.asp




address태그 안에는 block요소를 사용할수 없다.

article, aside, audio -> 새로 추가되었음.

base는 head에 사용한다. <base href="000" target="_blank"> ->000에 주소

요즘은 input태그로 button 사용하지 않고 그냥 button태그를 사용한다.

<button type="button">Click me!</button>

type을 비웠을떄 기본으로 submit(전송)으로 정해지기 떄문에

범용버튼인  button으로 바꿔준다.


cite 인용태그

(Define the title of a work with the <cite> tag:)

<p><cite>The Scream</cite>by Edward Munch. Painted in 1893.</p>



<datalist>

html5에서만 가능하기때문에 기존에는 자바스크립트로 구현했다.



<details>

<summary></summary>

</details>

summary에 있는 정보가 접힌다.

이제 embed지원 X


<figure>

이미지 태그를 사용할때 감싼다.


<pre></pre>

작성된 형태 그대로 보여지게 하는 태그! ex)약관에 쓰면 좋다.


http://www.w3schools.com/tags/default.asp


빨간색은 이제 사용하지 않기로함. 비추천요소

빨간로고5는 html5 버전

'publishing > html' 카테고리의 다른 글

html5, xhtml, div video, picture  (2) 2017.02.26
blank, img, usemap, entity inline요소, block요소  (0) 2017.02.23
input 속성, html 유효성 검사  (0) 2017.02.23
inline 요소, table 태그  (0) 2017.02.23
에디터, html-list  (4) 2017.02.20
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

케스캐이딩

3가지규칙  -저작자

           -명시도(1.id 2.클래스 3.p태그안의 a태그 4.a태그, !important(아주 강함)

           -우선순(같은조건에 마지막이 우선)






overflow_float


위드 오토는 부모만큼

헤이트 오토는 컨텐츠만큼


overflow: hidden(넘어가면 안보여줌 주어진영역만큼만 보여줌)

          visible(넘어가도 보여줌)







position

 -static: 기본

 -relative: 상대적(현재위치로부터.)(한번에 두값만 사용, 레프트탑. )

    left:50%는 브라우저 창의 50%이동,

    margin:0 auto;, left:50px;은 0 auto중간에서 50px이동

 -absolute: 절대적(네가지 값사용 가능)

    right:0; bottom:0;은 맨왼쪽 맨아래

    right:50px; 맨 왼쪽에서 50px 이동(float은 밀지만 absolute는 밀지않고 그냥 이동)

 -fixed: 고정적


position을 사용해야만 쓸수 있는 속성: top, right, bottom, left, z-index


<head>

  <meta charset="UTF-8">

  <title>Document</title>


  <style>

[class^="box"]{border:1px #f00 solid; position:absolute;}

.box1{background: #F00; left:0; right:50%; top:0; bottom:50%;}

.box2{background: #0F0; left:50%; right:0; top:0; bottom:50%;}

.box3{background: #00F; left:0; right:50%; top:50%; bottom:0;}

.box4{background: #000; left:50%; right:0; top:50%; bottom:0;}

  </style>

</head>


<body>


<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="box4"></div>


</body>


z-index 높낮이 결정.

z-index:1; z-index:2;  릴렉티브 앱솔루트 픽스드 다 가능


<cite></cite>

상품 제목같은경우에 쓰임. h1,h2쓰기에 맞지않을때


선택상자로 영역잡은후 포토샵 알트s t-> 개별로 조정가능

엔터치고 컨트롤 쉬프트 c-> 컨트롤 엔-> 컨트롤 v 

< 1 2 >