Hi

속성값 가져오기value += $(this).attr('command'); command 라는 속성의 값을 가지고 온다. 라면 '+'를 가져오는 것이다.

$output.css('font-size', convertSize + 'px');

Number(beforeValue) // string to number

outline윤곽선은 요소를 "눈에 띄게"만들기 위해 테두리 외부의 요소 주위에 그려지는 선입니다.border 특성과 다르게 2줄 겹치지 않고 1줄로 해주는듯 h2 { border: 1px solid red; outline: 5px dotted green; } div.a { border: 1px solid red; outline: 2px dashed blue; }Note: The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.

$input.val(); //getter $input.val(''); //setter $input.text('WT!!!') //setter $input.text() //getter

jquery를 사용하려면 링크를 걸어야 한다. 포털사이트에서 jquery cdn 을 쳐 접속하면 minified를 선택하여 링크를 복사해서 html코드 head에 붙여 넣는다.

console.log($);// $, vanilla js 의 근본적인 목적은 dom을 제어한다. console.log($('a.login-button'));선택자는 tag, class, attribute, id$('#loginText').text('WT!!!'); //카카오 톡의 '로그인' 글자가 'WT!!!'로 바뀐다.sellector $({OPTION})//jquery 객체 var $input = $('#messageInput'); var $sender = $('#sender');

html(pug)의 제일 아랫부분에script(src="/javascripts/login.js")를 입력한다.

window.location = 'http://naver.com';

$sender.on('click', function() { var message = $input.val(); $('.chat-state-container') .append('' + message + '') });var template = $('.chat-state-container') .append(' ~~ ~~ ~~${message} // + 라는 뜻 ~~ ') ${message} //더하기가 됩니다. // 긴 문장 삽입시 ` ` 사용한다. ${variable} 은 variable에 대한 값이 `template string` 안에 들어간다는 뜻이다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

변수var a = 10; var b = 'a'; var c = null; var d = undefined; var e = [1, 2, 3, 4]; var f = { a: 10 }; // json //json을 잘 알아야 한다! var g = [1, 2, 'a', {a: [2, 3, 4] }]; // 함수도 변수로 선언할 수 있다. //선언 var h = function() { console.log('나는 함순데') } //호출 h();

뒤로가기 새로고침 앞으로 가기

backgroundbackground-position속성설명left top왼쪽 상단left center왼쪽 중앙left bottom왼쪽 맨아래right top오른쪽 상단right center오른쪽 중앙right bottom오른쪽 아래center top가운데 상단center center정 가운데center bottom가운데 맨아래x% y%x는 가로위치, y는 세로위치. 0% 0% 는 left top 과 같음. 100% 100% 는 right bottom과 같음. 한가지만 지정하면 나머지는 50%cm, px, in, pt, px, em등의 단위와 섞어서 지정도 가능

속성값에다 스타일 적용ex)&::placeholder font-size: 12px

(pug)extends extends layout.pug 파일이 있다면 doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content index.pug 파일 extends layout block content h1= title p Welcome to #{title} includepug 파일에서 다른파일 안의 코드를 붙여 넣는다. 붙여넣는 코드는 pug 외에 어떤 확장자도 가능하다고 한다frame.pugextends layout //layout.pug block content include login //login.pug

mixin @mixin _global.sass 파일 작성 (공통된 스타일 속성 파일) $nav-height: 50px @mixin backgroundImage($url) background: url($url) background-size: cover @mixin small-button width: 32px height: 32px border-radius: 50% border: solid 1px #f00 @mixin inline-block display: inline-block vertical-align: top @mixin border-radius($rt, $rb, $lb ,$lt) border-bottom-left-radius: $lb border-bottom-right-radius: $rb borde..

::-webkit-scrollbar display: none overflow: auto넘치는 부분만 스크롤바 보이도록 한다

https://developer.mozilla.org/ko/docs/Web/CSS/overflow

search box 높이조절 search box 높이 조절 -webkit-appearance:none; 을 input 태그의 css에 넣는다.

pug (pug) 띄어쓰기

터미널 node 명령어 node 치면 server-side javascript 명령어를 입력할 수 있다파일 만들기 touch 파일이름.확장자 터미널에서 바로 코드 이어 붙이기 echo 'var yamoo9={};' > yamoo9.js

text-decoration-line: underline밑줄 표시

(css) pointer-events pointer-events pointer-events: all | none all : 클릭이나 호버되게 none: 클릭이나 호버 안되게

맥에서 윈도우 node 바꿀 시 맥에서 윈도우 node 바꿀 시 Run npm rebuild node-sass to build the binding for your current environment.

# node.js node 를 설치하면서 npm도 설치한다.npm은 'node 패키지 매니저'(node.js 기반의 패키지 모듈을 관리하는 도구) 맥 터미널 = 윈도우 git bash 터미널에서 node ㅊ

아이콘 넣기 아이콘(폰트 스타일 적용되는) 넣기 material design icon // 구글용 아이콘들https://material.io/tools/icons/ fontawesome.com // 양이 더많음 // material design용 link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous") // fontawesome 용를 헤드에 넣는다. check //material design (google icon) ..

ㅇ CMD접속— mkdir로 OOO라는 파일을 생성 cd OOO로 파일 안으로 접속 npm install -g express-generator express -v pug -c sass 로 파일?들 다운. -v [VIEW MODE] -c [STYLE MODE] npm install WebStorm 열기 File 에서 Open들어가서 내가 방금 만든 OOO 디렉토리 찾아서 열기. app.js에 있는 app.use(’/’, indexRouter); 를 이용해서 주소 경로를 알아 볼 것이다. '/'부분을 내가 원하는 경로 이름으로 바꿔 준다. -> '/test’라고 했다. 여기서 7)의 indexRouter는 위의 var IndexRouter = require(’./routes/index’); 을 보아 rout..

pug 학습http://jeong-pro.tistory.com/65 sass 학습https://sass-guidelin.es/ko/

https://www.cmsfactory.net/node/11162

https://code.i-harness.com/ko/q/13665 display: table;display: table-cell;