기타 정보 (30) 썸네일형 리스트형 파워포인트 저장할 수 없는 글꼴 오류 (글꼴 한번에 바꾸기) 오류 내용 1. 다른사람이 작성한 ppt에 추가 작업을 할 때, 저장시 저장옵션에서 '파일의 글꼴 포함' 체크하고 저장할때 '프레젠테이션에 저장할 수 없는 글꼴이 있습니다' 라는 오류가 종종 뜬다. 2. ppt에 기본 내장되어 있는 '글꼴 바꾸기' 기능으로는 '더블바이트 글꼴을 싱글바이트 글꼴로 바꿀수 없다~' 의 오류가 뜬다. 해결방안 1. 작업한 파일을 다른이름으로 저장 해서 .xml 파일로 저장 2,. 메모장으로 .xml파일 열기 3. 메모장에서 ctrl + H (편집) 으로 글꼴 바꾸기 (바꿀내용 기재 후 모두바꾸기 클릭, 저장) - ex. 찾을내용 : Noto Sans KR (오류난 글꼴) / 바꿀 내용 : Pretendard (오류 안나는 글꼴) 4. 저장된 .xml파일을 파워포인트에서 열고 .. CSS 방법론 BEM https://velog.io/@solmii/CSS방법론1-BEM-a.k.a작명소 CSS방법론1 - BEM (a.k.a작명소) Portfolio 사이트를 작업하는 동안 BEM을 지키면서 class명을 짓기로 했다! 그래서 정리하게 된 CSS 방법론 중 하나인 BEM! velog.io 퍼블리셔의 숙명인 classname 작명에 대한 규칙. 많이 들어는 봤지만 우리 회사에서 실제로 도입하진 않았다. 우린 형태_의미_순서_상태로 현재 네이밍 중이다. 외국 사이트 보면서 언더바가 두개 붙어있는게 무슨 의미지? 왜 저렇게쓰지 ? 왜 하이픈과 언더하이픈을 같이 혼용하지? 싶었는데, 이 글을 보니 어떤 의미인지 100% 이해 가능. gsap 공부 관련 링크 모음 안쓰는 곳이 없는 그 플러그인, gsap. 4~5년 전에 다니던 회사에서 홈페이지를 만들때 애니메이션 효과를 위해 gsap의 tweenmax를 써본적이 있다. 그런데 그 이후로 한번도 사용할 일이 없다보니 사용방법을 자연스럽게 까먹어버림. 몇년 사이에 사용 방법도 좀 달라진것 같고. gsap와 함께 사용되는 플러그인들도 되게 다양한데, 기본적인 gsap 사용방법과 가장 자주 쓰이는 스크롤트리거 관련된 공부를 해봐야겠다. gsap 라이센스 (무료) https://gsap.com/community/standard-license/ Standard License Plain English Summary: You may use the code at no charge in commercial or non-commer.. javascript 공부 관련 링크 모음 https://ko.javascript.info/javascript-specials 기본 문법 요약 ko.javascript.info 2016년도에 처음 js를 배울때 jquery로 배웠고, 때문에 아직까지도 습관적으로 모든 동적 이벤트는 jquery를 통해 처리중이다. 하지만 슬슬 javascript 자체를 잘 다뤄야 한다는 생각이 들어서... 지금까지 짜본 jquery 소스를 모두 vanila javascript로 바꿔보려고한다. 일단 문법 기본부터 다지기 위해서 찾은 간략한 요약본. https://velog.io/@kjwboa/%EC%9E%90%EC%A3%BC-%EC%93%B0%EB%8A%94-jQuery-javascript%EB%A1%9C-%EB%B0%94%EA%BE%B8%EA%B8%B0 자주 쓰.. 2024 UI/UX 웹디자인 트렌드 정리글 모음 '트렌드란 무엇이다' 에 대해서는 모두 의견이 다르겠지만, 어쨌든 각자의 의견이 정리된 몇가지 글을 읽어보았다. 디자인기법이나 유행 말고 퍼블리셔가 눈여겨 봐야할 부분 위주로. 1. 다가오는 2024년, 주목해야 하는 UI/UX 트렌드 https://udemy.wjtb.co.kr/newsletter/id/10000399 다가오는 2024년, 주목해야 하는 UI/UX 트렌드 빠르게 변화하는 UIUX 트렌드가 궁금하다면? UI UX 뜻과 차이, 최근 디자인 트렌드 그리고 디자이너를 위한 추천 강의까지 모두 소개해 드립니다. udemy.wjtb.co.kr - 다크/라이트모드 전환 옵션 - 마이크로 카피 - 챗봇 : 대화형 인터페이스를 통해 사용자와 상호작용 하는 인공지능 기반 서비스. 단순한 FAQ와는 다름... 2023 GDWEB Design Award 수상작을 보며 너무 많은 분야로 나눠 몇개씩 수상작을 뽑기 때문에 전부 살펴보진 못했지만, 현재 웹 동적 모션 트렌드는 확실히 알겠다. 1. 스크롤효과 2. 스크롤효과 3. 스크롤효과 기승전 스크롤 효과^^; 사용자의 흥미를 끌 수 있는, 지루하지 않은 홈페이지를 만들기 위해서 다양한 패럴렉스 효과가 적용되고 있다. 세로로 컨텐츠가 내려갔다가 가로로 움직였다가~ fadein이 되었다가 고정되었다가~ 물론 시스템 홈페이지나 금융권이라던지, 포털이라던지 이런 쪽에는 현실적으로 적용하기가 어렵지만 브랜딩 홈페이지나 랜딩 페이지 비스무리한 사이트들은 전~~~부 들어가 있다고 해도 과언이 아닐정도. 자사 홈페이지 만들면서 약간 해보긴 했는데... 프로젝트가 대부분 SI다 보니 언제 또 사용하게 될진 모르겠다. 하지만 그 언젠가.. css shadow gradient 그래디언트 그림자 효과 https://alvarotrigo.com/shadow-gradients/ CSS Shadow Gradients — Generator [Fast & Easy] The CSS Shadows Gradient Generator was a tool that I was missing. One day I thought it'd be nice to add some beautiful gradients in a shadow for a web design I was working in. I then searched for a CSS generator to find the fastest way to do it, and I got alvarotrigo.com 밋밋한 box shadow가 아닌 gradient로 box shad.. Google Material icon - 가끔 디자이너가 시안에 넣지 않은 아이콘을 퍼블리싱 하다가 추가해야 하는 경우가 있다. 대부분의 경우 디자이너에게 요청 하지만, 간단한 기능 버튼에 들어가는 아이콘들은 하나의 백터 기반 아이콘 라이브러리(?)를 포함시켜 두고 퍼블리셔가 넣기도 한다. - 우리 회사는 xeicon을 주로 쓰는데, 폰트파일을 다 합해도 1mb 정도의 가벼운 폰트다. 사용 방법도 진짜 간단함. 그래서 아마 쓰기 시작한듯? - 많이 쓰이는 goolgle marerial icon은 종류가 굉장히 다양하고 (900개 넘음) 세련됬으며, 보기 편하고 customize도 미리 해볼수 있는 라이브러리도 있다. - 근데 폰트 크기가 너무크다................... cdn으로 쓸거 아니면 잘 안쓸듯. 1.라이브러리 : http.. 간단한 box shadow css 생성 사이트 https://www.cssmatic.com/box-shadow Box Shadow CSS Generator | CSSmatic CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to collaborate on CSSMatic? www.cssmatic.com 간단한 말풍선 css 생성 사이트 https://cssarrowplease.com/ CSS Arrow Please - By Simon Hoejberg - @shojberg Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. Fork me on Github cssarrowplease.com vscode OpenAI api 확장 프로그램 사용 (AICodeHelper) 요즘 Open AI가 개발한 대화 전문 인공지능 챗봇 chat gpt 가 핫하다. AICodeHelper는 이 Open AI에서 제공하는 Open AI api를 이용해 간단하게 html 코드 등을 생성하는 vscode 확장 프로그램이다. 챗gpt 를 vscode에서 코더로 활용한다고 생각하면 이해하기 쉽다. 정확히 맞는 표현인지는 모르겠지만. 1. OpenAI 회원가입 https://platform.openai.com/ OpenAI APIAn API for accessing new AI models developed by OpenAIplatform.openai.com나는 간단하게 구글 계정으로 했고, 휴대폰으로 인증코드도 받아야한다. 2. overview 페이지에서 오른쪽 상단의 Personal 클릭, .. css gradient 소스 생성 cssgradient.io 간단하고 직관적이게 css gradient 소스를 생성해주는 사이트. gradient가 들어간 것은 항상 여기서 색상을 찍고 소스 복사해서 사용하고있다. https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 온라인에서 이미지맵 만들기 image-map.net 이미지 파일을 업로드 후 이미지맵을 만드는 사이트. 지도 이미지 등 복잡한 이미지의 이미지 맵을 만들때 쓰기 좋다. tip. 복잡한 경계를 가진 이미지의 경우 policy를 선택하고 화면을 최대한 확대한 후 찍으면 좋음! https://www.image-map.net/ Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and generate html your output! www.image-map.net codepen에 이미지 포함해서 올리고 싶을때 코드펜의 local image 를 소스에서 쓸수 있는건 돈내고 써야하는 pro 기능. 그렇다고 코드펜에서 이미지 보고싶다고 이미지만 올릴 서버호스팅을 끊는것은 비효율적. github 페이지를 이용해 아주 간단하게 이미지를 올리고 그 올린 이미지 url을 이미지 src로 쓰면 된다. 매우간단! 매우 빠름! https://dev.to/ljcdev/a-quick-hack-to-using-local-images-on-codepen-4cfp A quick hack to using local images on Codepen Handling files is a pro feature in Codepen. Free users can't add local files like images to use them... dev.to 다양한 ui 요소들의 소스를 확인할수 있는 사이트 uiverse.io https://uiverse.io/all All elements made with CSS and HTML Discover a wide range of open-source, customizable components for web and mobile applications on Uiverse. Browse an extensive selection of buttons, cards, loaders, inputs, and more to enhance your app's user interface and elevate your design experience. uiverse.io VSCode 단축키 내가 자주쓰는 단축키! scss 컴파일시 공백 너무 많을때 ctrl+h 눌러서 정규식 체크 하고 \n\n 을 \n 으로 바꿔준다. CMD + Shift + P -> 코드 정렬하는것 (Prettier) ctrl + alt + 상하방향키 : 세로로 다중선택 드래그 + ctrl + d : 드래그한 영역 아래로 같은것 선택 +1씩 alt + 클릭 : 다중클릭 shift + alt + a : 여러줄 한번에 주석처리 ctrl + shift + c : autoprefixer 웹접근성 체크리스트 0. 크로스브라우징을 고려하여 html, css가 작성되었는가? - 서울시 기준 ie11까지는 고려해야함. ie11, edge, chrome, firefox에서 구동 확인) - W3C 마크업, CSS 검사 서비스 통과 1. 문서 기본 언어가 (html lang="ko") 로 설정 되었는가? 2. img에 alt 속성이 적절히 들어갔는가? (디자인을 위한 의미없는 img의 경우 alt="" 로 값 비우기) 3. 페이지 이동은 a, 그 외는 button으로 적절히 사용되었는가? a태그로 tab menu등 구현시 onclick="return false;" 등 포커스 이동을 막는것이 쓰였는가? 4. table - scope 속성이 잘 쓰였는가 ? (thead 안에 th의 경우 scope="col" , tbody.. html5 심볼, entitiy code 등 확인할수 있는 사이트 https://www.toptal.com/designers/htmlarrows/symbols/ HTML Symbols, Entities and Codes — Toptal Designers Easily find HTML symbols, entities, characters and codes with ASCII, HEX, CSS and Unicode values; including copyright sign, trademark sign and at symbol. www.toptal.com 기존에 사용하던 entitycode 사이트보다 카테고리 별로 좀더 다양한 문자를 코드로 작성할수 있도록 소스를 제공하는것 같다. 스터디 - SCSS scss는 css 전처리기 이다. css를 작성할때 중복 등 불편함을 해소하고자 생긴거라고 생각하면 될것같다. 처음 학원을 다니면서 배울때 css로 배웠기 때문에, scss라는게 있다고는 들었어도 막연하게 사용법이 어려울것이라고 생각하곤 시도해 보지 않았다. 헌데 점점 class명이 복잡해지고, 복잡한 구조의 사이트들을 만들면서 css 작성이 쉬워질수 있는 방법을 찾아보았고, scss 사용법을 가볍게 공부하고 실제 프로젝트에 도입함으로써 css 작업 효율성이 개선되었다. 여러 사이트들을 돌아다니며 공부한 scss에 대한 기본 study 내용이다. 내가 보려고 정리한 것이기 때문에 다소 중구난방이다. - Ruby 언어로 이루어져 있기 때문에 먼저 컴퓨터에 Ruby 설치 -> https://rubyinsta.. 생활코딩 스터디 - javascript_2 생활코딩에서 자바스크립트 언어에 대한 공부를 시작했다. jquery나 쓸줄 알지 javascript는 걸음마 떼는 기분으로 공부하고 있다^-ㅠ 어쨌든 흥미롭고 재미있다. 1. 숫자와 문자 1) 숫자 : 따옴표 없는 형식 ex) alert (1+1) -> 결과값 2 ● +,-,*,/ 등 사칙연산 뿐만 아니라 복잡한 계산도 가능하다. ex) Math.pow(3,2) -> 3의 2승, 결과값 9 Math.round() 반올림 / Math.ceil() 올림 / Math.floor() 내림 / Math.random() 0부터 1.0 사이의 랜덤한 숫자 2) 문자 : 따움표로 감싸야 한다. String 이라고 함. ex) alert("Hello World") ● 숫자를 따옴표로 감싸면 문자가 된다● 문자 안에서 작.. 이전 1 2 다음
