- 68
- 219 393
RittoRitto
South Korea
Приєднався 6 сер 2012
I am creating UI web development content using HTML, CSS, and JavaScript.
워드프레스 퍼블리싱 테마개발 - 5.tailwind css 타이포그래피 플러그인 적용, 본문 헤더, 목차, 내용 작성 #tailwindcss
본문 화면을 구성하면서 아래와 같은 내용을 다루고 있습니다.
- tailwindcss typography(타이포그래피) 플러그인 적용
- 본문헤더, 목차, 내용 작성
#nodejs #wordpress #html #css #javascript #php #git #vscode #frontenddevelopment #frontend #tailwindcss #애드센스 #adsense #lorempicsum #웹퍼블리싱
==========================================
소개된 도구들의 링크는 아래와 같습니다.
🔗한글입숨: guny.kr/stuff/klorem/
🔗tailwindcss typography plugin : github.com/tailwindlabs/tailwindcss-typography
==========================================
tailwindcss typography 플러그인 설치 명령
npm i -D @tailwindcss/typography
==========================================
기초적인 HTML/CSS를 익히고 싶으신 분들은 아래 링크를 참고해주세요.
🔗github.com/illustudio/design-to-code_blog
==========================================
비즈니스, 협업 문의는 아래 이메일로 연락바랍니다.
🔗hyunki@illustudio.co.kr
- tailwindcss typography(타이포그래피) 플러그인 적용
- 본문헤더, 목차, 내용 작성
#nodejs #wordpress #html #css #javascript #php #git #vscode #frontenddevelopment #frontend #tailwindcss #애드센스 #adsense #lorempicsum #웹퍼블리싱
==========================================
소개된 도구들의 링크는 아래와 같습니다.
🔗한글입숨: guny.kr/stuff/klorem/
🔗tailwindcss typography plugin : github.com/tailwindlabs/tailwindcss-typography
==========================================
tailwindcss typography 플러그인 설치 명령
npm i -D @tailwindcss/typography
==========================================
기초적인 HTML/CSS를 익히고 싶으신 분들은 아래 링크를 참고해주세요.
🔗github.com/illustudio/design-to-code_blog
==========================================
비즈니스, 협업 문의는 아래 이메일로 연락바랍니다.
🔗hyunki@illustudio.co.kr
Переглядів: 105
Відео
워드프레스 퍼블리싱 테마개발 - 4.tailwind css 커스터마이징, 반응형 적용, lorem picsum 사용, 수익성 높은 애드센스 배너사이즈 #tailwindcss
Переглядів 794 місяці тому
본문 화면을 구성하면서 아래와 같은 내용을 다루고 있습니다. - 수익성 높은 애드센스 배너사이즈 - tailwindcss를 커스터마이징 하는 방법 - 반응형으로 화면을 구성하는 방법 - lorem picsum을 이용해 빈 공간을 채워줄 이미지를 손쉽게 사용하는 방법 #nodejs #wordpress #html #css #javascript #php #git #vscode #frontenddevelopment #frontend #tailwindcss #애드센스 #adsense #lorempicsum #웹퍼블리싱 소개된 도구들의 링크는 아래와 같습니다. 🔗daisyUI: daisyui.com 🔗tailwindcss responsive manual : tailwindcss.com/docs/responsive...
워드프레스 퍼블리싱 테마개발 - 3.header, iconify 적용 #wordpress #frontend
Переглядів 834 місяці тому
header 부분을 퍼블리싱하면서 iconify 아이콘 설정, 그리고 tailwindcss의 설정을 추가적으로 다루고 있습니다. #nodejs #wordpress #html #css #javascript #php #git #vscode #frontenddevelopment #frontend #tailwindcss #iconify 소개된 도구들의 링크는 아래와 같습니다. 🔗Iconify : iconify.design 기초적인 HTML/CSS를 익히고 싶으신 분들은 아래 링크를 참고해주세요. 🔗github.com/illustudio/design-to-code_blog 비즈니스, 협업 문의는 아래 이메일로 연락바랍니다. 🔗hyunki@illustudio.co.kr
워드프레스 홈페이지 만들기 - 2.Tailwindcss 설치 및 개요 #tailwindcss #wordpress
Переглядів 1144 місяці тому
Vite로 구성해놓은 프로젝트 환경에서 npm을 이용해 tailwindcss를 설치하고 사용하는 방법을 설명하고 있습니다. #nodejs #wordpress #html #css #javascript #php #git #vscode #frontenddevelopment #frontend #tailwindcss 소개된 도구들의 링크는 아래와 같습니다. 🔗Auto Close Tag : marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag 🔗Auto Complete Tag : marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag 🔗Auto Rename ...
워드프레스 홈페이지 만들기 - 1.Git,Node.js,VSCode 설치와 Vite를 이용한 프로젝트 시작 #nodejs #wordpress
Переглядів 2064 місяці тому
Git, Node.js, VSCode를 설치하고, Vite를 이용해서 실제 프로젝트를 시작하는 방법을 소개하고 있습니다. Vite를 사용하면 HMR을 이용한 사이트 새로고침으로 편리한 개발환경을 구축해줍니다. #nodejs #wordpress #html #css #javascript #php #git #vscode #frontenddevelopment #frontend 소개된 도구들의 링크는 아래와 같습니다. 🔗node.js : nodejs.org/en/ 🔗VSCode : code.visualstudio.com/ 🔗Git : git-scm.com/ 기초적인 HTML/CSS를 익히고 싶으신 분들은 아래 링크를 참고해주세요. 🔗github.com/illustudio/design-to-code_blog 영상...
워드프레스 홈페이지 만들기 - 0.도구 소개 #nodejs #wordpress
Переглядів 1384 місяці тому
웹퍼블리싱부터 테마까지 만들어보려고 합니다. 어떤 도구를 사용할 것인지 짧게 소개하는 영상이에요. #nodejs #wordpress #tailwindcss #html #css #javascript #php #localwp #swiper #iconify #pretendard #poppins #frontenddevelopment #frontend 소개된 도구들의 링크는 아래와 같습니다. 그중 미리 설치해두면 좋은 도구는 아래 두개입니다. 🔗node.js : nodejs.org/en/ 🔗LocalWP : localwp.com 아래의 도구들은 작업 중간에 필요할때마다 npm을 통해 설치할 것입니다. 🔗vite : ko.vitejs.dev 🔗tailwindcss : tailwindcss.com 🔗swiper.j...
어도비 포토샵,일러스트레이터 구독 취소하고 어피니티 디자이너로 옮겨간 이야기 #adobe #어도비
Переглядів 2745 місяців тому
#어도비 #illustrator #adobeillustrator #adobesoftware #photoshop #adobephotoshop #어도비구독취소 #어도비플랜취소 #어피니티디자이너 #affinitydesigner #affinityphoto 최근 어도비 구독요금이 올라가면서 많은 사람들이 어도비로부터 탈출 하고 있습니다. 물론 어도비는 업계 표준 소프트웨어로서 오랜시간동안 많은 디자이너들에게 사랑 받았습니다. 하지만 너무 무거워진 프로그램과 더불어 높은 이용금액으로 원성의 목소리도 높아지고 있죠. 포토샵과 일러스트레이터 이외에 다른 대안은 없을까 찾아보는 분들도 있을겁니다. 그래서 이런 저런 이야기를 나눠보려고 합니다. 어피니티 디자이너를 비롯한 어피니티 제품군이 현재 6개월간 무료 체험판 제공...
네이버 SEO 웹마스터도구 오류 해결 - H1 요소가 2개이상 발견 될 경우 #네이버SEO #네이버웹마스터도구
Переглядів 61610 місяців тому
네이버 SEO 웹마스터도구 오류 해결 - H1 요소가 2개이상 발견 될 경우 #네이버SEO #네이버웹마스터도구
To Do List - React, Express, SQLite, Open-Props, React-hot-toast, No Talking
Переглядів 249Рік тому
To Do List - React, Express, SQLite, Open-Props, React-hot-toast, No Talking
링크트리, 리틀리와 같은 인스타그램 프로필 링크 사이트를 직접 만들어 봅시다. html,css,javascript
Переглядів 5802 роки тому
링크트리, 리틀리와 같은 인스타그램 프로필 링크 사이트를 직접 만들어 봅시다. html,css,javascript
Hero Section, HTML, CSS, SASS(SCSS), animation - 피트니스 크로스핏 운동 웹페이지 웹퍼블리싱 애니메이션 작업
Переглядів 2013 роки тому
Hero Section, HTML, CSS, SASS(SCSS), animation - 피트니스 크로스핏 운동 웹페이지 웹퍼블리싱 애니메이션 작업
Fireworks effect HTML, CSS, Javascript - 근하신년, 새해 복 많이 받으세요. 불꽃놀이 효과 퍼블리싱, 자바스크립트
Переглядів 7523 роки тому
Fireworks effect HTML, CSS, Javascript - 근하신년, 새해 복 많이 받으세요. 불꽃놀이 효과 퍼블리싱, 자바스크립트
snowfall effect HTML, CSS, Javascript - 크리스마스 겨울 분위기 눈 내리는 효과 퍼블리싱, 자바스크립트
Переглядів 9153 роки тому
snowfall effect HTML, CSS, Javascript - 크리스마스 겨울 분위기 눈 내리는 효과 퍼블리싱, 자바스크립트
마우스 오버, 비디오 재생 퍼블리싱, 자바스크립트 - Hover effect and control video using HTML,SCSS & Vanilla Javascript
Переглядів 1,5 тис.3 роки тому
마우스 오버, 비디오 재생 퍼블리싱, 자바스크립트 - Hover effect and control video using HTML,SCSS & Vanilla Javascript
헤더 메뉴 네비게이션 (바닐라 자바스크립트) - Header Menu Navigation Using HTML,SCSS & Vanilla Javascript
Переглядів 1,4 тис.3 роки тому
헤더 메뉴 네비게이션 (바닐라 자바스크립트) - Header Menu Navigation Using HTML,SCSS & Vanilla Javascript
일러스트레이터 - 간단하게 그려보자 02 - 기초도형으로 할로윈 해골 그리기
Переглядів 5754 роки тому
일러스트레이터 - 간단하게 그려보자 02 - 기초도형으로 할로윈 해골 그리기
기초도형으로 치킨 닭다리 그리기 - 일러스트레이터로 간단하게 그려보자 - 01
Переглядів 1,4 тис.4 роки тому
기초도형으로 치킨 닭다리 그리기 - 일러스트레이터로 간단하게 그려보자 - 01
Digital Speed Painting, K-pop Idol, Twice chaeyoung
Переглядів 1444 роки тому
Digital Speed Painting, K-pop Idol, Twice chaeyoung
Vintage vector dolphin illustration speed art - 빈티지 스타일 돌고래 일러스트레이션 타임랩스
Переглядів 1,1 тис.4 роки тому
Vintage vector dolphin illustration speed art - 빈티지 스타일 돌고래 일러스트레이션 타임랩스
일러스트레이터 - Reset Bounding Box가 먹히지 않을 때 대처 방법 , shape와 path의 차이
Переглядів 1,5 тис.4 роки тому
일러스트레이터 - Reset Bounding Box가 먹히지 않을 때 대처 방법 , shape와 path의 차이
[어도비 일러스트레이터 CC (2020)] 회색바, 회색박스 버그 해결방법! - Adobe illustrator CC 2020 - Greybox bug fix
Переглядів 3,8 тис.5 років тому
[어도비 일러스트레이터 CC (2020)] 회색바, 회색박스 버그 해결방법! - Adobe illustrator CC 2020 - Greybox bug fix
소사이어티6 가입하기 - 그림으로 수익을 올려보자 Join Society6
Переглядів 2,5 тис.5 років тому
소사이어티6 가입하기 - 그림으로 수익을 올려보자 Join Society6
What I’m like when I’m angry
She killed her
The killer
She killed the planet
안녕하세요 초보적인 질문드립니다.. "<title> 요소를 정확하고 고유하게 작성합니다" 이 문구를 html내에 작성하였더니 <title> 부분에서 에러가 나는데.. 마크업속에 텍스트로 처리하려면 어떻게 하나요..
title은 head안에 작성할때만 허용이 됩니다. body 태그 안에서 <title>과 같은 태그를 문자열로 표현하시려면 아래 예시와 같이 pre태그로 감싸주세요 <pre><title> 요소를 정확하고 고유하게 작성합니다</pre> <,> 을 < >로 엔티티 코드 형식으로 바꿔서 작성하는 방법도 있습니다.
개추
안내선 그리거나 선으로 그렸는데, 칼럼 설정하는게 있었군요!!! 대박쓰 감사합니다!!!!!
Talent!!
이거 떡상할거같은데
업무상 워드프레스 테마를 개발해야 되게 되었는데, 워드프레스는 처음 써봐서 어떻게 해야 하나 고민하던 차에 강의를 보게 되었습니다. 대부분 테마 강의가 단순히 html, css로 처리하는 것에 그쳐서... 어떻게 프론트 툴들을 사용할 수 없나 싶었는데 마침 익숙한 vite, tailwindcss로 알려주셔서 정말 감사합니다! 얼른 워드프레스와 연결하는 부분도 강의가 나오면 좋겠네요 기다리고 있겠습니다!
아무도 안 보는거 같아서 연재하던걸 멈췄는데 보는 분이 계셨군요 ㄷㄷ 현재 작업중인 것들이 있어서 마무리 되는대로 조만간 다시 이어보도록 하겠습니다.
@@RittoRitto 아이고 감사합니다ㅎㅎ 좋아요 밖에 해드릴게 없긴하지만 필요한 많은 분들에게 알려졌으면 좋겠네요
@@RittoRitto 워드프레스 연결까지 다 안쓰셔서 그만보려고요
ㅋㅋㅋㅋㅋㅋㅋㅋ ㅋㅋㅋㅋㅋ ㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋㅋㅋㅋㅋㅜㅜ
L O L
ㅋㅋㅋ
동심퐈게 ㅠㅠ
모야?😢😢😢😢😢😢
아,아앗...
안녕하세요. 영상 잘 보고 있습니다. Node.js 등등을 사용하는 모습이 워드프레스 org 홈페이지에서 테마 개발에 대한 튜토리얼 가이드같은 정보를 볼 때와는 느낌이 약간 다른데, 전공서적과 현업의 차이(?)같은 느낌으로 생각을 하면 될까요?
네. 지금 과정은 사실 퍼블리싱도 함께 하고 있어서 node.js가 하는 부분은 퍼블리싱에 더 큰 역할을 합니다. 여기서는 다루지 않겠지만, 플러그인 개발에도 리액트를 사용할 수 있다보니 최근엔 워드프레스 개발에도 node.js를 사용하는 케이스들이 있습니다.
@@RittoRitto 감사합니다. 사실 해당 과정을 따라서 진행을 한 결과물이 구텐베르크나 elementor 빌더에서 호환이 될지도 많이 궁금한 부분인데, 호환성을 위해서 제가 체크해야 할 부분이나 참고해여 할 자료가 혹시 있을까요?
@오산-y9w 구텐베르크나 엘레멘터를 고려한과정은 아닙니다. 오히려 워드프레스를 잘 아신다면 그다지 도움이되지 않을 수도 있습니다. 퍼블리싱부터 시작해서 간단한 게시글을 노출하는 정도의 과정을 생각하고 있습니다.
또 강의 주세요
네 다음편 편집하고 있습니다. 조만간 업로드 가능할거 같아요.
감사합니다.
이런식으로 모작하면 실력이 느나요?
댓글 알림이 안떠서 확인이 늦었네요. 모작은 어떤 의도를 갖고 있느냐에 따라 효과가 다릅니다. 단순히 테크닉 연습일 수도 있고, 스타일을 익히기 위해서 일수도 있습니다. 저는 그냥 테크닉 연습을 목적으로 만들어본 영상입니다.
테크닉 연습이란게 무슨 말인가요?
@@오늘하루어땠어-u9g 사전적 의미 그대로 기술적인 부분을 연습했다는겁니다.
@@RittoRitto스타일을 익히기 위해하는거면 모방 방법이 다른가요?
@@오늘하루어땠어-u9g 사람마다 의견이 갈릴 수 있는 부분이긴 합니다만, 스타일을 익히기 위한 모방이면 그리고 싶은 스타일을 골라서, 참고하면서 그리거나, 대고 그리면서 스타일을 연습해야겠죠? 저의 경우엔 미리 제가 그려놓은 그림을 활용해서 일러스트레이터로 덧그리는 방식으로 영상을 올려놓았습니다.
도움 감사합니다!
금손 구매링크 정보 부탁드려요
: 금손부모님
ㅇ ㅇㅇㅇㅇㅇㅇ
Check out my Patreon page in the channel information. You can download the source code for free.
해보고 싶은데 뭐부터 시작해서 어떻게 해야 될지 전혀 모르겠네용 ㅋㅋ
아무것도 모르겠다 싶으시다면 우선 HTML, CSS, 자바스크립트에 대해서 어느정도 기초적인 공부가 좀 필요할겁니다. 조만간 기초적인 부분에 대해서도 다뤄보겠습니다
와 대박.... 포토샵때부터 도저히 펜툴 못쓰겠어서 때려쳤는데.......... 감사합니다...
도움이 되셨다니 다행이네요 =)
제가 찾던 기능 드디어 발견 ㅠㅠㅠ!!!!! 감사합니다ㅠㅠ
해결했어용 ㅠㅠㅠ 감사합니다
다행이네요 :)
어휴 시원해 계속떠서 짜증 났는데 고마워요!
오브젝트에서 트렌스퍼라는 영역이 없는데ㅜㅜ 이경우는 어떻게 해야하나요
Transfer(트랜스퍼)라는 메뉴는 없고, 영상에서 설명하는 부분은 Object -> Transform(트랜스폼) -> Reset Bounding Box 입니다.
윈도10깔고 신버전깔고 이런 증상이 있어 스트레스 받고 있는차에 해결 해주셔서감사드립니다~^^
해결 됐다니 다행입니다. 최근버전에서는 이 문제가 보완됐던데, 아직도 그런 문제를 겪는 경우가 있군요;;
존멋…
아니 누추한 곳에 이런 귀한분이 댓글을...ㅋㅋ
@@RittoRitto 저 유튜브에 댓글 처음 달아본다규!
@@ggamgo 앞으로도 많은 관심 부탁드립니다ㅋㅋㅋ
유후 잘 배워갑니당
도움이 되셨다니 다행입니다 (찡긋
리또리또님, '소사이어티6' 가입에 대한 자세하고 친절한 설명 정말 잘 들었습니다. 그런데 제가 가입하면서 'UPLOAD ART'를 눌러야 되는데 그만 'DISCOVER ART'를 눌러 가입이 되고 말았네요.^^;; 저는 그림을 그리고 있기에 상품 판매쪽을 선택해야 되는데... 어쩌지요? 다시 수정할 방법이 있을까요?^^;;;
이런 경우는 저도 경험해본 적이 없어서 잘 모르겠습니다. 영문으로 구글 검색해봐도 이런 경우에 대한 설명이 없는걸로 봐서는 계정 자체에 들어가셔서 페이팔 연동이 되는지, upload art 되는지 여부를 확인해보셔야할거 같습니다. 일반 계정으로는 제가 접속해본 경험이 없어서 어떤 화면일지 전혀 모르겠네요
@@RittoRitto 답변해 주셔서 감사합니다.^^
선생님! 버전이뭐에요?
오래 전부터 유지되어온 기능이라 버전은 상관없습니다.
감사합니다!!
scss 라우 자바스크립트 강의도 올려주세요~~너무 유용해요
저도 공부중이라 많이 부족합니다. 조금씩 유용한 팁을 발견하면 공유할께요~ ㅎㅎ
대박..
감사합니다 :)
우와아 포폴 이미 다만든거 아니에여? 이정도면 ㄹㅇ 웅장이 가슴해진다
아이고 과찬이십니다.
오늘도 유익한 영상 크리스마스 분위기 👍
오늘 하루도 화이팅입니다~ 'ㅁ'/
와 선생님 너무 멋져요!
아니 더 멋쟁이인 수아님 오셨네요~ ㅋㅋ
오늘도 멋진영상이네요 한수 배우고갑디다
노래소리 따라서 타자도 점점 빨라지네요 1500타 예상합니다
3배속으로 돌렸습니다 ㅋㅋㅋ
목소리 왜 없어요 선생님
제 목소리를 별로 안좋아하는 분들이 있어서요 ㅋㅋㅋ
와 역시 초고수인듯 싶습니다...
찐고수께서 오셨군요 ㄷㄷㄷ
와..고수는 다르네요..유익합니다 🤟
영상 안보고 댓글 단거 다 알거든요? ㅋㅋㅋㅋ
너무 유익한 영상입니다 닭다리 먹고싶어요 ㅠㅠ 어쩜 저렇게 편안하고 빠르게 하실수있죠 👍 👍 👍
오늘 저녁은 치킨 한 마리 하시죠 :)
와 퍼블세계를 뒤지업놓으셨다 최고
부끄럽습니다 🥲 ㅋㅋㅋ
오져요
리또리또님! 유용한 팁 감사합니당 질문이 있는데 리셋 바운딩 박스가 꺼져서 선택이 안되더라구여 이유가 있을까요?
바운딩 박스가 감춰져 있는 상태일 수 있습니다. view 메뉴에서 show bounding box라는 메뉴가 있는지 확인해보세요. 바운딩 박스가 켜 있으면 hide bounding box라고 써있을겁니다.
@@RittoRitto 답변 감사합니다ㅎㅎ 프리 트랜스폼툴은 그냥 도형을 변경하는거랑 차이가 뭔지 궁금합니다
도움이 되었어요! 감사합니다! ^♡^
Reset Bounding Box가 어떨 때 사용하는 기능인지 알 수 있나요~?