IT정보 웹디자인 유익한 정보

[패스트캠퍼스] 웹퍼블리싱 강의 8주차 패스트캠퍼스에서 최근 듣고 있는 K디지털기초역량훈련 과정은 국비지원교육으로 다음주면 훈련이 종료된다. 현재 듣고 있는 과목은 웹퍼블리싱 완전정복인데.. 내가 훈련받고 있는 기수는 1기 교육과정이었고 현재 2기를 모집중인거 같다. https://fastcampus.co.kr/b2g_kdc 내일배움아카데미 : K-Digital 기초역량훈련 | 패스트캠퍼스 국비지원 강의를 찾는다면? 시간/장소 제약없이 내일배움카드를 통해 코딩, 데이터사이언스, 디자인, 영상, 마케팅 강의를 0원에 수강하세요! fastcampus.co.kr 다양한 과정이 오픈되어 있다. k디지털지초역량 훈련과정인데.. 분야별 트렌드에 맞는 과정들이 준비되어 있는 듯하다. 자신에게 맞는 과정을 찾아본다면 ..

[패스트캠퍼스] 웹퍼블리싱 강의 7주차 웹퍼블리싱 교육을 듣다. K디지털기초역량훈련 중 하나인 웹퍼블리싱 완전정복 교육을 받고 있다. 파노라마 레이아웃을 실습했다. 3D 처럼 움직이는 파노라마 ui 를 만들 수 있다. 동영상 풀스크린 ui 이다. 1. 레이아웃을 보면.. 가장 큰 부분은 wrap.main 으로 감싸고 부모요소인 circle 부분은 section 으로. (section#circle) 각각 8개의 프로필을 article 로 제작하고.. (article.face1 ~ article.face8 ) 각각의 프로필의 회전과 3D 배치(z축 설정)를 위하여 아래 코드가 필요하다. article.face1 { transform:rotateY0(0deg) translateZ(-764px); } artic..

[패스트캠퍼스] 웹퍼블리싱 강의 6주차 온라인 교육은 진도 순서에 상관없이 자신이 듣고 싶은 순서로 들을 수 있어서 좋다. 기존에 알고 있었던 기초적인 내용는 빠르게 훑고 지나갈 수 있고 좀더 공부하고 싶었던 영역에 집중해서 들을 수 있다는 것이 장점인거 같다. 2차시: html5 기초 문법내용은 기초적인 부분이라 빠르게 듣고 있는데.. 처음 웹을 접하는 초급자라면 다 중요하게 공부해야 하는 부분이긴 하다. 벌써 6주차 교육이다. 좀 더 진도에 박차를 가해야 할 때이다. 처음 웹을 처음 접하는 사람들에게도 어렵지 않도록 기초부터 상세한 설명을 하고 있어서 어렵지 않을 것으로 생각된다. 기존에 웹을 접해본 사람들에겐 어느정도 알고 있었던 내용도 시간이 지남에 따라 명령어나 개념등을 잊어버리는 경우가 많은데..

폰트아이콘 사이트 모음 웹상의 아이콘폰트를 이용하면 쉽게 아이콘을 사용할 수 있습니다. 장점은 일일히 포토샵으로 아이콘 이미지를 만들지 않아도 아이콘을 사용할수 있습니다. 그림이 아닌 폰트로 인식하고 폰트로 취급합니다. 따라서 font-size, color 등의 태그로 컨트롤 합니다. 1. fontawesome https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 2. xeicon https://xpressengine...

[패스트캠퍼스] 웹퍼블리싱 강의 5주차 K디지털기초역량훈련 과정인 웹퍼블리싱 완전정복을 듣고 있는데.. 지바스크립트 기초 부터 활용까지 커리큐럼이 좋다. 자바스크립트입문부터 활용까지 학습이 필요하다면 이 과정이 좋은 선택지가 될 수 있을 것이다. ▶ 자바스크립트 브라우저 정보 제어 (Bom) ▶ Dom (문서객체모델) Dom : body 안쪽에 있는 html문서를 제어하고 스타일링을 하는것 ▶ Bom ( browser 객체 모델) ( Dom 보다 상위에 있는 버전인 브라우저 객체 모델 ) ▶ Bom 종류 → window객체 : 윈도우의 정보값을 알 수 있다. → navigator객체 → location객체 → settimeout, setinterval → this값 바인딩 → window객체 : 윈도우의..

[패스트캠퍼스] 웹퍼블리싱 강의 4주차 벌써 4주차 교육 이다. 실습을 병행하다보니. 하루가 빨리 지나간다. 이따금씩 잘 안풀리는 문제를 풀다보니.. 시간이 많이 소요되고... 훈련과목 교육을 주어진 시간안에 들어야 한다. 때문에 시간관리가 필요하다. 나의 공부하는 방법으로는 일단 1차로 강의화면을 쭈욱 들으며 전체적인 흐름과 내용을 파악하고.. 2차로 코드 타이핑과 html 브라우저 내용물 확인을 하며 코드를 완성해나가고 있다. 여러차례 반복학습을 통하여 개념을 파악 할 수 있어서.. 가장 편리한 점이 아닌가 생각해본다. 현재 훈련중인 과정은 웹퍼블리싱 완전정복 이라는 과정으로 html기초부터 자바스크립트 활용과 웹사이트 구축 배포까지 포함하는 교육과정이다. github에 자료를 올리고 버전관리, gi..

[패스트캠퍼스] 웹퍼블리싱 강의 3주차 3주차이다. 일주일이 너무 빨리 지나간다. 기본 교육부분은 빠르게 듣고 지나갈 수 있는 부문이라 가볍게 복습하는 기분으로 들어보자. 꼼꼼한 실습이 필요한 부문에 시간을 많이 할애해야 한다. 몇가지 실습을 하다보니.. 벌써 일주일이 지나간다. abobe Xd 교육과정이 포함되어 있다. abobe Xd는 피그마, 스케치와 비슷한 프로토타입 구현 툴이다. 기초적인 사각형, 원 등 기초 도형그리기부터 모바일ui 제작까지... 프로토타입을 만들 수 있다. ui제작에 필요한 활용기술과 꼭 알아야 되는 기능까지 꼼꼼하게 지도해주셔서 매우 감사하다. 예전에 다른 교육을 통하여 피그마를 접해 보았는데.. 기초는 설명이 안되어 있어서 초기 접근이 쉽지 않았다. 이 교육 과정은 처음 ..

[패스트캠퍼스] 웹퍼블리싱 강의 2주차 웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인 : 교육 훈련 2주차 [ sass 를 공부하는 이유 ] sass 는 css 전처리기로 css를 구조화, 그룹화하여 간결하고 편리하게 퍼블리싱할 수 있다. [sass 를 사용하려면? ] sass 문법 또는 scss 문법을 사용하기 위해서는 node.js 설치가 필요하다. sass 사용하려면 node js 가 설치되어야 한다. 1. node js 설치 구글, 네이버 에서 node.js사이트 방문하여 프로그램 파일을 설치한다. → 안정적인 LTS 버전을 선택한다. 2.컴 재부팅 3. 나의 컴에 node js 설치확인.. cmd 로 명령프롬프트 창을 연다. node -v node js 의 버전이 나온다. ..

[패스트캠퍼스] 웹퍼블리싱 강의 1주차 패스트캠퍼스 K-디지털 기초역량훈련 시작.. 웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인 : 교육 훈련시작 국비지원교육이므로 거의 무료로 배울 수 있어서 .. (훈련비용 49,000 원) 정말 좋은 과정이다. 참석율 80% 이상이면 지불한 금액을 다시 환불 받을 수 있다. 기존에 패스트캠퍼스의 다른 여러 과목도 유료(150 만원)로 수강하고 있었는데.. "국비지원 교육"을 통하여 필요했던 과정을 무료로 배울 수 있어서.. 정말 좋은 기회이다. 최성일 강사님의 강의를 전부터 듣고 싶었는데.. 이렇게 온라인을 통하여 접하게 되어서 기쁘다. 과정을 완료하게 되면 멋진 웹디자인 결과물을 얻게 될 거 같다. 몇개의 게시 동영상을 무작위로 수강해 보았는..

16:9 ratio https://calculateaspectratio.com/ Aspect Ratio Calculator - 4:3, 16:9, 21:9 (Ratio calculator) Calculate aspect ratio easily with our online Aspect Ratio Calculator. Input your desired dimensions to get the perfect aspect ratio for your images and videos. calculateaspectratio.com https://www.aspect-ratios.com/16-9-aspect-ratio/ 16:9 Aspect Ratio - The most complete 16:9 aspect ratio c..

미디어쿼리 (MediaQuery )설정 ▶ PC : 1280px 이상 ▶ 노트북 & 태블릿 가로 : 1024px ~ 1279px ▶ 태블릿 가로 : 768px ~ 1023px ▶ 모바일 가로 & 태블릿 세로 : 480px ~ 767px ▶ 모바일 : ~479px 일반 데스크탑 1280px 이상 노트북 & 태블릿 가로 1024px ~ 1279px @media (max-width:1279px) 태블릿 가로 768px ~ 1023px @media (max-width:1023px) 모바일 가로 & 태블릿 세로 480px ~ 767px @media (max-width:767px) 모바일 320px~479px @media (max-width:479px) 작은 모바일 320px 이하 @media (max-width:..