전체 글

1. Visual Studio Code VS Visual Studio Code Insider  Visual Studio Code : 안정화 된 버전 Visual Studio Code Insiders : 최신 기능을 사용할 수 있는 베타버전 (카카오톡 실험실 같은거? 아이폰의 베타 앱 그런거) Visual Studio Code 설치▼ ▼ ▼https://code.visualstudio.com/Download Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio C..

Next.js로 퍼블리싱 처음 해봄예전에 코딩애플 Next 강의 조금 할짝인게 다인데디자이너인 내가 퍼블도 해야함 ㅇㅇ   1. 문제 발생TailAdmin 템플릿에 Heroicons SVG copy해서 넣었는데 에러 뜸   아래에 링크에 있는 방식대로heroicons에 있는 SVG를 그대로 복붙해서 생긴 일임 Tailwind SVG 아이콘 넣기 : Heroiconsbootstrap에서는 fontawesome을 사용했는데Tailwind css에서 아이콘을 넣을때 어떤걸 써야할지 검색하다가Heroicons를 발견함     구글에서 tailwind css icon을 검색하면이렇게 tailwind CSS랑 Heroicons 두가지 페junggumy.tistory.com 에러가 발생한 코드▼ ▼ ▼    2. ..

bootstrap에서는 fontawesome을 사용했는데Tailwind css에서 아이콘을 넣을때 어떤걸 써야할지 검색하다가Heroicons를 발견함     구글에서 tailwind css icon을 검색하면이렇게 tailwind CSS랑 Heroicons 두가지 페이지가 상위에 뜸    어차피 tailwind를 들어가도 heroicons로 가게 돼있음   원하는 아이콘 위에 hover하면 SVG로 copy할 수 있음 끝

1. 학습 내용 및 후기 1주차 1. 인터렉티브 UI개발 소개 2. 인터렉티브 UI 기획 & 디자인 기본적인 인터랙티브 UI에 대한 개념에 대해서 알 수 있는 강의였다. 기획과 디자인을 위한 AdobeXD강의가 있었지만, 피그마 강의를 함께 수강하고 있어서 빠르게 보기만 하면서 지나갔다. 2~3주차 3. HTML5, CSS3 기본 문법 4. 효율적인 작업을 위한 확장스킬 이 부분 내용이 생각보다 많았다. 나는 이미 퍼블리싱에 대한 개념이 있었기때문에 어렵지 않게 강의를 들을 수 있었는데 중간중간 내가 몰랐던 부분이나 기능들을 체크하는 개념으로 강의를 들었다. 특히 CSS의 transform 변형이나 SVG 모션 처리등에 대해 평소 완벽하게 이해하지 못한 부분이 있었는데, 이러한 부분에 대한 의문이 많이 ..

1. 학습 내용 및 후기 1주차 1. UX/UI 디자인 이해 2. UX 유저 리서치 3. UX 데이터 모델링 1주차에는 UX/UI의 이론을 중점으로 한 강의를 수강했다. 학원에서 UX/UI강의를 수강하고, 실무에 바로 투입되고, 디자이너 사수가 없던 나는 이론적인 부분이 항상 부족하다고 생각했었는데 이런 갈증을 해소할 수 있는 강의 내용이라 만족스러웠다. 강의 내용 슬라이드를 PDF로 다운받을 수 있어서 아이패드로 바로 필기하기도 수월했다. 슬라이드나 강의 내용이 깔끔하면서도 꼼꼼해서 준비를 많이 한 강의라는게 느껴져서 만족스럽다. 2주차 4. UX/UI 디자인 노하우 5. 모바일 UX 6. UX/UI 디자인 심리학 아직까지 이론 중심의 강의들만 듣고 있다. 강의 중 좋았던 점은 애플의 Human Int..

티스토리를 처음 만들면서 제일 깔끔한 스킨이 뭐가 있을까 찾아보다가 hELLO스킨을 알게 되었다. (이렇게 예쁘고 깔끔한 스킨을 무료로 편하게 사용하게 해주신 개발자님 감사합니다🙇) 🔗 스킨 소개 바로가기 https://pronist.tistory.com/5 hELLO 티스토리 스킨을 소개합니다. hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 pronist.tistory.com 다른 사람들처럼 나도 스킨을 내 입맛에 맞게 하나 둘 수정하며 사용하던 중 코드블럭이 라이트모드에서는 라이트모드로, 다크모드에서는 다크모드로 보이는 것을 알았다. 평소 코드들은..

📌 Sass(Scss)의 nesting기능 기존 css로 작업할때 html구조가 복잡해지거나 많으면 모든 선택자를 중복해서 입력해야 하는 경우가 있는데, Sass(Scss)의 nesting(중첩)기능을 이용하면 css를 구조화시킬 수 있어 효율적으로 작성할 수 있다. 👆 nesting 문법 선택자 안에 또 다른 선택자를 넣으면 된다. 🔗 Sass 공식페이지에 보면 예시와 함께 더 자세히 나와있다. https://sass-lang.com/documentation/style-rules/ Sass: Style Rules Style rules are the foundation of Sass, just like they are for CSS. And they work the same way: you choose ..

📌 Sass(Scss)의 import 기능 원하는 scss 파일을 따로 분리해서 외부 파일로 만든 다음, 불러오기(import)를 할 수 있는 기능이다. 🛠️ 사용방법 1. 분리하고 싶은 scss파일 생성 scss폴더 안에 "새 파일"을 생성하고, 파일명 앞에 언더바(_)를 넣어서 scss파일을 만든 후 내용을 작성하면 된다. 폴더명 앞에 붙은 언더바(_)가 부분파일 형식이라는 뜻 예: reset이라는 css를 따로 분리하고 싶다. -> "_reset.scss" 라는 폴더 생성한다. 2. 불러 올 파일에 @import "불러올 파일명"; 입력 style.scss에 _reset.scss파일을 불러오고 싶으면 @import "reset"; 라고 입력하면 된다. 이 때 언더바(_)나 확장자명(.scss)를 따..

📌 Sass란? CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 효율적으로 CSS를 관리하고 모듈화할 수 있으며 여러가지 조건문, 반복문같은 기능들을 활용할 수 있어서 편리하다. Sass vs Scss 차이점 - Sass : 중괄호 { } 없이도 입력 가능하기 때문에 오류가 나기 쉬움. - Scss : Sass를 보완하기 위해 중괄호{ }를 쓰는 것. Scss에서 중괄호{}가 없는 것이 Sass이다. 중괄호{}를 없애 용량을 줄일 수 있지만 실수로 인해 컴파일 에러가 날 수 있기 때문에 SCSS를 주로 사용한다. Scss사용은? 그냥 Sass를 설치하고 확장자를 Scss로 쓰면 된다. 📌 프로젝트 파일에 Scss만들기 1. style.scss파일을 생성 나는"study-scss"라는 프로젝트 폴..