bc887a

Posted by 이상한 나라의 채소토끼
2018. 1. 24. 18:10 카테고리 없음

bc887a
64564d

e8ca98
27d2a5

8cddeb 하늘
ffca38 노란색
#343434; 글씨색
나눔스퀘어

French Script ...
prata

하나카드
개편한세상 코딩
(자체 앱제작)

반응형 사이트
웹사이트제작

01.24

Posted by 이상한 나라의 채소토끼
2018. 1. 24. 18:09 공부일지

오늘부터 제이쿼리 css3 애니메이션 다 만들것
잘 정리해서 포폴 만들때 쓰기~

?index는 오디에

resize는 반응형에..
움직여야인식
trigger는 처음에 인식

코드펜 text align 방법 정리


??일러스트로 svg 만들기
요새는 벡터방식 추세

forwards는 한번만 움직이게 작업하는..

'공부일지' 카테고리의 다른 글

01.26  (0) 2018.01.26
ll  (0) 2018.01.25
1.16  (0) 2018.01.16
javascript 첫 수업  (0) 2018.01.16
ncs 시험 및 개편 코딩ppt 발표  (0) 2018.01.15

atom 셋팅

Posted by 이상한 나라의 채소토끼
2018. 1. 24. 06:02 JAVASCRIPT & J-QUERY


{
    "protocol": "ftp",
    "host": "webshwang.com",
    "port": 21,
    "user": "webshwang",
    "pass": "",
    "promptForPass": false,
    "remote": "html",
    "local": "/",
    "secure": false,
    "secureOptions": null,
    "connTimeout": 10000,
    "pasvTimeout": 10000,
    "keepalive": 10000,
    "watch": [],
    "watchTimeout": 500
}

http://doqtqu.tistory.com/18?category=750710

http://recoveryman.tistory.com/242


atom : 에디터 (소스코드를 수정하는데 사용하는 전문적인 소프트웨어)

운영체제마다 문서편집 프로그램이 있다.(윈도우는 메모장, 맥은 텍스트에디트,운트는 g-edit )

atom은 이것들에 비해 훨씬 생산성이 높아진다.



jQuery 기본구문

Posted by 이상한 나라의 채소토끼
2018. 1. 23. 02:51 JAVASCRIPT & J-QUERY
jQuery의 기본 문법과 개념


$('#typo').css('color','#ebc000');


jQuery 는 '명령대상($('#typo'))에 명령내용(css('color', '#ebc000'))을 보낸다'고 해석합니다.

따라서, 'CSS의 color 속성에 #ebc000라는 값을 지정하라'고 이해하면 된다.

css()라는 명령은 javaScript에 정의되어 있지 않은 jQuery의 명령입니다. 즉, jQuery의 js 파일 안에  css()라는 명령이 정의되어 있으며, 해당 명령을 main.js에서 이용합니다. 이러한 jQuery의 명령을 'jQuery 메서드' 라고 합니다. css() 의 괄호() 안에 작성한 css속성(color)과 값(#ebc000) 처럼 메서드에 전달되는 데이터를 '매개변수'라고 합니다.

※ 위 코드가 jQuery 메서드 (css())와 두 개의 매개변수 ('color' ',#ebc000')로 구성되어 있음을 알아야 합니다.


메서드에 매개변수를 지정하는 것을 '매개변수 전달'이라고 하며, 메서드를 실행하는 것을 '메서드  호출'이라고 합니다.


명령대상: $() 함수와 jQuery 객체

css()메서드의 '명령대상'이 되는 것은 'id="typo"가 지정된 HTML 요소' 입니다.

하지만 JQuery 는 HTML요소에  직접 css()메서드를 실행할 수 없습니다. css() 메서드를 사용하려면  jQuery 명령 대상을 고유의 형식으로 지정해야 합니다. 다음을 살펴봅시다.


$('#typo');


$() 함수와 CSS선택자 (예시의 '#typo')의 관계는 앞서 설명한 css() 메서드와 매개변수(CSS속성과 값)의 관계와 같습니다.

선택자는 $() 함수의 매개변수 ('#typo')로 전달됩니다. 


$() 함수는 'HTML 요소를 기반에 두고 jQuery의 고유 요소를 생성한다'라는 기능이 있는 함수입니다.

그리고 HTML 요소를 지정하는 방법으로 CSS 선택자를 지정할 수 있습니다. 이 $() 함수를 통해 JQuery 고유의 형식으로 변환된 요소를 'jQuery 객체'라고 합니다.


메서드와 함수

$()함수와 css() 메서드는 매개변수를 전달받는다는 의미에서는 비슷하지만, $()는 메서드라고 말하지 않고 '함수'라고 말합니다. 개념을 이해하기 조금 까다로울 수 있습니다. 지금은 명령문 앞에 점(.)이 붙어 있으면 '메서드' .점이 붙어 있지 않으면 '함수'라고 이해하면 됩니다.

방금 설명한 코드에서 이 개념을 살펴보면 index.html의 모든 HTML 요소 중 $('#typo')를 지정한 부분만 jQuery 객체로 변환됩니다.

따라서, $('#typo')에 지정된 메서드가 jQuery 객체를 통해 실행된다고 이해하면 됩니다.


다른 예로 $('h1')을 지정하면 h1이라는 HTML요소가 jQuery 객체로 변환되고 명령 대상이 됩니다.


jQuery의 실행 흐름은 보통 다음과 같습니다.

1 $()함수에서 명령 대상이 되는 HTML 요소를 jQuery 객체로 변환합니다.

2 변환한 jQuery 객체에 메서드를 호출해서 HTML 요소를 변경합니다.


jQuery 객체                      변경을 위한 명령

 $( HTML 요소 )                 메서드 ( ' 매개변수1 ' , ' 매개변수2 ' ) 

출처: 최고의 제이쿼리 作주식회사 시프트브레인

제이쿼리를 사용하여 부모요소 선택하는방법 (parent, closet차이)

Posted by 이상한 나라의 채소토끼
2018. 1. 22. 21:07 JAVASCRIPT & J-QUERY

# 제이쿼리를 사용하여 부모요소 선택, 찾는 방법
먼저 부모 요소를 선택하는 방법은 제이쿼리에도 몇 가지가 있습니다. 그 중에서 가장 자주 사용되는 방법으로 아래의 세가지 메소드가 대표적입니다.

parent()
parents()
closest()


이와같이 위 메소드를 사용하면 간단하게 부모요소를 선택할 수 있습니다. 그럼 어떻게 사용하고 각각의 메소드의 차이점은 무엇인지 알아봅니다.

모두 부모형제를 찾기 위한 방법이나 그 차이점이 존재합니다. 먼저 parent()의 경우부터 알아봅니다.


! parent() 메소드 알아보기먼저 parent()는 해당 요소의 바로 위에 존재하는 하나의 부모 요소를 반환합니다. 위 예제에서는 p태그를 반환할 것입니다. parent()는 인접한 하나의 요소를 반환하는 것이 특징입니다.

! parent() 예제소스 보기아래예제는 현재 태그요소의 바로 위 부모 요소를 가져오는 예제입니다.
@ parent.html

<div>
  <p>
    <span>How to find parent elements?</span>
  </p>
</div>

위 html은 예제에 사용된 html입니다. 아래는 스크립트 코드입니다.

@parent.js
var tagName = $('span').parent().prop('tagName');
console.log(tagName);

// P를 출력함

※ 위 코드를 실행하면 span 태그에 사용된 parent() 메소드로 바로 위의 부모 요소인 p 태그를 가져와 출력합니다.


! parents() 메소드 알아보기
만약 하나가 아닌 모든 부모 요소를 반환할 필요가 있다면 parents() 메소드를 사용합니다. 모든 요소를 반환한다는 점을 빼고는 parent()와 동일합니다. 아래 예제를 봐주세요.

@parents.js
var parents = $('span').parents();

// parents 변수는 p와 div를 모두 가짐

※ 이번에는 바로 위의 부모 요소인 p 뿐만 아니라 그 상위 부모인 div 역시 가지고 있습니다. 즉 모든 부모 요소를 가져와 함께 반환하는 것이 parent()와의 차이입니다.


! closest() 메소드 알아보기
이번에 알아볼 closest() 메소드 역시 가장 많이 사용되는 메소드 중 하나입니다.  closest()는 모든 부모 요소를 대상으로하여 원하는 요소만 선택자로 가져올 수 있습니다. 예를들어 아래처럼 span 태그의 부모 요소중 div 태그를 가져올 수 있습니다.

@ closest.js
var tagName = $('span').closest('div').prop('tagName');

// div를 출력

※ 이처럼 부모 요소들 중에서 원하는 요소만 선택하여 가져올 수 있습니다.



출처

'JAVASCRIPT & J-QUERY' 카테고리의 다른 글

크로스 브라우징을 위한 HTML5 shiv와 IE checker  (0) 2018.02.08
atom 셋팅  (0) 2018.01.24
jQuery 기본구문  (0) 2018.01.23
= 과 == 과 === 연산자 차이  (0) 2018.01.17
샘의 책 추천  (0) 2018.01.16

= 과 == 과 === 연산자 차이

Posted by 이상한 나라의 채소토끼
2018. 1. 17. 10:20 JAVASCRIPT & J-QUERY

=과, == ===는 비슷하지만 깊게들어가면 완전 다른의미를 가지고 있는데요. 블로그나 강의를 찾아보니, 조건문을 포함해서 좀더 복잡한 내용을 공부할 때, == ===가 어떻게 다른지, 왜 다르게 해 놨는지를 피부로 느낄 수 있기때문에, 처음부터 완전히 뜻을 이해하고 가려고하기보다는, '아 그냥 다른거구나'정도로 쉽게 받아들이고 넘어가라고 이야기들을 하시네요. 지금은 몰라도 전혀 문제안된다고요. (처음부터 다 이해하려고하면 머리만 아프다고..)

여튼 ==는 Equal Operator라고 하고, ===는 Strict Equal Operator라고 한다고 합니다. strict는 엄격한 이라는 의미로 좀더 엄격하게 같은지를 보는 연산자라고 생각하면 되겠습니다.


===를 좀더 자세히 설명하면
값이라는 의미는 1이라는 데이터는 역시 1이겠죠. ㅎㅎ
형식이라는 의미는 javascript가 똑똑(?)하게도 숫자1과 문자"1"을 1이라는 데이터로 인식할 수 있기때문에, 문자와 값의 형식조차 완벽히 같아야만 true라고 판단(리턴)하게되는것이죠.

예를들어 
1=="1"은 true이지만,
1==="1"은 false입니다.

또,
null undefined는 값이 없다는 의미의 데이터 형이라고 합니다. null은 값이 없음을 명시적으로 표시한 것이고, undefined는 그냥 값이 없는 상태이기때문에, ==로는 true가 뜨지만, ===로는 false가 리턴됩니다.

아마도 이제 자바스크립트를 입문한사람들에게는 null undefined까지는 좀 어려운 개념인것같아요. 이부분은 === ==보다 엄격하구나 정도로 생각하고 넘어가는걸 추천합니다. 나중에 가면 이래서 이런거구나 하는 구간이 나와요. :-)

실무 개발자들은 실무에서 코딩을 할때는 ==보다는 ===를 사용해야 한다고 강하게 추천합니다. 이유는 역시 조건문이나, 좀더 복잡한 상황의 프로그래밍에서 차이가 나온다고 하네요.


=는 만약 a=b이라고 했을때, b를 a에 대입해서 a가 b이라고 약속하는 것이라고 합니다.

==는 먄약 a==b이라고 했을때, a가 b과 '값'이 같은지를 판단해서 맞으면 true, 틀리면 false라고 합니다.

===는 만약 a===b이라고 했을대, a가 b과 '값'과 '타입/형식?'이 정확하게 같은지를 판단해서 true/false를 표현합니다.


1.16

Posted by 이상한 나라의 채소토끼
2018. 1. 16. 21:52 공부일지
한 것 :

오전- 자바 스크립 강의 , 열 ppt 만듦 (개집중 폭발)

오후 - ncs and 사이트조사

카페- ppt common layout까지 완성


못한 것:

1. 이력서 (포폴 아직 들완성... 사진도.... 사이트 정리도 덜됬는데...)

2. 사이트 다듬기 연동하고 /  한것 보고 공부

3. 하나 포폴 및 디자인 수정및 제작

4.html 다보고 -> 자바

*기능사... 1달간 2 시간씩 공부~!!

'공부일지' 카테고리의 다른 글

ll  (0) 2018.01.25
01.24  (0) 2018.01.24
javascript 첫 수업  (0) 2018.01.16
ncs 시험 및 개편 코딩ppt 발표  (0) 2018.01.15
금일  (0) 2018.01.10

javascript 첫 수업

Posted by 이상한 나라의 채소토끼
2018. 1. 16. 15:57 공부일지

자바와 제이스크립은 재미
내가 원하는대로 컨트롤 가능
처음에 개념 이해가 어려움
HTML /CSS는 책 추천안하지만
책보고 공부하는 것 추천
선생님과 하는 건 실무
이론은 책보고...하는게 좋은 제이쿼리랑 자바스크립은...

자바 jquery는 기본이 중요~!!!!
html과 다르게 이건 알게 별로 없으므로..

sublime3 플러그인 쓸만한것 갖다 쓰삼
http://coderap.tistory.com/504
(AutoFileName ,w3cvalidators , brackethighlighter, goto-css-declaration)


script html5는 type 생각해도 됨!!

규칙
★☆ ( ) <- 작은따옴표('')나 큰 따옴표("") 안에 묶인 것은 문자열로 인식한다. 그러므로, 숫자는 묶지않아야한다.
<h1 onclick="alert('hello,webs')">Javascript</h1>


부트스트랩은 플레임웍 (사이트 만든는 )
css 를 reset css 처럼 만들어놔서 갖다 쓰기만하면됨
틀이 다 짜져잇음.
"소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔
일련의 협업화된 형태로 클래스들을 제공하는 것"

https://getbootstrap.com/docs/3.3/components/
우리는 3.3 버전을 부트스트랩이용함
단점은 디자인이 정형화.

mark up 만 갖다 쓰면 되네 js는 샘이 연동해놨나봄

키워드는 작업할때 쓰면안되기 때문에 알아야하긴한데 외울필욘 딱히..
그닥 문제 없기 때문
class 이름을 마음대로 만드는 것같은 것- 식별자

자바스크립은 지루.. 버텨야 j-query 재밌음.
변수는 뭔가를 저장시

키는 장소
배열은 여러개
연산자는 계산

함수는 배열 연산자 조건문 등 합쳐놓은것
객체- alert 등 이미 저장되있는것

문서 브라우저 내장객체는 잘 안씀 , 제이쿼리로 씀

자바는 하나 에러나면 다 에러남

code는 코딩소스 쓸때 쓰는 코드


한번에 이해하기힘듬
돌고 책보고 돌고 실전하고 돌고~~돌리고돌리고

h1
p
h5 >sample
pre

******* 숙 ******
https://opentutorials.org/course/743
생코 자바스크립
우리는 객체까지만 배움- 월까지 보기
그이후는 실무 1년 이상 됐을때 보면됨


1.16(화)

'공부일지' 카테고리의 다른 글

01.24  (0) 2018.01.24
1.16  (0) 2018.01.16
ncs 시험 및 개편 코딩ppt 발표  (0) 2018.01.15
금일  (0) 2018.01.10
개편: 인기동영상 마이페이지 만듦  (0) 2018.01.10

샘의 책 추천

Posted by 이상한 나라의 채소토끼
2018. 1. 16. 09:41 JAVASCRIPT & J-QUERY

ncs 시험 및 개편 코딩ppt 발표

Posted by 이상한 나라의 채소토끼
2018. 1. 15. 17:51 공부일지

감상 : 코딩 발표 하게
프로토타입 만들어진거 없나

눈이 많이 아픈 날


한 것

: 오전- 시험봄 ncs

오후 - ppt만들고 발표

투썸- ppt 플랫폼, 목업 디자인 봄

못한 것

: infor 정리 -> 구글애드센스 다시

메인그림 리뉴얼 (글씨 안써도 되는걸로)

2018.01.15 월

'공부일지' 카테고리의 다른 글

1.16  (0) 2018.01.16
javascript 첫 수업  (0) 2018.01.16
금일  (0) 2018.01.10
개편: 인기동영상 마이페이지 만듦  (0) 2018.01.10
개편: 메인페이지 코딩완료  (0) 2018.01.08