UI UX(Web) (51) 썸네일형 리스트형 Web 01 Part1. 스마트문화앱 콘텐츠 설계, HTML입문 스마트 문화 콘텐츠의 기본적인 콘셉트는 프로젝트를 기획하면서 알게 모르게 자연스럽게 만들어진다. 그렇기 때문에 콘셉트를 정하기 위해 가장 먼저 해야 할 일은 앞서 작성한 프로젝트 기획서를 검토하고 프로젝트 기획서 안에 이미 녹아들어 있는 콘셉트를 발견하는 것이다. 그리고 발견한 콘셉트를 구체적으로 정리하여 확장 및 발전시켜 나가야 한다. 하나의 프로젝트 기획에서 다양한 형태의 결과물 만들어질 수도 있다. 콘셉트를 어떤 방향으로 확장·발전시키느냐에 따라 전혀 다른 결과물이 나올 수 있기 때문이다. 이와 같이 하나의 자원을 토대로 다양한 사용처를 개발해 내는 것을 OSMU(One Source Multi-Use)라고 한다. 생성형 인공지능으로 디자인 시안제작 네트워크 기반의 웹앱 콘텐츠 개발을 하기전에 디자.. 웹 포트폴리오와 전시를 위한 OnePage 반응형웹 템플릿 포트폴리오와 전시회를 위한 OnePage 반응형웹 템플릿 공짜로 주는 사람없나요? 추수감사절처럼 특정한 과정을 마치고 결실을 맺는 졸업과 수료의 시점 서버에 올려진 자신의 소개와 작품전시에 활용할 포트폴리오와 전시회를 위한 OnePage 반응형웹 템플릿을 웹호스팅과 기본적인 코딩을 할 수 있는 이들을 기준으로 소개하는 강좌를 준비해 보았다. [ 코딩과 호스팅의 개념을 모르면 안되는 강좌내용임. 모르면 뒤로갓!!!! ]UI/UX 관련 직군에 프론트엔드/백엔드 개념정리프론트엔드 Front-end. 프로그래밍의 한 분야로 웹사이트나 앱 등의 사용자 인터페이스(UI)를 개발하는 분야를 말한다. 안드로이드 혹은 iOS 개발도 넓게 보면 프론트엔드 개발에 포함될 수 있다. 반대말은 백엔드 Back-end.. Bootstrap 개요, 반응형웹을 위한 그리드 시스템(4가지 클래스) 부트스트랩(Bootstrap)이란 무엇인가? MIT에서 개발해서 공개한 부트스트랩(Boottrap)은 더 빠르고 쉬운 웹 개발을 위한 무료 프론트엔드 프레임워크입니다. 제이쿼리(jQuery)와 함께 웹/앱개발에 주로 사용하는 부트스트랩의 특징은 타이포그래피, 양식, 버튼, 테이블, 탐색, 모드, 이미지 캐러셀 및 기타 여러 가지를 위한 HTML 및 CSS 기반 설계 템플릿과 옵션인 JavaScript 플러그인이 포함되어 있습니다. 반응형 모바일 우선 웹사이트를 만드는 데 가장 인기 있는 HTML, CSS 및 자바스크립트 프레임워크인 부트스트랩의 최신 버전입니다.부트스트랩은 완전히 무료로 다운로드하여 사용할 수 있습니다! 부트스트랩의 개발은 매사추세츠 공과대학교(MIT)로 공개된 내용은 앞서 말한 무료.. 이미지 색상컨셉 Color-Palette-Generator 디자인작업시 생각하는 색상들을 이미지로 부터 컨셉을 정하는 Color-Palette-Generator를 소개합니다.색상 휠을 사용하여 조화로운 색상 팔레트를 만들어 보세요. 기본 색상을 선택하고 유사한 색상, 삼색, 보색 등의 다양한 색상 하모니 중에서 선택하여 세련된 디자인을 제작할 수 있습니다. https://color.adobe.com/ko/create/image https://color.adobe.com/ko/create/image color.adobe.com https://www.canva.com/colors/color-palette-generator/ Web 06. 웹서버에 FTP로 파일연결, 파일질라 웹사이트 개발을 위한 유료 혹은 닷홈 무료 웹호스팅 서비스 신청으로, 서버와 내컴퓨터를 일정한 ID, PW라는 고유의 계정을 별도개의 FTP계정을 부여받았습니다. 닷홈의 회원계정과 별개의 계정으로 서버와 접속하는 프로그램이 FTP입니다. 하이퍼텍스트 전송 프로토콜(HTTP)은 월드 와이드 웹의 토대이며 하이퍼텍스트 링크를 사용하여 브라우저를 통해 웹 페이지를 로드하는 데 사용됩니다. FTP(파일 전송 프로토콜)는 서버의 내 공간인 리모트사이트와 내 컴퓨터인 로컬사이트로 파일을 FTP프로그램을 통해 업로드하거나 다운로드할 수 있습니다. 이번시간에는 웹사이트 개발을 위해 파일질라의 사이트관리자 기능과 비밀번호 묻기처리, 탐색 동기화등 내컴퓨터인 로컬사이트와 웹호스팅한 서버공간인 리모트 사이트의 기.. Web 05. 웹호스팅, 도메인, 반응형템플릿(FTP) 웹사이트, 앱을 제작하기 위해서는 웹호스팅과 도메인 등 기본 2개의 서비스를 받아야 합니다.여러분이 html, css 등을 이용한 코딩연습을 내 컴퓨터에서 하는 것만은 실무적인 부분과 먼 연습으로 끝나는 시간일 것입니다. 안정적인 서버환경의 저장공간에 자료를 업로드하고 이용할 수 있는 웹호스팅은 필수 입니다. USB처럼 제한된 공간에 웹문서와 관련된 소스들이 리눅스, 윈도우즈 서버의 운영체제로 설치가 되고 전용회선, 안정적인 트래픽과 보안이 된 원룸임대업자에게 1년단위로 공간이용 계약을 하고 들어가서 사는 것과 같은 공간사용을 웹호스팅이라 합니다. 웹호스팅의 운영을 위해서 파일전송 프로토콜의 공간을 이용하는 FTP라는 프로그램의 사용을 통해서 올리고, 내리고 운영에 필요한 시점에 업데이트를 하는 것.. Web 04. Layout을 위한 div 디비전태그, 반응형웹 기초 비쥬얼스튜디오 코드, 서브라임 텍스트, w3school Try yourself 등 다양한 웹에디터를 이용해서 웹퍼블리싱 작업을 할때유튜브 영상의 공유를 통한 아이프레임태그를 이용한 동영상, 글,그림 등의 요소들은 무조건적으로 아래로 내용이 펼쳐집니다. 어떤 요소들을 원시적인 상태가 아닌 박스형태의 틀 속에 담아 레이아웃에 활용하는 디비전 태그들을 소개합니다. 미첼 가족과 기계 전쟁 처럼 디비전태그는 일반적이기도 하지만 , 바깥세상과 다른 [ 작은집단인 가족 구성원 속]에서의 재미있는 각 요소별 스토리텔링을 디비전의 포지션 속성을 배우며 독특한 레이아웃을 구성 할 수 있습니다. https://www.w3schools.com/html/html_youtube.asp W3Schools.comW3Scho.. Web 03. <a href="url">하이퍼링크, 그림글씨 폰트어썸(클래스,아이디) Hyper link : 웹 문서, 웹 사이트 등의 URL연결시에 사용하는 태그이다. 외부연결시에는 타겟이 필요하다. _blank">바로가기(그림은 배너) 일반적인 하이퍼링크, 독특한 벡터형태의 그림글씨인 폰트어썸을 배우며 클래스와 아이디를 구분해 보는 시간을 갖습니다.https://www.w3schools.com/html/html_links.asp W3Schools.comW3Schools 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,.. Web 02. HTML Style, Color, List, Table, Border, Margin, Padding 일반문서에서도 표, 셀나누기, 셀합치기, 문서의 쪽 여백, 배경색상 등 문서의 스타일들이 있습니다. html 문서에도 필요한 여백과 서체(웹폰트 포함), 배경색상과 글씨색상 등 Head문에 삽입외는 마진:외부여백, 패딩:안쪽여백, 보더:테두리 색상 두께 스타일 3개속성 h1태그에 연습하기....웹 요소 박스형상을 띰 // 보더는 적용위치에 따라서 적용하기도 하고 일반적으로는 상하좌우에 선이 보인다. -bottom, -left, -top, -righth1{border-left:16px #f00 solid;border-bottom:1px #000 solid;padding-left:10px;} HTML 테이블은 여러 가로행row 및/또는 세로열cols에 걸쳐 있는 셀을 가질 수 있습니다. 셀 범위를.. Web 01 Part2. 웹문서의 배경이미지, 배경색 CSS는 웹문서의 다양한 디자인 속성을 반영해준다. 아래는 본문인 Body태그에 적용한 배경이미지와 배경에 대한 속성을 구분해보았다. 배경이미지의 속성인 background-image는 오직 이미지만 활용가능한 속성이다. 반면에 배경의 속성인 background는 단순한 배경색상 외에도 다양한 세부속성을 포함한 큰 개념으로 중복해서 사용하는 경우가 많다.https://www.w3schools.com/cssref/css3_pr_background.php W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects.. 디지털디자인 구성요소설계(로고디자인 03.15) 보호되어 있는 글입니다. 소셜로그인 지원 웹사이트에 소셜로그인을 지원하면 쉽게 회원가입없이 로그인하여 이용이 편리합니다. 소셜로그인 지원을 위해서는 작업전 해당 소셜서비스에 로그인하고 개발자로 등록했는지 여부를 알아아 합니다. 그누보드, 영카트, 워드프레스용 쇼핑몰 배포 그누보드, 영카트 개발사로 웹사이트와 쇼핑몰을 무료로 만들수 있는 수많은 솔루션을 무료로 제공하고 있으며 다국어버전도 배포하고 있습니다. 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 비디오는 미디어서버 공간활용 .. 아이템의 그래픽과 코딩표현 아이템의 그래픽과 코딩표현 디자인을 반영한 형식 아이템에 적용한 CSS 속성과 값 소스활용(w3schools.com) 최종버전입니다. 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 PHP(html) 인클루드문 적용 메인페이지의 주요 아이템을 그리드 시스템활용부분으로 테마중 헤드, 인덱스문 해당테마에서 붙여놓으시고 아래는 진행중인 반응형웹의 페이지입니다. https://www.w3schools.com/css/css_grid.asp CSS Grid Layout 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 https://www.w3schools.com/cssref/tryit.asp?f.. 웹사이트제작 2편 - 그누보드 테마와 스킨 웹사이트제작 2편 - 그누보드 테마와 스킨 https://sir.kr/g5_theme/7433?sfl=wr_subject%7C%7Cwr_content&stx=%EB%B0%98%EC%9D%91%ED%98%95 GnuTailwindcss v0.3.0 Dark Mode 지원 > SIR GnuTailwindcss v0.2.1에 Dark Mode를 추가한 버전입니다. 그외에 Video 게시판의 Naver TV와 관련한 오류를 수정했으며, 기존의 레이아웃을 일부 수정하였습니다. 이번에도 두서없이 작업하느라 sir.kr 반응형의 경우는 설치된 main에서 config.php 파일 define('G5_USE_MOBILE', false); // 모바일 홈페이지를 사용하지 않을 경우 false Bootstrap Icons.. 이전 1 2 다음
