Scrap 썸네일형 리스트형 CSS 응용(2) - layer popup 만들기 출처 : CSS 응용(2) - layer popup 만들기 — BlockChain_Developer (tistory.com) CSS 응용(2) - layer popup 만들기 이번 포스팅에서 만들어 볼 것은 바로 layer popup 이다. 아래 그림과 같이 "버튼"을 클릭했을 때 pop up되는 느낌으로 새로운 영역이 등장하는 효과를 layer popup 이라고 한다. 시작하기에 앞서 아래와 bitkunst.tistory.com 이번 포스팅에서 만들어 볼 것은 바로 layer popup 이다. 아래 그림과 같이 "버튼"을 클릭했을 때 pop up되는 느낌으로 새로운 영역이 등장하는 효과를 layer popup 이라고 한다. 버튼 클릭 전 버튼 클릭 후 시작하기에 앞서 아래와 같이 css style 기본.. 더보기 [JavaScript] 문자열 자르기 (substr, substring, slice) 출처 : [JavaScript] 문자열 자르기 (substr, substring, slice) (tistory.com) [JavaScript] 문자열 자르기 (substr, substring, slice) 자바스크립트에서 문자열을 자르기 위해서는 substr(), substring(), slice() 함수를 사용하면 된다. 문자열을 뒤에서부터 자르기 위해서는 slice() 함수를 사용하면 효율적이며 타 언어의 Right 함수와 비 gent.tistory.com 자바스크립트에서 문자열을 자르기 위해서는 substr(), substring(), slice() 함수를 사용하면 된다. 문자열을 뒤에서부터 자르기 위해서는 slice() 함수를 사용하면 효율적이며 타 언어의 Right 함수와 비슷하다고 생각하면 된.. 더보기 Vue.js 스터디 - 2) vue-cli / eslint 경고 Vue-cli 설치 및 프로젝트 생성 * vue-cli 설치 전 node.js가 설치되어 있어야 함. vue-cli 초기 설치 방법 : npm install -g vue-cli vue-cli 프로젝트 생성 방법 : vue init webpack 생성될폴더명 * vue-cli 프로젝트를 Visual Studio Code의 터미널에서 생성 시 vue 명령어가 먹지 않는 경우가 있는데, 이때는 git-bash 터미널을 이용해 프로젝트 생성 가능 ( Visual Studio Code의 터미널에 환경변수가 제대로 잡혀있지 않아 나오는 문제로 생각됨.) Vue-cli 프로젝트 실행 방법 : npm run dev - 위 명령어 외에도 npm run - 명령어를 치면 사용가능한 다양한 옵션이 나옴. es.. 더보기 Vue.js 스터디 - 1) 기본 설정 및 반복문 출처 : Vue.js 스터디 - 1) 기본 설정 및 반.. : 네이버블로그 (naver.com) React.js, Node.js 등 javascript 기반으로 페이지를 꾸밀수 있는 프레임워크 중 Vue.js 라는 프레임워크가 있다. Vue.js에 관한 내용을 얼마나 스터디를 지속할지는 확실치 않지만, 어느정도 스터디를 진행하는 동안 블로그에 공부한 내용들을 정리할 겸 다시 되새겨보고자 한다. MVVM 패턴 https://ko.wikipedia.org/wiki/%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EB%B7%B0%EB%AA%A8%EB%8D%B8 Vue.js는 MVVM 패턴을 사용하고 있다. MVVM 패턴은 Backend 로직과 Client의 마크업 & 데이터 표현단을 분리하기 .. 더보기 git 호스팅 - github pages로 웹 호스팅 하기 우선 아래 깃허브 사이트에 접속해서 로그인을 해주세요! https://github.com/ 그럼 아래와 같은 창이 뜰겁니다. 왼쪽 상단에 초록색 New 버튼 보이시나요? 새로운 Repository를 생성해주는 버튼입니다! click! name 칸에 적어주고, add a README file 네모박스를 체크해줍니다! 그리고 제일 하단에 Create repository 초록색 버튼 눌러주면 생성이 완료된겁니다. 여기에 웹페이지에 필요한 html과 다른 파일들을 업로해주면 됩니다 : ) add file 클릭해서 Upload files 클릭! .. 더보기 HTML 에 대하여 _ 비전공자를 위한 HTML/CSS 코칭스터디 [동영상 자율학습] ● 1)HTML 소개 Hypertext Markup Language 이라고 한다. 웹 상에서 문서를 볼 수 있게 만들어졌다. 팀버너스리가 만들었다. ●2)HTML 문법 - 태그 - 1 ●3)HTML 문법 - 태그 - 3 HTML의 핵심키워드 태그,시작태그,종료태그,내용,요소 태그란? HTML은 태그의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙 !! 무언가를 표시하기 위한 꼬리표,이름표의 역할을 한다. Hello, HTML 시작태그와 종료태그 로 구성되어있다. 화면에는 hello,HTML 이 표시된다. tag태그 + 내용 + 닫는 tag 의 모든 것을 요소라고 한다. 태그와 요소는 의미가 다르지만 많은 사람들이 태그와 요소를 같은 의미로 사용하니 혼.. 더보기 HTML /CSS 출처 : HTML /CSS : 네이버 블로그 (naver.com) HTML /CSS 팁 cmd + d 한줄 복사 가능 원하는 태그 쓰고 + tab하면 전부 완성해줌 ( 이건 스크립트 프로그램마다 다르... blog.naver.com 팁 cmd + d 한줄 복사 가능 원하는 태그 쓰고 + tab하면 전부 완성해줌 ( 이건 스크립트 프로그램마다 다르긴 한가) shift + 방향키 오른쪽 해서 복사하고자 하는 단어 선택해서 cmd + x 하면 잘라내기 cmd + 방향키 오른쪽 : 맨 뒤로 cmd + 방향키 왼쪽 : 맨 앞으로 cmd + / 하면 뜨면서 주석처리 가능!!! option + cmd + L : 라인 정렬 html에서도 클래스 자동완성으로 쓸 때 .wrap + 탭 누르면 더보기 HTML5 markup HTML5 markup 실전 HTML5 가이드에 수록된 HTML5 마크업 부분입니다. 소개 마크업 이슈사항 현재 HTML5는 아직 초안 상태이다. 기존에 표현의 용도로 사용되었던 요소들에 의미를 부여하는 작업이나, alt나 summary와 같은 접근성 기능들은 아직 논의 중에 있다. 하위 호환성 HTML5는 브라우저 개발사를 위한 문서와 웹 저적자를 위한 문서가 나눠져 있다. 또한 기존 표준에서 명확하지 않았던 부분들을 새롭게 정의하면 현재 브라우저들의 동작 방식을 표준화하는데 노력했다. 결과적으로 새롭게 변경되거나 추가된 부분들도 하위 호환성을 가지고있기 때문에 조금만 신경을 쓰면 과거의 브라우저에서도 HTML5를 사용할 수 있다. 개발 모델 HTML5는 디자이너와 개발자로 하여금 마크업 언어를 쓰기 .. 더보기 이전 1 2 다음 목록 더보기
