mobssie

화면을 구성할때 스타일 내기위해 자주사용하는 자바스크립트를 정리해보려고 한다. 1. 부모의 자식요소 갯수를 구해 스타일로 분기처리 할때 - 부모에 아이디값을 셀렉 후 자식요소의 length를 구한다. - classList를 사용해 부모에 클라스를 추가해 스타일을 조건에 따라 활성화한다. var listOrder = document.getElementById('listOrder'); var nodelist = listOrder.getElementsByTagName('li').length; if(nodelist < 16){ listOrder.classList.add('few') } else{ listOrder.classList.add('many') } 2. 스크롤 헤더 sticky 효과 - 부모에 아이디값을..

sass 의 종류 Ruby Sass , LibSass, node-sass 나는 node-sass로 설치할거샤~ 1. 시작 전에 노드설치 2. Homebrew 설치 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" brew install node 3. 설치하기 / 버전확인 npm install -g node-sass node-sass -v 3-1. 설치시 에러가 난다면 sudo npm install --unsafe-perm -g node-sass node-sass [옵션] node-sass -w scss/style.scss css/style.css --output-style com..

출처: https://backlog.com/git-tutorial/kr/stepup/stepup2_8.html 마지막으로 진행했던 병합 명령을 취소하기 $ git reset --hard HEAD~ 'issue3' 브랜치를 병합 할 때에 rebase 를 먼저 실행한 후 병합을 시도한다면 그 이력을 하나의 줄기로 만들 수도 있음. 'issue3' 브랜치로 전환하여 'master' 브랜치에 rebase 를 실행 $ git checkout issue3 Switched to branch 'issue3' $ git rebase master First, rewinding head to replay your work on top of it... Applying: pull 설명을 추가 Using index info to..

출처: https://backlog.com/git-tutorial/kr/stepup/stepup2_7.html 1. 'issue2' 브랜치에서 변경한 부분과 'issue3' 브랜치에서 변경한 부분을 모두 'master' 브랜치에 통합해보기 먼저 'master' 브랜치를 체크아웃한 다음 'issue2' 브랜치를 병합. $ git checkout master Switched to branch 'master' $ git merge issue2 Updating b2b23c4..8f7aa27 Fast-forward myfile.txt | 2 ++ 1 files changed, 2 insertions(+), 0 deletions(-) 'fast-forward(빨리감기) 병합'이 실행됨. master' 브랜치에 'i..

Git 저장소로 지정 $ git init tutorial 폴더에 myfile.txt 이라는 이름으로 파일을 만든 후 커밋 $ git add myfile.txt $ git commit -m "first commit" [master (root-commit) a73ae49] first commit 1 files changed, 1 insertions(+), 0 deletions(-) create mode 100644 myfile.txt branch 란 명령어 사용해 새로운 브랜치를 작성 $ git branch 브랜치 목록 전체를 확인하는 방법 (앞 부분에 * 이 붙어있는 것이 현재 선택된 브랜치) $ git branch 브랜치를 사용하여 어떤 작업을 수행하려면, 이 브랜치를 사용 하겠다고 명시적으로 지정해 주..

Access to XMLHttpRequest at 'http:// #@$%@%#% API ' from origin 'http://pos.me:8080' has been blocked by CORS policy:No 'Access-Control-Allow-Origin' header is present on the requested resource. 라는 에러가 떴다. 무슨말인지 하나하나 뜯어보기로 했다. Origin이란 프로토콜, 주소, 포트번호의 쌍을 말한다. Origin = [프로톨콜]://[Host의 IP 주소 또는 URL]:[포트번호] 여기서 포트 번호는 생략가능하고, 생략했을때 HTTP 방식으로 오면 80, HTTPS 방식으로 오면 443을 이용하게 된다. 보안규칙에 의해서 Same Origin ..

기본 정보 프로젝트명 : 위메프오 어드민 프로젝트 성격 : 반응형 기준 브라우저 : 크롬 최신 버전 [web.platform] - 어드민 1 php phalcon 라이브러리를 사용, nginx로 웹서버를 띄운뒤 php, phtml, javascript로 화면 구성 [web.admin] - 어드민 2 React.js로 화면을 구성 후(CRA), WMPO gateway에 올라가 있는 webService를 직접호출하여 API 통신 React 참고 자료 cra : https://ko.reactjs.org/docs/create-a-new-react-app.html flux : https://haruair.github.io/flux/docs/overview.html redux,reducers : https://d2..

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정한다. element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) ▶ id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. CODING FACTORY ▶ id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. fu..

여러가지 아코디언액션을 적용하는 방법이 잇는데 CSS 클래스로 컨트롤 하는 방식이 가장 좋은 방법인 것 같다. [html] onclick="toggleClass( this.parentNode, 'fold')" 클릭시 부모에 fold라는 클래스를 토글하고 싶을때 (추가/제거) this에 parentNode 붙여준다. [vanilla javascript] // 아코디언 var toggleClass = function (element, tClass) { tClass = tClass.replace(/\s/g, ""); var classes = element.className; element.className = classes.indexOf(tClass) !== -1 ? classes.replace(" " + t..

사용법 1. 메타태그 뷰포트에 viewport-fit=cover 를 추가모서리, 센서 하우징 및 홈 버튼을 피하기 위해 동적으로 조정이 가능해 iPhone X의 화면 공간을 최대한 활용할 수 있다. 2. padding-top: env(safe-area-inset-bottom) 으로 기본으로 사용env(safe-area-inset-bottom); // IOS 11.0 이상 (신) constant(safe-area-inset-bottom); // IOS 11.0 버전 (구) 3. 기본적인 padding값이 스타일로 들어가있을 경우에는 calc를 사용하여 정리한다..button { padding: 12px 16px; // 기본 값을 지정해 준후 padding: 12px 16px calc(constant(saf..