본문 바로가기

분류 전체보기

(227)
[무료 폰트]여기어때 잘난체 / 상업용 무료 폰트 https://www.goodchoice.kr/font 여기어때 서체 출시! 매력만점 '잘난체'를 지금 다운받아 보세요! www.goodchoice.kr 웹폰트 적용 1. 로컬 @font-face { font-family: 'Jalnan'; src: url('JalnanOTF.woff') format('woff'); font-weight: normal; font-style: normal; } 2. @font-face { font-family: 'yg-jalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-sty..
[CSS]Flex Containers 속성 flex-wrap, justify-content, align-content, align-items flex-wrap 값 의미 nowrap 모든 items를 한 줄로 표시 wrap items를 여러 줄로 묶음 wrap-reverse items를 wrap 역방향으로 묶음 justify-content 값 의미 flex-start 시작점으로 정렬(default) flex-end 끝점으로 정렬 center 가운데 정렬 space-between 시작 아이템은 시작점에, 마지막 아이템은 끝점에 정렬 나머지 아이템은 고르게 정렬 space-around 아이템을 균등한 여백으로 정렬 align-content 교차축 정렬 방법 items가 2줄 이상이며 여백이 있을 경우 사용 속성 의미 stretch 교차축을 채우기 위해 늘림 flex-start 각 줄의 시작점으로 정렬 flex-end 각 줄의 끝점으로 정렬 cent..
알고리즘 사이트 추천 / 코딩테스트 국내 CodeUP 기초연습 100제 풀어보기 https://codeup.kr/ CodeUp ☆ 파이썬 다운로드 : 파이썬3 ☆ 무료 C언어 IDE : Code::blocks DEV C++ ☆ 추천 온라인 IDE : C++11 Python3 Java ☆ 채점 가능 언어 : C, C++, JAVA, Python 3.5 ★ C++로 제출시 void main()을 사용하면 컴�� codeup.kr codeground 삼성 프로그래밍 경시대회 문제 모음집 SCPC https://www.codeground.org/ codeground Codeground is a real-time coding website open to those interested in software development and algorith..
Frontend Developer / Developer Roadmaps 개발자 로드맵 Frontend Developer Step by step guide to becoming a modern frontend developer https://roadmap.sh/ Developer Roadmaps Community driven roadmaps, articles, guides, quizzes, tips and resources for developers to learn from, identify their career paths, know what they don't know, find out the knowledge gaps, learn and improve. roadmap.sh
React 리액트 배포하는 법 / 생활코딩 개발환경이 구축되었다면 터미널에서 npm run build build 폴더가 생성된다. 최상위 디렉터리에 build 안에 있는 파일을 위치시키면 용량을 줄여준다. npx serve -s build serve라는 웹서버를 다운로드하여서 실행시킬 때 build 디렉터리를 다큐먼트 루트로 하겠다.(-s) 주소를 알려주고 들어가보면 똑같이 작동하고 개발환경의 용량을 줄여준다.
React 리액트란? create-react-app을 이용한 개발환경구축 / 생활코딩 React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org React 리액트란? 페이스북에서 만든 자바스크립트 UI 라이브러리 Component 기능 가독성 재사용성 유지보수 CODING -> RUN -> DEPLOY 개발환경 npm 설치 node.js의 기술을 이용해 만든 앱을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 도구(일종의 앱스토어) https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.or..
웹 접근성(web accessibility)이란? 적용 방법 웹 접근성의 이해 웹 접근성이란? 모든 사용자(장애인, 노인 등)가 모든 기기에서 웹에 접근할 수 있도록 하는 것 웹 접근성을 지켜야 하는 이유 13년 4월 11일부터 장애인 차별 금지법(장차법)이 시행되었고 정보에 대해서 장애인이 비장애인과 동등하게 접근할 수 있도록 제공되어야 한다. "웹의 힘은 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소다." 장애 환경 시각 : 전맹, 저시력, 색맹, 색약, 노안, 운전 중 청각 : 난청, 스피커 없음, 소음 운동 : 지체장애, 마우스 없음 소프트웨어 : 운영체제/브라우저 미지원 네트워크 : 저속, 접속 불안정 1. 전맹 시각 장애 시력이 전혀, 거의 없어 앞을 볼 수 없습니다. 발달된 다른 감각(청각:스크린 리더 / ..
코딩 공부 사이트 및 유튜버 추천! 1. edwith 부스트코스 커넥트재단에서 기획하고 운영하는 실무형 온라인 교육 프로그램 https://www.edwith.org/ 에듀케이션위드 : edwith 에드위드(edwith)는 네이버(NAVER)와 커넥트재단(CONNECT)이 제공하는 온라인 강좌(MOOC : Massive Online Open Course) 교육 플랫폼입니다. 에듀케이션위드(education with) 에드위드(edwith)로 분야별 명품 강좌를 무 www.edwith.org 2.생활코딩 일반인들에게 프로그래밍을 알려주는 무료 온라인 수업 https://opentutorials.org/course/1 생활코딩 hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라..
To-Do List UI 디자인 참고
25 UX Design Interview Questions All About You 1. Tell Me About Yourself 2. What Made You Go Into UX Design? 3. Why Do You Want to Work Here? 4. On the Spectrum of UX Researcher to UX Designer to Visual Designer, Where Do You See Yourself and Why? All About Your Work 5. Show Me Your Portfolio 6. Take Me Through a Couple of Your Favorite Pieces in Your Portfolio 7. What Was Your Design Process for These Pieces? 8. What’s Your Fa..
UI 디자인 트렌드 뉴모피즘(Neumorphism) 2020년 UI 디자인 트렌드로 주목받는 뉴모피즘(Neumorphism) 플랫, 머티리얼처럼 대기업에서 제시된 디자인이 아닌 dribbble의 개인 사용자에 의해 시작되었는데요. 새로운 디자인 트렌드의 진화가 될지 디자이너들 사이에서 논쟁이되고 있습니다. 뉴모피즘은 영역 간 대비가 낮아 접근성이 낮다는 단점이 있습니다. 웹 문서 접근성 지침(WCAG)을 따르지 못해 실제 뉴모피즘을 적용한 제품은 만나보기 어렵지만 새로운 가능성과 경험을 제시할 것으로 보입니다.
BBC 디자인 시스템 / BBC GEL 영국의 공영방송사인 BBC가 제공하는 디자인 가이드라인 https://www.bbc.co.uk/gel BBC GEL | Homepage Our Global Experience Language (GEL) is the BBC's shared design framework which enables us to create consistent and delightful user experiences across all of our Digital Services. www.bbc.co.uk