HTML React 피엔 챌린지 에서 영감을 받은 것입니다. 2019년 12월부터 Udemy에서 React 학습을 시작했습니다만, 연습에 꼭 좋은 도전이라고 생각해 보았습니다. 이미지를 클릭합니다. 슬라이더를 구현하기 위해서, 처음으로 라고 하는 것을 사용해 보았습니다. React의 Hooks를 학습했기 때문에 클래스 컴포넌트를 사용하지 않고 props에서 버킷 릴레이하지 않는 파라미터의 인도 방법을 채용해 보았습니다. C... React피엔HTMLCSS후크 React hooks와 class 컴퍼넌트에서의 setState의 거동의 차이에 대해 (움직일 수 있는 코드 있음) 여기는 다음 기사에 쓴 hooks와 class 컴포넌트에 있어서의 setState의 차이를 다른 기사로 한 것입니다. hooks와 클래스형 컴퍼넌트의 setState에서는 거동이 다르다 후크는 오래된 상태를 인계받지 않으므로 업데이트 할 때 오래된 상태도 설정해야합니다. 우선은 hooks와 class의 setState의 차이를 체험해 보세요. 다음 두 가지를 html 파일에 붙여 넣고 원하는... ReactHTML자바스크립트초보자후크 템플릿 엔진 "Twig"의 변수 범위 이야기 프로그래밍 언어의 변수는 선언하는 위치에 따라 범위가 다르며 변수의 범위라고합니다. 그리고 Twig에도 변수의 범위가 있습니다. 일반적으로 Twig 템플릿에서 변수에 값을 설정하면 전역 변수입니다. 예) set 태그를 사용하여 변수에 값 설정 템플릿의 시작 부분에서 선언된 변수는 이후 템플릿에서 어디서나 액세스할 수 있습니다. 예) 글로벌 스코프로 선언된 변수는 임의의 장소에서 액세스 가능 ... 심포니Drupal8HTMLDrupal트위그 WordPress를 하고 싶기 때문에 로컬로 환경 구축했다(설치로부터 설정) WordPress의 공부가 하고 싶어졌으므로, 로컬로 환경 구축을 해 보았다. 현재 WordPress의 지식은 제로로, CMS라는 것만 알고 있는 상태. 이 사이트를 바탕으로 해 보았다 (알기 쉬운) 여기에서 다운로드 가운데 다운로드 버튼을 잡아. 다운로드 내용은 이런 느낌 다운로드하면 안심하고 k. WordPress를 로컬 환경에서 움직이는 데 필요한 도구 같은. MAMP에서도 좋을 것 같... HTMLCMSWordPress초보자 HTML로 구축할 수 있는 CMS 「Vapid」를 접해 본 Part1 Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML. HTML상에서 대부분의 구축을 실시할 수 있는 심플한 CMS로서 등장한 「Vapid」입니다만, 일본어의 정보가 거의 보이지 않았기 ... HTMLnpmCSSVapidCMS Java PowerPoint를 HTML 형식으로 변환 Spire.Presentation for Java가 강한 라이브러리라도 여러분 이미 알고 계십니까? Spire.Presentation for Java는 다양한 기능을 탑재하고 있습니다. 특히, 그 변환 기능은 훌륭하고, PowerPoint를 다양한 파일 형식으로 변환할 수 있기 때문에, 매우 편리한 라이브러리군요. 그래서 오늘 PowerPoint를 HTML 형식으로 변환하는 방법을 소개하겠습... HTML파워 포인트자바변환 C# PowerPoint를 HTML로 변환 오늘은 C#에 대한 이야기입니다. 그리고 Spire.Presentation이라는 무료 라이브러리를 사용하여 PowerPoint를 HTML로 변환하는 방법을 소개합니다. 아래 준비 1.E-iceblue 공식 사이트에서 무료 버전을 다운로드합니다. 2. Visual Studio를 시작하여 새 프로젝트를 만든 다음 설치된 파일에 있던 적절한 Spire.Presentation.dll을 참조에 추가합... HTML파워 포인트C#변환 curl에서 얻은 웹 소스 코드에 색을 지정하고 싶습니다. iPad로 코딩을 하면 브라우저에서 소스를 확인할 수 없기 때문에 불편합니다. 소스를 보는 전용 앱도 있는 것 같지만, 앱을 넣지 않고 어떻게 해야 할지 모색했습니다. 대상은 iPad에서 원격으로 Linux에 들어가서 작업하는 사람입니다. ※iPad의 프로그래밍 환경 구축의 이야기는 이쪽 curl에서 얻고 source-highlight로 색칠하고 less로 봅니다. source-highlig... BashHTMLlessiPadcurl 【JavaScript】 Chart.js를 사용하여 꺾은 선형 차트를 표시하는 방법 앱에 그래프를 구현하고 싶은 분 그래프 표시를 해, 수치를 알기 쉽게 한다 완성 이미지는 아래와 같이 ※화상의 한가운데의 검색 기능에 관해서는 아래 기사로 쓰고 있습니다. 1. 전제 *본의 투고수를 유저의 마이 페이지(상세 화면)로 집계하고 있어 그 수치를 꺾은선 그래프화합니다. 집계 방법은 아래 기사에서 공식 홈페이지 2.지난 7일간의 투고수를 취득 사용자 내 페이지에 게시물 수를 표시합니... HTMLchart.js자바스크립트 Table 태그에 Class를 추가하기만 하면 그래프와 차트를 구현할 수 있는 CSS 프레임워크를 사용해 보자(Charts.css) Charts.css라는 HTML 클래스 지정만으로 차트와 그래프를 표시 할 수있는 프레임 워크가 있다는 것을 알았으므로 어떤 것을 시도했습니다. 공식 사이트 CDN 지정 · CSS 설정으로 다음을 지정 sample.html CDN을 지정하고 테이블 태그에 클래스를 추가합니다. charts-css 다음에 차트의 종류, 그리고 옵션등입니다. sample.html 종류는 이하와 같은 것이 있습니다... HTML그래프chart.jsCSS초보자 Chart.js에서 원형 차트 작성 chart.js에서 데이터베이스 값에서 간단한 원형 차트 만들기 스포츠 대회에서 자주 있는 승패 확률 그래프(최대 100%라는 설정) 데이터베이스 forecasts 테이블 num은 win_school의 승리 확률 win_school은 승리가 예상되는 팀 lose_school은 잃을 것으로 예상되는 팀 id num user_id win_school lose_school A학원 B학원 컨트롤러 ... HTMLchart.jsVue.jsRails Chart.js로 가로 스크롤 가능한 그래프 만들기 Chart.js에서는 보통 그래프를 만들면 화면의 폭에 맞추어 1개의 데이터당의 사이즈를 반응형으로 조정해 표시해 줍니다. 매우 편리하지만 데이터의 양이 많으면 꽤 보기 어려워집니다. 그래서 데이터 1개당의 가로폭을 고정해 화면에 들어갈 수 없는 분은 가로 스크롤로 보이도록(듯이) 하려고 생각했습니다만, 꽤 고생했기 때문에 메모를 남깁니다. 도움이되면 다행입니다. 완성도 이번에는 막대 그래프... HTMLchart.js자바스크립트 자바 스크립트로 외국에서 유명한 게임 "CONNECT4"를 만들어 보았습니다. Connect4를 아시는 분은 많을까 생각 합니다만, 간단하게 말씀드리면 네 번째 줄입니다. 선공과 후공이 교대로 보드 위에 조각을 치고, 종횡 비스듬한 어딘가에 4번째 이상 늘어놓으면 이기기···라고 하는 심플한 게임입니다. 자신의 집에도 네 번째 줄이 있기 때문에 누군가 함께 놀지 않겠습니까 (갑자기 초대) ・Node.js(디버그용) 전부 해설하면 중복이 되기 때문에, 만들어 보고 공부가... HTML게임자바스크립트 flex box 기초 레이아웃을 정돈하기 위해서는 float나 margin:0 auto;를 사용하고 있었습니다만, Flexbox가 매우 편리했기 때문에 비망록으로 투고합니다. 참고> flexbox란, 「간단하게 좋은 느낌의 레이아웃으로 할 수 있는 css의 구조」 float 및 margin:0 auto;와 다른 이점이 있습니다. ・복잡한 내용을 상하 좌우에 간단하게 레이아웃 가능 ··높이가 사라지지 않고, cle... HTMLCSS초보자flexbox 11ty(eleventy)의 collections와 front-matter로 유기적인 내비게이션을 자동 생성 내비게이션을 자동화하려는 목적으로 사이트의 문서를 11ty와 Pug로 다시 작성합니다. 11ty에서는 collections.all 로 사이트 전체의 정보를 객체로 얻을 수 있습니다. 또한 각 페이지의 시작 부분에 다음과 같이 front-matter를 작성하여 페이지별 변수를 전달할 수 있습니다. 이것을 이용해, 아래의 화상과 같이 의사적인 계층을 가지면서, 차례로 읽을 수 있는 링크도 표시하... HTMLpug11tyeleventy Buefy placeholder가 작동하지 않는 경우 위와 같은 디자인을 구현하기 위해 을 참고로 구현. (코피페) pug 그러나 실제로 표시되는 것은 아래의 디자인으로, 공식 문서와 같은 구현이 되지 않는다. 무엇보다 placeholder가 효과가 없는 것이 제일 신경이 쓰인다. 왜 年/月/日 라고 표시되어 있다. (왠지 오른쪽 끝에 캘린더 아이콘도 표시됩니다) 기대하는 움직임은 placeholder="Select a date" 로 설정하고 ... HTMLpugVue.js#buefy 【Nuxt.js】Vue 파일의 Pug 템플릿을 HTML로 변환하는 방법 Nuxt.js에서 template 부분을 pug로 기술하고 있었지만 HTML로 다시 작성했을 때의 메모입니다. 그만한 이유는 eslint-plugin-vue가 작동하지 않기 때문입니다. 이것에 의해서 쓰는 방법에 통일감이 없고 에러도 자력으로 발견하지 않으면 안 되는 등 여러가지 문제가 보아 왔습니다. 그 밖에도 소스의 샘플이 대체로 HTML로 쓰여져 있으며, pug에서 할 수있는 일은 대체... HTMLpugVue.jsnuxt.js pug 쓰는 방법, 사용법(변수 & 배열편) 덮어쓸 수 있는 변수를 지정할 수 있다. 지정하고 있는 파일과 다른 파일에서도 덮어쓰기가 가능. 하이픈 + 개행 + 들여 쓰기로 일일이 하이픈을 쓰지 않아도된다 var도 생략할 수 있다 템플릿 리터럴 방식으로 변수와 문자열을 연결할 수 있으며, 그 때는 ${XXX}문자열로 단순히 내뱉을 때는 #{XXX} 덮어쓸 수 없는 변수를 지정할 수 있습니다. 덮어 쓰려고하면 오류가 발생합니다. var ... HTMLpug storybook for html이 너무 사용하기 어렵기 때문에 pug를 사용하여 잘 사용하는 방법을 생각해 보았습니다. storybook for html을 이용하는 경우는 vu이라든지 사용하지 않는다고 생각합니다만, 실제 제작으로 원소의 HTML로 쓰는 케이스는 거의 없지요. 그런 가운데 storybook을 이용하고 싶은 경우 【코드 보완이 없는 환경에서 HTML을 쓴다】인가 【빌드하고 코피페】, 게다가 쓴 곳에서 pug로서 재이용할 수 있는 내용이 아닙니다. 잘못하면 일이 늘어나는 것만으로 분명히 말해서 사... pugHTML자바스크립트CSSstorybook Pug 초학자의 비망록 : 루프편 Pug 초학자의 비망록입니다. 점점 추기해 갑니다. 완성 이미지 ↑와 같이 루프로 li.item 를 생성하면서, 각각에 i1 , i2 , i3 … 와 번호 첨부의 클래스명을 할당하고 싶을 때에. index.pug 더 똑똑한 쓰기가있을 것 같은 느낌 ... 완성 이미지 일반적인 메뉴 목록을 만들 때. index.pug 잘 다룰 수 있으면 즐거워 보인다! 계속 공부하겠습니다.... HTMLpugHTML5초보자 pug와 sass 올레올레 템플릿 드물게 새로운 사이트를 만들지 않는 탄포 탑승을위한 올레올레스 니펫입니다. 탄포포는 모처럼 기억한 모던한 구조를 바로 잊는다… See the Pen by H.NOTSU ( ) index.pug 참고 사이트 위 링크의 소스를 pug 용으로 다시 작성하여 추가 수정 main.scss 참고 사이트 상기를 참고로 이하 약 추가 포인트는 main의 min-height: calc( 100vh - ( [... HTMLCSSSasspug How to make animation on scroll ? There have so many animation for icon scroll, but today we will do animation type arrow run down like animated last post. Start with element html You just simple put html will is:<div class="icon-scroll"></div>and if you... pugHTMLscssothersanimation 헤더에 설명하는 다양한 요약 | OGP 헤더에 설명 된 다양한 요약을 Pug와 html 모두 메모 index.pug index.html... HTMLpugOGP transition과 transform의 관계를 이해해 본다 transition 와 transform 의 관계성을 이해하는데 고생했기 때문에 이해하는 방법을 게시합니다. 애니메이션을 공부할 때,animation @keyframes 그리고, transition 와 transform 의 4개의 말이 나왔습니다 이번은, transition 와 transform 는 어떤 역할인가? 글을 씁니다. transition 와 transform 는 세트로 기억하는 것... 애니메이션HTML변환transitionCSS transition 속성을 이해하기 위해 기본 button을 만들어 보았습니다. transition을 사용하여 버튼에 애니메이션을 적용해보십시오. 완성판 사실은 애니메이션도 붙은 이미지를 게재하고 싶었지만, 방법이 몰라서 이미지만 게재했습니다. 게재 방법 가르쳐 줘도 좋다! 라는 마음 친절한 분 연락 기다리고 있습니다 목표 : transition의 기초를 이해하기 위해 텍스트 편집기는 VSCode. ↓아래쪽의 transition의 설명을 참고로 했습니다 매우 알기 쉬웠습... 애니메이션HTML변환transitionCSS 리볼버 목록 만들기 원형 목록을 표시하고 스크롤과 연동하여 회전하는 권총 리볼버와 같은 애니메이션을 만드는 목록 만들기 회전용 목록을 만듭니다. CSS에서 자식 요소의 표시를 유지하면서 요소를 회전하는 방법 이 기사를 참고로 화면을 작성합니다. 이번에는 스크롤과 함께 회전시키는 움직임을 구현하므로 아래를 비롯한 animation 부분은 필요하지 않습니다. CSS와 jQuery로 만드는 스크롤에 따라 회전하는 로... 애니메이션프런트 엔드HTML자바스크립트변환 【Copipe OK】 hover하면 움직이는 CSS 버튼 애니메이션 51 선 코피페만으로 만들 수 있는 버튼 애니메이션을 51개를 소개합니다. box-shadow, filter, transform 등을 듬뿍 사용하고 있으며, transition에서 부드러운 움직임이 나타납니다 코드에는 설명도 알기 쉽게 쓰여 있으므로 꽤 참고가 됩니다 Web 디자인 초보자는 물론입니다만, 백엔드 엔지니어에게도 매우 도움이 되는 내용이 되고 있습니다 1. transform을 다루는 버튼... 애니메이션프런트 엔드HTMLCSS초보자 【코피페 OK】 hover하면 움직이는 CSS 버튼 애니메이션 46선 코피페만으로 만들 수 있는 버튼 애니메이션을 46개를 소개합니다. box-shadow, filter, transform 등을 듬뿍 사용하고 있으며, transition에서 부드러운 움직임이 나타납니다 코드에는 설명도 알기 쉽게 쓰여 있으므로 꽤 참고가 됩니다 Web 디자인 초보자는 물론입니다만, 백엔드 엔지니어에게도 매우 도움이 되는 내용이 되고 있습니다 1. transform을 다루는 버튼... 애니메이션프런트 엔드HTMLCSS초보자 【Copipe OK】 hover하면 움직이는 CSS 버튼 애니메이션 30 선 코피페만으로 만들 수 있는 버튼 애니메이션을 30개를 소개합니다. box-shadow, filter, transform 등을 듬뿍 사용하고 있으며, transition에서 부드러운 움직임이 나타납니다 코드에는 설명도 알기 쉽게 쓰여 있으므로 꽤 참고가 됩니다 Web 디자인 초보자는 물론입니다만, 백엔드 엔지니어에게도 매우 도움이 되는 내용이 되고 있습니다 1. transition을 다루는 버... 애니메이션프런트 엔드HTMLCSS초보자 이전 기사 보기
React 피엔 챌린지 에서 영감을 받은 것입니다. 2019년 12월부터 Udemy에서 React 학습을 시작했습니다만, 연습에 꼭 좋은 도전이라고 생각해 보았습니다. 이미지를 클릭합니다. 슬라이더를 구현하기 위해서, 처음으로 라고 하는 것을 사용해 보았습니다. React의 Hooks를 학습했기 때문에 클래스 컴포넌트를 사용하지 않고 props에서 버킷 릴레이하지 않는 파라미터의 인도 방법을 채용해 보았습니다. C... React피엔HTMLCSS후크 React hooks와 class 컴퍼넌트에서의 setState의 거동의 차이에 대해 (움직일 수 있는 코드 있음) 여기는 다음 기사에 쓴 hooks와 class 컴포넌트에 있어서의 setState의 차이를 다른 기사로 한 것입니다. hooks와 클래스형 컴퍼넌트의 setState에서는 거동이 다르다 후크는 오래된 상태를 인계받지 않으므로 업데이트 할 때 오래된 상태도 설정해야합니다. 우선은 hooks와 class의 setState의 차이를 체험해 보세요. 다음 두 가지를 html 파일에 붙여 넣고 원하는... ReactHTML자바스크립트초보자후크 템플릿 엔진 "Twig"의 변수 범위 이야기 프로그래밍 언어의 변수는 선언하는 위치에 따라 범위가 다르며 변수의 범위라고합니다. 그리고 Twig에도 변수의 범위가 있습니다. 일반적으로 Twig 템플릿에서 변수에 값을 설정하면 전역 변수입니다. 예) set 태그를 사용하여 변수에 값 설정 템플릿의 시작 부분에서 선언된 변수는 이후 템플릿에서 어디서나 액세스할 수 있습니다. 예) 글로벌 스코프로 선언된 변수는 임의의 장소에서 액세스 가능 ... 심포니Drupal8HTMLDrupal트위그 WordPress를 하고 싶기 때문에 로컬로 환경 구축했다(설치로부터 설정) WordPress의 공부가 하고 싶어졌으므로, 로컬로 환경 구축을 해 보았다. 현재 WordPress의 지식은 제로로, CMS라는 것만 알고 있는 상태. 이 사이트를 바탕으로 해 보았다 (알기 쉬운) 여기에서 다운로드 가운데 다운로드 버튼을 잡아. 다운로드 내용은 이런 느낌 다운로드하면 안심하고 k. WordPress를 로컬 환경에서 움직이는 데 필요한 도구 같은. MAMP에서도 좋을 것 같... HTMLCMSWordPress초보자 HTML로 구축할 수 있는 CMS 「Vapid」를 접해 본 Part1 Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML. HTML상에서 대부분의 구축을 실시할 수 있는 심플한 CMS로서 등장한 「Vapid」입니다만, 일본어의 정보가 거의 보이지 않았기 ... HTMLnpmCSSVapidCMS Java PowerPoint를 HTML 형식으로 변환 Spire.Presentation for Java가 강한 라이브러리라도 여러분 이미 알고 계십니까? Spire.Presentation for Java는 다양한 기능을 탑재하고 있습니다. 특히, 그 변환 기능은 훌륭하고, PowerPoint를 다양한 파일 형식으로 변환할 수 있기 때문에, 매우 편리한 라이브러리군요. 그래서 오늘 PowerPoint를 HTML 형식으로 변환하는 방법을 소개하겠습... HTML파워 포인트자바변환 C# PowerPoint를 HTML로 변환 오늘은 C#에 대한 이야기입니다. 그리고 Spire.Presentation이라는 무료 라이브러리를 사용하여 PowerPoint를 HTML로 변환하는 방법을 소개합니다. 아래 준비 1.E-iceblue 공식 사이트에서 무료 버전을 다운로드합니다. 2. Visual Studio를 시작하여 새 프로젝트를 만든 다음 설치된 파일에 있던 적절한 Spire.Presentation.dll을 참조에 추가합... HTML파워 포인트C#변환 curl에서 얻은 웹 소스 코드에 색을 지정하고 싶습니다. iPad로 코딩을 하면 브라우저에서 소스를 확인할 수 없기 때문에 불편합니다. 소스를 보는 전용 앱도 있는 것 같지만, 앱을 넣지 않고 어떻게 해야 할지 모색했습니다. 대상은 iPad에서 원격으로 Linux에 들어가서 작업하는 사람입니다. ※iPad의 프로그래밍 환경 구축의 이야기는 이쪽 curl에서 얻고 source-highlight로 색칠하고 less로 봅니다. source-highlig... BashHTMLlessiPadcurl 【JavaScript】 Chart.js를 사용하여 꺾은 선형 차트를 표시하는 방법 앱에 그래프를 구현하고 싶은 분 그래프 표시를 해, 수치를 알기 쉽게 한다 완성 이미지는 아래와 같이 ※화상의 한가운데의 검색 기능에 관해서는 아래 기사로 쓰고 있습니다. 1. 전제 *본의 투고수를 유저의 마이 페이지(상세 화면)로 집계하고 있어 그 수치를 꺾은선 그래프화합니다. 집계 방법은 아래 기사에서 공식 홈페이지 2.지난 7일간의 투고수를 취득 사용자 내 페이지에 게시물 수를 표시합니... HTMLchart.js자바스크립트 Table 태그에 Class를 추가하기만 하면 그래프와 차트를 구현할 수 있는 CSS 프레임워크를 사용해 보자(Charts.css) Charts.css라는 HTML 클래스 지정만으로 차트와 그래프를 표시 할 수있는 프레임 워크가 있다는 것을 알았으므로 어떤 것을 시도했습니다. 공식 사이트 CDN 지정 · CSS 설정으로 다음을 지정 sample.html CDN을 지정하고 테이블 태그에 클래스를 추가합니다. charts-css 다음에 차트의 종류, 그리고 옵션등입니다. sample.html 종류는 이하와 같은 것이 있습니다... HTML그래프chart.jsCSS초보자 Chart.js에서 원형 차트 작성 chart.js에서 데이터베이스 값에서 간단한 원형 차트 만들기 스포츠 대회에서 자주 있는 승패 확률 그래프(최대 100%라는 설정) 데이터베이스 forecasts 테이블 num은 win_school의 승리 확률 win_school은 승리가 예상되는 팀 lose_school은 잃을 것으로 예상되는 팀 id num user_id win_school lose_school A학원 B학원 컨트롤러 ... HTMLchart.jsVue.jsRails Chart.js로 가로 스크롤 가능한 그래프 만들기 Chart.js에서는 보통 그래프를 만들면 화면의 폭에 맞추어 1개의 데이터당의 사이즈를 반응형으로 조정해 표시해 줍니다. 매우 편리하지만 데이터의 양이 많으면 꽤 보기 어려워집니다. 그래서 데이터 1개당의 가로폭을 고정해 화면에 들어갈 수 없는 분은 가로 스크롤로 보이도록(듯이) 하려고 생각했습니다만, 꽤 고생했기 때문에 메모를 남깁니다. 도움이되면 다행입니다. 완성도 이번에는 막대 그래프... HTMLchart.js자바스크립트 자바 스크립트로 외국에서 유명한 게임 "CONNECT4"를 만들어 보았습니다. Connect4를 아시는 분은 많을까 생각 합니다만, 간단하게 말씀드리면 네 번째 줄입니다. 선공과 후공이 교대로 보드 위에 조각을 치고, 종횡 비스듬한 어딘가에 4번째 이상 늘어놓으면 이기기···라고 하는 심플한 게임입니다. 자신의 집에도 네 번째 줄이 있기 때문에 누군가 함께 놀지 않겠습니까 (갑자기 초대) ・Node.js(디버그용) 전부 해설하면 중복이 되기 때문에, 만들어 보고 공부가... HTML게임자바스크립트 flex box 기초 레이아웃을 정돈하기 위해서는 float나 margin:0 auto;를 사용하고 있었습니다만, Flexbox가 매우 편리했기 때문에 비망록으로 투고합니다. 참고> flexbox란, 「간단하게 좋은 느낌의 레이아웃으로 할 수 있는 css의 구조」 float 및 margin:0 auto;와 다른 이점이 있습니다. ・복잡한 내용을 상하 좌우에 간단하게 레이아웃 가능 ··높이가 사라지지 않고, cle... HTMLCSS초보자flexbox 11ty(eleventy)의 collections와 front-matter로 유기적인 내비게이션을 자동 생성 내비게이션을 자동화하려는 목적으로 사이트의 문서를 11ty와 Pug로 다시 작성합니다. 11ty에서는 collections.all 로 사이트 전체의 정보를 객체로 얻을 수 있습니다. 또한 각 페이지의 시작 부분에 다음과 같이 front-matter를 작성하여 페이지별 변수를 전달할 수 있습니다. 이것을 이용해, 아래의 화상과 같이 의사적인 계층을 가지면서, 차례로 읽을 수 있는 링크도 표시하... HTMLpug11tyeleventy Buefy placeholder가 작동하지 않는 경우 위와 같은 디자인을 구현하기 위해 을 참고로 구현. (코피페) pug 그러나 실제로 표시되는 것은 아래의 디자인으로, 공식 문서와 같은 구현이 되지 않는다. 무엇보다 placeholder가 효과가 없는 것이 제일 신경이 쓰인다. 왜 年/月/日 라고 표시되어 있다. (왠지 오른쪽 끝에 캘린더 아이콘도 표시됩니다) 기대하는 움직임은 placeholder="Select a date" 로 설정하고 ... HTMLpugVue.js#buefy 【Nuxt.js】Vue 파일의 Pug 템플릿을 HTML로 변환하는 방법 Nuxt.js에서 template 부분을 pug로 기술하고 있었지만 HTML로 다시 작성했을 때의 메모입니다. 그만한 이유는 eslint-plugin-vue가 작동하지 않기 때문입니다. 이것에 의해서 쓰는 방법에 통일감이 없고 에러도 자력으로 발견하지 않으면 안 되는 등 여러가지 문제가 보아 왔습니다. 그 밖에도 소스의 샘플이 대체로 HTML로 쓰여져 있으며, pug에서 할 수있는 일은 대체... HTMLpugVue.jsnuxt.js pug 쓰는 방법, 사용법(변수 & 배열편) 덮어쓸 수 있는 변수를 지정할 수 있다. 지정하고 있는 파일과 다른 파일에서도 덮어쓰기가 가능. 하이픈 + 개행 + 들여 쓰기로 일일이 하이픈을 쓰지 않아도된다 var도 생략할 수 있다 템플릿 리터럴 방식으로 변수와 문자열을 연결할 수 있으며, 그 때는 ${XXX}문자열로 단순히 내뱉을 때는 #{XXX} 덮어쓸 수 없는 변수를 지정할 수 있습니다. 덮어 쓰려고하면 오류가 발생합니다. var ... HTMLpug storybook for html이 너무 사용하기 어렵기 때문에 pug를 사용하여 잘 사용하는 방법을 생각해 보았습니다. storybook for html을 이용하는 경우는 vu이라든지 사용하지 않는다고 생각합니다만, 실제 제작으로 원소의 HTML로 쓰는 케이스는 거의 없지요. 그런 가운데 storybook을 이용하고 싶은 경우 【코드 보완이 없는 환경에서 HTML을 쓴다】인가 【빌드하고 코피페】, 게다가 쓴 곳에서 pug로서 재이용할 수 있는 내용이 아닙니다. 잘못하면 일이 늘어나는 것만으로 분명히 말해서 사... pugHTML자바스크립트CSSstorybook Pug 초학자의 비망록 : 루프편 Pug 초학자의 비망록입니다. 점점 추기해 갑니다. 완성 이미지 ↑와 같이 루프로 li.item 를 생성하면서, 각각에 i1 , i2 , i3 … 와 번호 첨부의 클래스명을 할당하고 싶을 때에. index.pug 더 똑똑한 쓰기가있을 것 같은 느낌 ... 완성 이미지 일반적인 메뉴 목록을 만들 때. index.pug 잘 다룰 수 있으면 즐거워 보인다! 계속 공부하겠습니다.... HTMLpugHTML5초보자 pug와 sass 올레올레 템플릿 드물게 새로운 사이트를 만들지 않는 탄포 탑승을위한 올레올레스 니펫입니다. 탄포포는 모처럼 기억한 모던한 구조를 바로 잊는다… See the Pen by H.NOTSU ( ) index.pug 참고 사이트 위 링크의 소스를 pug 용으로 다시 작성하여 추가 수정 main.scss 참고 사이트 상기를 참고로 이하 약 추가 포인트는 main의 min-height: calc( 100vh - ( [... HTMLCSSSasspug How to make animation on scroll ? There have so many animation for icon scroll, but today we will do animation type arrow run down like animated last post. Start with element html You just simple put html will is:<div class="icon-scroll"></div>and if you... pugHTMLscssothersanimation 헤더에 설명하는 다양한 요약 | OGP 헤더에 설명 된 다양한 요약을 Pug와 html 모두 메모 index.pug index.html... HTMLpugOGP transition과 transform의 관계를 이해해 본다 transition 와 transform 의 관계성을 이해하는데 고생했기 때문에 이해하는 방법을 게시합니다. 애니메이션을 공부할 때,animation @keyframes 그리고, transition 와 transform 의 4개의 말이 나왔습니다 이번은, transition 와 transform 는 어떤 역할인가? 글을 씁니다. transition 와 transform 는 세트로 기억하는 것... 애니메이션HTML변환transitionCSS transition 속성을 이해하기 위해 기본 button을 만들어 보았습니다. transition을 사용하여 버튼에 애니메이션을 적용해보십시오. 완성판 사실은 애니메이션도 붙은 이미지를 게재하고 싶었지만, 방법이 몰라서 이미지만 게재했습니다. 게재 방법 가르쳐 줘도 좋다! 라는 마음 친절한 분 연락 기다리고 있습니다 목표 : transition의 기초를 이해하기 위해 텍스트 편집기는 VSCode. ↓아래쪽의 transition의 설명을 참고로 했습니다 매우 알기 쉬웠습... 애니메이션HTML변환transitionCSS 리볼버 목록 만들기 원형 목록을 표시하고 스크롤과 연동하여 회전하는 권총 리볼버와 같은 애니메이션을 만드는 목록 만들기 회전용 목록을 만듭니다. CSS에서 자식 요소의 표시를 유지하면서 요소를 회전하는 방법 이 기사를 참고로 화면을 작성합니다. 이번에는 스크롤과 함께 회전시키는 움직임을 구현하므로 아래를 비롯한 animation 부분은 필요하지 않습니다. CSS와 jQuery로 만드는 스크롤에 따라 회전하는 로... 애니메이션프런트 엔드HTML자바스크립트변환 【Copipe OK】 hover하면 움직이는 CSS 버튼 애니메이션 51 선 코피페만으로 만들 수 있는 버튼 애니메이션을 51개를 소개합니다. box-shadow, filter, transform 등을 듬뿍 사용하고 있으며, transition에서 부드러운 움직임이 나타납니다 코드에는 설명도 알기 쉽게 쓰여 있으므로 꽤 참고가 됩니다 Web 디자인 초보자는 물론입니다만, 백엔드 엔지니어에게도 매우 도움이 되는 내용이 되고 있습니다 1. transform을 다루는 버튼... 애니메이션프런트 엔드HTMLCSS초보자 【코피페 OK】 hover하면 움직이는 CSS 버튼 애니메이션 46선 코피페만으로 만들 수 있는 버튼 애니메이션을 46개를 소개합니다. box-shadow, filter, transform 등을 듬뿍 사용하고 있으며, transition에서 부드러운 움직임이 나타납니다 코드에는 설명도 알기 쉽게 쓰여 있으므로 꽤 참고가 됩니다 Web 디자인 초보자는 물론입니다만, 백엔드 엔지니어에게도 매우 도움이 되는 내용이 되고 있습니다 1. transform을 다루는 버튼... 애니메이션프런트 엔드HTMLCSS초보자 【Copipe OK】 hover하면 움직이는 CSS 버튼 애니메이션 30 선 코피페만으로 만들 수 있는 버튼 애니메이션을 30개를 소개합니다. box-shadow, filter, transform 등을 듬뿍 사용하고 있으며, transition에서 부드러운 움직임이 나타납니다 코드에는 설명도 알기 쉽게 쓰여 있으므로 꽤 참고가 됩니다 Web 디자인 초보자는 물론입니다만, 백엔드 엔지니어에게도 매우 도움이 되는 내용이 되고 있습니다 1. transition을 다루는 버... 애니메이션프런트 엔드HTMLCSS초보자 이전 기사 보기