UI UX(Web) (54) 썸네일형 리스트형 디지털디자인 구성요소설계(로고디자인 03.15) 보호되어 있는 글입니다. 스마트 문화 앱 구현(8.17) 보호되어 있는 글입니다. 스마트문화앱 UI디자인(8.9) 보호되어 있는 글입니다. 홈페이지 제작을 위한 웹호스팅, 도메인, FTP, 반응형템플릿 웹사이트, 앱을 제작하기 위해서는 웹호스팅과 도메인 등 기본 2개의 서비스를 받아야 합니다. 여러분이 html, css 등을 이용한 코딩연습을 내 컴퓨터에서 하는 것만은 실무적인 부분과 먼 연습으로 끝나는 시간일 것입니다. 안정적인 서버환경의 저장공간에 자료를 업로드하고 이용할 수 있는 웹호스팅은 필수 입니다. USB처럼 제한된 공간에 웹문서와 관련된 소스들이 리눅스, 윈도우즈 서버의 운영체제로 설치가 되고 전용회선, 안정적인 트래픽과 보안이 된 원룸임대업자에게 1년단위로 공간이용 계약을 하고 들어가서 사는 것과 같은 공간사용을 웹호스팅이라 합니다. 웹호스팅의 운영을 위해서 파일전송 프로토콜의 공간을 이용하는 FTP라는 프로그램의 사용을 통해서 올리고, 내리고 운영에 필요한 시점에 업데이트를 하는 것입니.. 스마트문화앱 UX설계(8.2) 보호되어 있는 글입니다. FTP 파일질라 사용팁 파일질라는 지난 게시물에 웹사이트 개발을 위한 웹호스팅 공간인 서버와 내컴퓨터를 일정한 계정을 부여받아서 접속하는 프로그램으로 소개한 바있다. 이번시간에는 웹사이트 개발을 위해 파일질라의 사이트관리자 기능과 비밀번호 묻기처리, 탐색 동기화등 내컴퓨터인 로컬사이트와 웹호스팅한 서버공간인 리모트 사이트의 기본적이지만 익숙하지 않아 어렵게 사용하는 분들을 위해 소개합니다. 아직 무료 웹호스팅 서비스 신청을 못했거나, 파일질라 사용법을 모르면 아래 영상을 통해서 충분히 숙지하고 따라하기 바랍니다. UI UX 폴더내에 home 폴더생성 후 01. 웹호스팅 신청 / 계정정보 확인 : oztv21 ◆ 호스트(도메인,FTP 주소) : oztv21.ivyro.net ◆ FTP 암호????? : ********* 02. .. Web 03. 하이퍼링크, 아이디와 클래스, 폰트어썸 & 구글아이콘 Hyper link : 웹 문서, 웹 사이트 등의 URL연결시에 사용하는 태그이다. 외부연결시에는 타겟이 필요하다. 바로가기(그림은 배너) 본 게시물 하단에 Div Tag에 대해서 소개하고 html문서를 공유합니다. URL에는 웹 문서, 웹 사이트, 현재문서내 위-아래 바로가기, 전화번호(전화상담,문자상담),이메일,폰번호(010-0000-000 전화및문자 상담) 등을 연결해서 모바일 환경에서 자주사용 ※아이콘 주로 활용하는데 폰트어썸을 주로 이용한다. 앵커태그사이에는 글,그림,아이콘을 주로 넣는다. 외부연결시에는 타겟이 필요하다. 새창개념의 new, 빈 창/탭 개념의 _blank를 주로 사용한다. 앵커태그와 유사한 기능을 하는 자바스크립트 예외이다. 서브라임텍스트에서는 본 문서내에서 우클릭후 '오픈 인 .. 스마트문화앱 사용자 조사분석(0724) 보호되어 있는 글입니다. 스마트문화앱 콘텐츠설계(0719) 보호되어 있는 글입니다. Web 02. HTML Style, Color, List, Table 일반문서에서도 쪽 여백과 관련된 문서의 스타일들이 있습니다. 웹문서에도 필요한 여백과 서체(웹폰트 포함), 배경색상과 글씨색상 등 Head문에 삽입외는 마진:외부여백, 패딩:안쪽여백, 보더:테두리 색상 두께 스타일 3개속성 h1태그에 연습하기....웹 요소 박스형상을 띰 // 보더는 적용위치에 따라서 적용하기도 하고 일반적으로는 상하좌우에 선이 보인다. -bottom, -left, -top, -right h1{border-left:16px #f00 solid;border-bottom:1px #000 solid;padding-left:10px;} Web 01. 앱콘텐츠 설계 HTML입문 스마트 문화 콘텐츠의 기본적인 콘셉트는 프로젝트를 기획하면서 알게 모르게 자연스럽게 만들어진다. 그렇기 때문에 콘셉트를 정하기 위해 가장 먼저 해야 할 일은 앞서 작성한 프로젝트 기획서를 검토하고 프로젝트 기획서 안에 이미 녹아들어 있는 콘셉트를 발견하는 것이다. 그리고 발견한 콘셉트를 구체적으로 정리하여 확장 및 발전시켜 나가야 한다. 하나의 프로젝트 기획에서 다양한 형태의 결과물 만들어질 수도 있다. 콘셉트를 어떤 방향으로 확장·발전시키느냐에 따라 전혀 다른 결과물이 나올 수 있기 때문이다. 이와 같이 하나의 자원을 토대로 다양한 사용처를 개발해 내는 것을 OSMU(One Source Multi-Use)라고 한다. 스마트문화앱 콘텐츠 설계 NCS교재 HTML은 무엇인가? 하이퍼텍스트 마크업 언어(Hy.. 소셜로그인 지원 웹사이트에 소셜로그인을 지원하면 쉽게 회원가입없이 로그인하여 이용이 편리합니다. 소셜로그인 지원을 위해서는 작업전 해당 소셜서비스에 로그인하고 개발자로 등록했는지 여부를 알아아 합니다. 그누보드, 영카트, 워드프레스용 쇼핑몰 배포 그누보드, 영카트 개발사로 웹사이트와 쇼핑몰을 무료로 만들수 있는 수많은 솔루션을 무료로 제공하고 있으며 다국어버전도 배포하고 있습니다. sir.kr SNS마케팅을 위한 콘텐츠 제작실무(평가 : 공식 블로그 제작) SNS마케팅을 위한 콘텐츠 제작실무는 네이버의 프로필과 포트폴리오를 소개하는 목적의 공식블로그를 다음 조건에 맞게 개설과 관리운영 기능을 URL을 통해 운영관리하는 내용입니다. 1. 공식블로그 네이밍 설정 2. 관리모드에서 레이아웃 및 카테고리 구성 3. 레이아웃에 최적화된 블로그 스킨디자인 4. 이미지맵형태의 하이퍼링크로 위젯을 통한 게시판 연결 (위젯,투명GIF,태그) 네이버는 3개의 계정을 유지(회원로그인 없이 회원가입으로 실명 가입 다시해주세요) 1개 oknok70 / 회원가입 별도로 했음 개인(법인)가능합니다. https://blog.naver.com/gunslinger6970 오즈마트 공식블로그 : 네이버 블로그 기발한 생활용품을 판매하는 오즈마트 공식블로그입니다. blog.naver.com .. 키워드로 분석한 웹분야의 취업키워드(카드뉴스, 블로그 디자인) 키워드로 분석한 웹분야의 취업키워드는 # 프론트 엔드(웹디자인과 웹퍼블리싱) / 백 엔드(웹프로그래밍 영역서버사이드 스크립트 PHP) = 그누보드(워드프레스, 제로보드) 소셜커머스, 쇼핑몰, 오픈마켓, 전자상거래, B2C, 게시판관리, 쇼핑몰, 웹사이트운영, HTML5, HTML코딩, 포토샵,카드뉴스, 유튜브, 블로그 등이 있습니다. 이력서에 학원 교육과정 수료내용 추가 ■ 포트폴리오 : BI&CI 디자인(목업), 배너, 카드뉴스,유튜브(인트로영상포함) 포폴활용가능한 미리캔버스 ■ 웹포폴(2+B) 현재 문화앱(목업 콘셉 URL), 커뮤니티형 웹사이트(소셜로그인 지원 네이버) A,B2개유형(닷홈웹호스팅), 네이버 공식블로그(사이트 추가)=포폴을 공개 웹 취업분야 1. 기업의 웹사이트 관리(디자인,웹사이트 .. 키워드로 분석한 웹분야의 취업정보 프론트 엔드(웹퍼블리싱) / 백 엔드(서버사이드 스크립트 PHP)=그누보드(워드프레스, 제로보드) 이력서 교육과정 수료내용 추가//////////////////////////// ■ 포트폴리오 : BI&CI 디자인(목업), 배너, 카드뉴스,유튜브(인트로영상포함) 포폴활용가능한 미리캔버스 ■ 웹포폴(2+B) 현재 문화앱(목업 콘셉 URL), 커뮤니티형 웹사이트(소셜로그인 지원 네이버) A,B2개유형(닷홈웹호스팅), 네이버 공식블로그(사이트 추가)=포폴을 공개 취업분야 ////////////// 1. 기업의 웹사이트 관리(디자인,웹사이트 운영=개발사연락 계정정보 ftp 디자인 그림 등 콘텐츠 수정, 공식블로그-유튜브 운영관리, 상품상세이미지) ■ 주요키워드 # 소셜커머스, 쇼핑몰, 오픈마켓, 전자상거래, B.. 수정보완 평가(5.18)안내 보호되어 있는 글입니다. 그누보드 유튜브게시판 스킨 그누보드 유튜브 게시판 스킨입니다. 게시판스킨과 최신글 스킨으로 구분되어 있으니 잘 파악해서 적용하세요. 아래는 유튜브게시판을 미리보기입니다. 1. 게시판 스킨 (쓰기,보기,리스트 목록) 아래 압축파일을 다운로드 후 압축풀고, 그누보드 내 theme/kfood_v03/skin/board/ 경로에 붙여져 있어야 하니, FTP로 업로드 하시면 됩니다. 2. 최신글 스킨 (메인페이지 최신글 노출 1개 ) 아래는 메인페이지에서만 적용되는 최신글로 스킨디렉토리내에 latest라는 곳에 FTP로 업로드 후에 메인에서는 php구문으로 연결해서 보여집니다. 게시물이 갤러리와 달리 1개 정도 임펙트 있게 보여지면 늘 변화된 사이트가 될 수 있습니다. 위 다운로드 후 압축을 풀고 위 스킨을 skin에 업로드해야 합니다. .. 그누보드 테마 - 메인과 서브페이지 내용(Content-Basic) 웹사이트의 주된 내용을 그누보드는 게시판/콘텐츠로 구성합니다. 그누보드의 서브페이지 콘텐츠 내용 구성과 스킨(Content-Basic) 반응형 변용에 대해 소개합니다. 01. FTP로 이미지 업로드 후 PC에서 html문서로 내용확인 PC에서 확인하고 이미지파일을 FTP로 업로드 해주세요. 해당된 html문서는 PC용으로 테스트 하고 내용수정에서 필요한 부분만 삽입합니다. 그냥 테스트를 하면 제 한식 이미지로 뜨니 여러분도 FTP에 여러분들만의 이미지를 업로드 하고, html문서로 테스트를 해봐야 합니다. 그렇다면 다음작업은 서버사이드측에서 아래 내용을 작업 합니다. 02. PC에서 내용확인이 되었다면 서버에서 스킨내용수정 우선 직접적인 콘텐츠의 내용을 담는 부분인 스킨을 변경합니다. 즉, 관리자모드에서.. 스마트문화앱 UI디자인(05.10) 보호되어 있는 글입니다. 메인페이지 - 탭 배경작업과 내부 구성요소 레이아웃 오늘의 날짜와 날씨 정보를 아래 php문서를 인클루드해서 메인에 추가해보세요. 아래는 최신업데이트한 테마 압축파일입니다. 교육내용을 따라하는 데 참고하세요. 개인정보처리방침, 이메일무단수집 거부 자료는 아래 첨부내용을 수정해서 사용하세요. 탭 배경작업과 내부 구성요소 레이아웃을 포토샵의 마스크 총정리로 프론트앤드와 백 앤드 작업을 병행해봅니다. UI, UX관련 개발소스(html, css) 디자인구성요소 설계를 위한 분석 외부 플러그인이라 하여 현재 작업중인 태그내에 삽입하여 사용하는 경우에는 직접 HTML과 CSS로 코딩하면서 웹퍼블리싱을 하지만은 않습니다. 관련된 프레임 oztv.tistory.com 탭 내부에도 꽉찬 레이아웃이 아닌 부트스트랩의 그리드 표현이 필요합니다. 아래 소스를 참고로 작업진행하.. 그누보드 부트스트랩과 탭형식의 최신글 반응형구현 그누보드 부트스트랩과 탭형식의 최신글 반응형구현 https://youtu.be/VCi3_ANMwio /html/main/theme/kfood_v03/skin/latest 에 아래 스킨을 다운받아서 /html/main/theme/kfood_v03/skin/latest/basicPic 위와 같이 설치해주세요 그누보드용 B5 그리드시스템 샘플 테스터 최신글 스킨테스트 1차 스마트문화앱 UX설계(04.21) 보호되어 있는 글입니다. 외부자료를 본문내 삽입하는 아이프레임(iframe) iframe : 정해진 크기에 외부에 콘텐츠나 사이트 그내부에 일부인 것처럼 뜬다. 고유 네임과 ID가 있어서 A태그의 타겟대상되는 경우로도 활용가능. ex)주가정보,날씨,배너,구글검색 https://www.w3schools.com/tags/tag_iframe.asp HTML iframe tag W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 비디오는 미디어서버 공간활용 .. Bootstrap 5 그리드 시스템에는 4가지 클래스 Bootstrap 5 그리드 시스템에는 6가지 클래스가 있습니다. 그중 정리한 11 22 33 44 아래부분을 콘테이너에 적용해보세요. 11 22 33 44 현재 테마의 테마 그리드4개 개선버전 Bootstrap 5 Grid System W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com Bootstrap 5 그리드 시스템에는 6가지 중 4개 클래스를 정리했습니다. .col-.. 아이템의 그래픽과 코딩표현 아이템의 그래픽과 코딩표현 디자인을 반영한 형식 아이템에 적용한 CSS 속성과 값 소스활용(w3schools.com) 최종버전입니다. UI, UX관련 개발소스(html, css) 디자인구성요소 설계를 위한 분석 외부 플러그인이라 하여 현재 작업중인 태그내에 삽입하여 사용하는 경우에는 직접 HTML과 CSS로 코딩하면서 웹퍼블리싱을 하지만은 않습니다. 관련된 프레임워크 플러그인 요소를 알고 삽입하여 활용하는 방법을 소개합니다. ★ BS로 제작한 웹사이트 템플릿 > 구글검색 아래는 최신 업데이트된 위로가기 StrollTop 자료파일원본(html, css)파일입니다. 아래는 위 파일내용을 함축적으로 정리한 2 버전입니다. Bootrap , jQuery 응용기술(버전유의) https://www.w3schools.com/bootstrap5/ https://www.w3schools.com/w3css/w3css_accordions.asp https://www.w3schools.com/howt.. HTML 아이덴티티의 표현 - 파비콘과 오픈그래프 타이틀디자인(BI, Logo)에서 만든 심플한 심볼이미지를 브라우저에 북마크(즐겨찾기) 및 앱제작시 스마트폰에 뜨는 파비콘으로 활동되는 태그를 소개합니다. 파비콘은 브라우저상 Title과 함께 뜨는 즐겨찾기 아이콘의 줄인말로 영어로 Favicon이라 한다. 일반적으로 ICO 파일을 만들어주는 별도 응용프로그램이 있다. 파비콘은 브라우저상 Title과 함께 뜨는 즐겨찾기 아이콘의 줄인말로 영어로 Favicon이라 하며, 일반적으로 ICO 파일을 만들어주는 별도 응용프로그램이 있습니다. 아래 IcoFX는 별도 설치가 필요없는 포터블입니다. 다운받아서 USB에 잘 보관하여 사용하시기 바랍니다. 파비콘을 만들기 위해서는 기본 256X256px의 PNG이미지가 필요하다. 포토샵, 일러스트레이터에서 심볼 작업후 아.. 인트로 스플래쉬(Splash)페이지 자동연결 인트로 스플래쉬(Splash)페이지 자동연결 상대경로와 절대경로로 구분하였습니다. 아래파일을 서버의 html(www)인 루트디렉토리에 업로드 후 표현하세요. 그누보드5 최신글 스킨과 서브페이지 비주얼요소 표현 그누보드5에서 작성한 글 중 텍스트, 이미지 위주의 게시판에서 최근에 작성한 순서대로 메인페이지의 레이아웃 구성에서 표현해주는 기능을 [ 최신글 ] 스킨이라 합니다. 메인의 최신글 소스와 관련 스킨소스입니다. 최신글 스킨의 위치 main/theme/kfood_v02/skin/latest/ 스킨은 원하는 HTML과 CSS외에 PHP로 구성된 코딩소스를 변경해서 가장 일반적인 형태로 구분해 보여지게 하는 레이티스트'lastest'라는 디렉토리에서 테마에 속한 스킨명, 게시판ID, 나열갯수, 제목의 제한 형태로 표기하여 보여집니다. Basic이라는 기본 스킨을 커스터마이징하여 처리하는 방법을 소개합니다. Bootsrap버전별로 차이가 있으나, 아래 적용한 소스는 BS5이다. ▶ 바로가기 theme/kfood_.. 디지털 제작 도구 시각화 작업을 시작하는 초반에는 주로 스케치 방법을 이용하여 표현해 보는 것이 바람직한 방법이며, 이후 여러 사람과의 의사소통, 공유 및 수정 작업을 위해 디지털 제작 도구를 사용하여 옮기는 방법이 바람직하다. 세계적으로 많은 사용자를 확보하고 있으며, 유료로 운영되고 있는 대표적인 디지털 제작 도구들은 다음과 같다. (1) UX Pin http://www.uxpin.com (2) Adobe XD http://www.adobe.com (3) Sketch http://www.sketchapp.com (4) InVision http://www.invisionapp.com 이전 1 2 다음
