반응형 개발 공부19 즐겨찾기 / 퍼블리싱 작업에 폰트 적용 폰트어썸 사이트로 종결! (무료폰트, 자세한 라이센스 범위까지 한번에 확인) 매번 폰트 찾아서 임베딩 시키기 바빴는데여기로 해결하면 될 것 같다웹 폰트 사용하기에서 CSS 설정하기, Link 방식, Import 방식, Font-face 방식총 4가지 모두 사용가능합니다.원하는 폰트를 바로 다운로드 가능하며,라이센스 사용 범위까지 한눈에 확인하실 수 있습니다. 폰트 어썸웹 폰트 사이트입니다.wess.tistory.com 2024. 6. 26. 무료 아이콘 / 아이콘 저장소 서비스 폰트어썸 사용해보기 ( 설치없이 벡터 아이콘 사용 가능 ) 오픈 소스 프로젝트 사이트를 통해서 코딩 시 벡터 아이콘을 무료로 사용해 보기 클론 코딩 할때 좋습니다.아이콘 원본 없이 사용하기 이름은 폰트어썸인데.. 아이콘을 사용하기 위한 오픈 프로그램입니다.폰트어썸font awesome Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com 1. 폰트어썸 사이트 가입하기폰트어썸 사이트 접속 -> 무료 사용 클릭 -> 이메일주소 입력 -> 메일확인 -> 비밀번호 입력 -> 개인정보입력 -> 끝 -> 메인에서 start for f.. 2024. 6. 20. 프론트엔드 / UI 애니메이션 코드 참고 사이트 (html, css) 코드 몰라도 ui 애니메이션을 만들 수 있습니다.상업적 활용도 가능하며 피그마로 복사까지 가능합니다. html 코드와 css 코드를 확인할 수 있습니다.당연히 복사하기도 가능하니 복사해서 사용해 보세요! Explore 3000+ Free UI Elements: CSS & TailwindLibrary of free and customizable UI elements made with CSS or Tailwind. It's all open-source, and it's all free. Try it out to save you many hours spent on building & customizing UI components for your next project.uiverse.io 2024. 6. 5. 워드프레스 / 워드프레스 첨부파일 개념 알기 (미디어 라이브러리 사용법) 워드프레스는 첨부파일이 독립적인 콘텐츠라던데?워드프레스에서는 첨부파일을 독립적으로 사용할 수 있습니다.이 부분이 다른 블로그와 차별화된 점입니다.같은 이미지를 계속 올리기는 그만, 한번 올려서 계속 사용해 보세요미디어를 클릭하면 여태까지 글에 쓰였던 모든 이미지 및 첨부파일을 보실 수 있습니다. 새 미디어 파일 추가하기를 클릭하고 워드프레스에 사용할 이미지들을 글보다 먼저 추가해 놓을 수 있습니다. 글을 쓸 때마다 이미지를 첨부하는 방법도 있지만,이미 많이 그림을 그려 놓은 상태라면 또는 썸네일을 선 작업 해놓고 글은 나중에 쓰실 때 편히 합니다매번 확인하고 올리는 작업을 하지 않아도 됩니다. 글을 쓰시다가 중간에 이미지를 삽입해야 할 때 미디어 라이브러리 클릭으로 원하는 이미지를 바로 삽입할 수 있.. 2024. 6. 2. 워드프레스 / 워드프레스 URL 공유를 위한 주소 셋팅 방법 (한글보단 슬러그를 사용하세요) 워드 프로세스 주소 셋팅 방법에 대해서 알아보겠습니다.워드프레스에서 주소 셋팅은 선택이며, 기본은 글 제목이 됩니다. 한글일 경우 검색에 유리하나, URL 공유시 한글 깨짐 현상으로 주소가 길어지는 경우가 있는데주소를 간결하고 명확하게 사용하기 위한 방법입니다.1. 알림판 접속하기왼쪽 상담에 워드프레스 로고를 클릭하면 알림판에 접속 할 수 있습니다2. 워드프레스 주소 및 URL 공유를 위한 슬러그 알아보기워드프레스는 기본적으로 글을 작성하면 글 제목이 URL에 반영 되는데 한글로 작성되면 검색에는 유리할 수 있지만글을 복사해서 공유했을때 한글은 URL이 길게 깨져보입니다.(복사했을때 %는 알파벳이 아닌 다른 글짜를 표현) 워드프레스 기본 URL복사해서 공유시 URL이 길어짐 (한글이 깨짐)소개 페이지 접.. 2024. 6. 1. 워드프레스 / 4. 워드프레스 데이터베이스와 연결하기, 워드프레스 사이트 정보 입력 후 로그인까지 해보기 워드프레스 설치 후 초기 MAMP 웹서버 만들기1. MAMP 시작 2. MySQL 확인 (MAMP가 설치되면서 기본 셋팅을 해 놓은 것을 확인)사이트 아래로 내려보면 MySQL을 클릭하면 Host, Post, Usename, Password 기본값이 나와있는 것을 확인할 수 있습니다호스트는 localhost, 127.0.0.1 두가지가 있는데 우리는 로컬 호스트를 사용하겠습니다.상단을 보면 You can administer your MySQL databases with phpMyAdmin 을 클릭합니다.(기억하기!! Host는 localhost, Usename은 root, Password도 root) 3. 작업할 데이터베이스 만들기① phpMyAdmin 클릭하면 사이트가 열립니다. (왼쪽에 4가지는 .. 2024. 5. 26. 워드프레스 / 3. 워드프레스 다운받고 설치하기 워드프레스(WordPress)는 워드프레스 오픈소스 프로그램을 직접 다운로드 및 설치해서 사용 할 수 있는 “설치형 워드프레스 (WordPress.org)“와 네이버 블로그(Naver Blog), 티스토리(Tistory)와 같이 회원 가입 후 웹 상에서 블로그를 이용할 수 있는 “가입형 워드프레스 (WordPress.com)“로 구분할 수 있습니다. 설치형가입형URLhttps://wordpress.org/https://wordpress.com/운영 주체WordPress FoundationAutomattic Inc.시작 방법다운로드 (자동설치)회원가입 (요금제)wordpress 설치하기1. 사이트 접속하기해서 다운 받기하단에 워드프레서 6.3.5 다운로드 클릭 ( 버전은 다운로드 시기마다 다를 수 있음) .. 2024. 5. 25. 메모 / 웹앱 만들기, 하이브리드 앱 만들기, 안드로이드 아이폰 앱 동시에 만들기 웹앱, 웹뷰앱, 하이브리드앱 만드는 방법안드로이드 아이폰 앱 동시에 만드는 방법 [HTML 기초 강좌 2강] 웹 사이트 만들고 인터넷에 공개하기 .COM 도메인, HTTPS 적용까지 완전 무료! 1. 무료 html 템플릿 - free css저작권 관련 파일 확인 readmi.txt or license.txt 화인 필수 Download 3552 Free Website Templates - CSS & HTML | Free CSS www.free-css.com 2. 무료 웹사이트 만들기 - netlify https:// 지원 됨 및 deploy (인터넷에 웹사이트를 올려줌 ) Scale & Ship Faster with a Composable Web Architecture | NetlifyRealize t.. 2024. 5. 24. 컬러 / 디자인 시스템 컬러 팔레트 및 시멘틱 컬러 사용 방법, 명암비 사이트 모음 primary color 브랜드컬러는 주로 primary color 1가지와 secondary color 1가지로 제안합니다. primary color는 브랜드를 대표하는 Main Color를 말합니다.(Key Color 또는 Point Color라고도합니다)어떤 색을 선택하느냐에 따라 앱(웹)의 이미지가 달라지기 때문에 primary color를 정하는 것은 매우 중요하며해당 서비스의 콘셉트를 잘 보여줄 수 있는 유의미한 컬러를 사용합니다.보통 시안을 잡고 디자인을 확정하는 과정에서 주컬러와 보조컬러를 정의하게 될 것입니다.Secondary & Tertiary Color단색(포인트 컬러 1가지만 사용), 유사색(Primary Color 주변 색), 보색(Primary Color와 반대색)Hierarch.. 2024. 5. 21. 워드프레스 / 2. 워드프레스 웹서버 환경 만들기, MAMP 설치 후 실행하기 MAMP맥 컴퓨터 사용자는 내컴퓨터에 서버 환경을 만들려면 MAMP(Machintosh + Apache + MySQL + PHP)을 설치해야 합니다PHP와 데이터베이스를 연동하려면 MySQL등의 DB서버도 필요한데, MAMP를 컴퓨터에 설치하면 PHP, 웹 서버, MySQL 서버 환경이 구축됩니다. (서버 시작, 정지 등도 제어가능)유료 버전도 있지만, 무료로도 충분하기에 설치해 보겠습니다.(MAMP은 각각 프로그램을 개별적 관리가 불편할 수도 있음 (버전관리, 유지보수 등)) MAMP 설치하기1. 사이트에 접속하기사용하는 맥 환경이 인텔칩이면 맨 위 왼족, 최근에 나온 M시리즈 츱이면 맨 위 오른쪽을 클릭! Downloads - MAMP & MAMP PRONAMO DNS AppThe perfect M.. 2024. 5. 19. 워드프레스 / 1. MAC에서 워드프레스 구축을 위한 프로그램 알아보기 워드프레스- 누구나 무료로 사용할 수 있도록 공개 되어 있음- 워드프레스 제작사 오토메틱은 https://wordpress.com/ 이라는 블로그 서비스도 운영함- 워드프레스를 사용하기 위에서는 세가지 서버용 프로그램(아파치, php, MySQL)이 필요워드프레스 사용을 위한 프로그램 설치1. wordpress프로그램을 다운받아서 직접 구축하기 위한 설치형 워드프로세스 DownloadGet WordPress Everything you need to set up your site just the way you want it. Download and install it yourself For anyone comfortable getting their own hosting and domain. Download.. 2024. 5. 18. 메모 / 웹, 앱 서비스 만들어서 수익화하는 8가지 방법 웹, 앱 서비스 만들어서 수익화하는 8가지 방법 1. 유료앱유료로 스토어 등록 - 7:3 비율로 마켓과 나눠가짐- 주로 카메라앱, 게임 앱 등이 있다 2. 광고광고 노출당( CPM 1,000번 노출당 비용), 광고 클릭당(CPC 클릭당 비용) 등이 있다- 애드네트워크 광고 - 애드네트워크(혹은 어필리에이트) 서비스에서 제공하는 광고 이용 (구글 애드센스, 애드몹, 카카오 애드핏 등) - 특정 업체 광고 - 직접 내 앱에 광고 할 수 있도록 만들고 특정 업체와 계약해서 광고를 진행 3. 유료 결제 적용 앱은 무료로 제공- 인앱 결제를 붙이면 7:3 비율로 마켓과 나눠가짐- 결제 모듈을 붙인다면 PG 업체에 따라 결제 금액의 약 3% 수수료가 부과될 수 있음- 주로 게임에서 아이템을 팔거나, 웹툰이나 소설.. 2024. 5. 17. 확인 / 기획 디자인할때 누락되는 것들, 완전한 핸드오프를 위하여 체크할 사항 기획서엔 모든 화면이 표현되지 않다 보니,디자인할 때 챙기지 않으면 누락되는 화면들이 있다. 기능이 아닌 사용자의 상황에 따라 달라지는 화면들이기 때문이다. 기획과 디자인에선 화면을 보면 이해할 거라 생각하지만,개발자에겐 꼭 필요한 화면으로 누락되면 추가 요청이 꼭 들어오는 화면들을 정리해 놓았다.Loading 로딩 중- 전체 로딩- 부분 로딩Empty (None)데이터 없음- 첫 진입시- 장치 미연결로 데이터 없을 경우 - 게시판의 리스트 등의 One 데이터 하나 있을 때- 데이터 텍스트 영역이 짧을때- 데이터 텍스트 영역이 길때- 데이터 안에 입력 항목 중 입력 안해도 되는 데이터가 있을때Some 데이터 몇개 있을 때- 페이지 넘어가지 않은 경우- 페이지가 넘어가는 겨우Too Many 데이터가 아주.. 2024. 5. 15. 메모 / 오래가는 브랜드를 만드는 브랜드 경험(Brand Experience, BX) 2023-08-02오픈서베이 오픈클래스 - 오래가는 브랜드를 만드는 브랜드 경험(Brand Experience, BX) 1. 가장 쉽게 풀어 쓴 브랜드 경험 (BX) 관리의 기본 개념과 유형1-1. BX 관리의 목적- 브랜드 경험(Brand eXperience, 이하 BX)은 고객이 브랜드와 맺는 모든 상호작용을 말함- 광고, 소셜 미디어 마케팅, 제품에 대한 사용자 경험, 제품 기능 관련 인식, 문의 및 CS 경험, 브랜드 철학 및 가치관 등이 모두 BX에 포함 됨- BX 관리의 가장 큰 목적은 ‘오래 가는 브랜드 만들기’ 더보기브랜드 경험(Brand eXperience, 이하 BX)은 고객이 브랜드와 맺는 모든 상호작용을 일컫습니다. 광고, 소셜 미디어 마케팅, 제품에 대한 사용자 경험, 제품 기능 .. 2024. 5. 14. SCSS / SCSS Architecture, 초기 셋팅 폴더 구조 정리 웹 앱을 만들기 위해서 html 공부하다 알게 된 SCSS수정이 너무 용이해서 신세계를 경험했습니다. 브라우저가 scss파일을 직접 읽지 못하기 때문에 css로 컴파일 과정을 거쳐야 합니다.1. SCSS 프로그램 설치비주얼 스튜디오.. 2024. 5. 6. CSS 네이밍 / CSS 클래스 네임 방법론 BEM 알아보기 1. BEM이란?Block, Element, Modifier를 뜻합니다 보통 클래스 네임을 정할때 사용하는 방법론 중에 하나로BEM은 기본적으로 ID를 사용하지 않고, class명만을 사용합니다.즉, 어떤 목적인가에 포커스가 맞춰져 있습니다.개발, 디버깅, 유지보수를 위해 가능한 한 명확하게 네이밍 하는 것이 목표입니다.모든 것이 클래스이고 중첩된 것은 없어야 합니다. 2. BEM 네이밍 장점- 목적과 기능을 명확히 전달한다- css만으로 구조를 알 수 있다. (sass, scss와 사용하기 편하다)- css 명시도를 항상 낮은 수준으로 유지하기 때문에 구체성으로 인한 코드의 길어짐을 방지할 수 있다.- 높은 재사용성과 대규모 css를 효율적으로 관리할 수 있다 3. BEM 사용법BEM의 class명은.. 2024. 5. 2. CSS 네이밍 / CSS 표기법 kebab-case, snake_case, camelCase, PascalCase 알아보기 1. 표기법의 필요성 프로그램밍 언어 가이드라인으로 공통된 표기법이 있습니다개발자들이 개발하는데 있어서 코딩컨벤션이 존재하여 일관된 코딩스타일을 위해 필요하며생산성을 높힐 뿐 아니라 코드 분석에 대한 이점을 가질 수 있습니다. 2. 표기법의 종류kebab-case케밥 케이스단어 사이를 대시(-)로 구분하며모든 단어가 소문자로 구성꼬챙이 꽂은 것과 비슷해서 케밥으로 사용snake_case스네이크 케이스언더바(_)가 들어 있는 표현방식뱀처럼 생겼다고 하여 붙여지며 모든단어의 문자가 소문자 or 대문자로 사용프로그래밍 언어 중Python, Ruby, Rust, Go 등이 변수와 함수 이름을 snake_case로 권장하고 있음camelCase카멜 케이스첫 글자는 소문자이며 중간글자들은 대문자로 진행 이 모습이 .. 2024. 4. 30. Expo / 기본 셋팅 파일 설명 1. 앱 개발 할 폴더 만들기 npx create-expo-app Victory // Victory = 앱이름 터미널에서 위 코드를 실행 시키면 기본틀 셋팅이 진행 됩니다. 2. 엑스포 기본틀 파일 설명 assets 앱이 동작되고 서비스되는데에 기본적으로 가지고 있는 이미지 및 아이콘 파일들을 담는 폴더 node_modules 리액트 네이티브&Expo로 앱을 만들면서 설치하게 되는 많은 라이브러리들이 저장되는 장소 App.js - 리액트 네이티브 앱이 시작되는 출발선 및 진입점으로 웹으로 따지면 index.html 또는 main.html처럼 메인 파일 - 앱이 시작될 때 필요한 준비들(필요한 이미지 준비, 필요한 폰트들 준비)을 하는 장소 - 준비를 할때 준비중입니다~라는 화면도 띄워주는 곳으로 준비가 .. 2024. 4. 19. Expo / 하이브리드 앱 & 웹앱 개발 초기 셋팅 1. Expo 회원가입 Sign Up — ExpoCreate an account for Expo here.expo.dev하이브리드 어플제작을 위해 Expo에 회원가입! 2. 개발 컴퓨터에 Expo 로그인 진행npx expo login...expo 이메일 or 아이디, 패스워드 입력 입력하면 로그인 완료!윈도우는 cmd 맥은 terminal에서 명렁어를 치고 엑스포에 로그인 합니다. 3. 비주얼 스튜디오 코드에서 앱 개발 관련 기본 셋팅 진행npx create-expo-app 앱이름 //npx create-expo-app 명령어로 기본 앱 생성터미널에서 개발할 앱 이름의 폴더를 만든 후 기본틀 셋팅이 진행됩니다.npx로 원격에 있는 명령어들 중 create-expo-app을 사용해서 앱을 초기화 진행(np.. 2024. 4. 17. 이전 1 다음 반응형
