UI UX(Web) (54) 썸네일형 리스트형 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편 - 웹호스팅과 DB셋팅(그누보드5) 여러분들이 웹코딩과 디자인으로 구현한 내용은 퍼블리싱(공개)하지 않는다면, 내컴퓨터에서 브라우저로만 보는 디렉토리(폴더)속 html문서일 뿐이다. 실제 웹사이트를 만드는 기술은 html의 해박한 지식외에도 솔루션들을 이용해서 만들어 낸다. 실전경험을 쌓는 차원에서 웹호스팅과 도메인 서비스를 이용해서 홈페이지를 만들어 보자. 우선, 안전적인 전용회선이 연결된 서버컴퓨터의 일정한 공간을 임대하여 내용을 채우고 선보이는 역할이 웹호스팅이라 한다. 도메인은 IP주소로된 URL을 10자 내외의 영어와 숫자로 만든 의미를 담은 문자형태로 웹사이트의 특성을 담을 것이다. 웹호스팅과 도메인은 모두 유료로 1년정도의 사용기간이 만료되기 전 연장을 통해서 웹사이트를 유지해야하는데, 홈피를 처음 만들어보는 분들은 무료 호스.. [영상강좌목록] 디지털웹디자인 콘텐츠제작실무 웹사이트 / 앱 기획부분에서 UI/UX 유튜브강좌를 찾는 분들을 위해 전체강좌를 유튜브채널을 소개합니다. 전체강좌 는 아래 강좌 목록 이미지를 클릭하면 바로 볼 수 있습니다. 디지털웹디자인(웹퍼블리셔) & SNS마케팅을 위한 콘텐츠제작 실무 2021년도 부터 NCS(국가직무능력표준)의 스마트문화앱 교육커리큘럼에 맞게 UI /UX 설계와 디자인 관련된 강좌로 2022년 현재까지 진행하는 강좌내용입니다. 아래 2022년 3월 진행하고 있는 UX UI / 프로토타입 / 디자인 구성요소 설계 / 스마트문화앱 / 그누보드3 까지 전체목록보기를 누르고 새로 시작된 강좌를 순서별로 볼 수 있습니다. 2022-0302 시작 프로젝트 ▶ 전체목록보기 그누보드5 게시판 실무활용 웹디자이너-웹퍼블리셔-웹프로그래머로 이어지는.. 웹기초2- HTML, CSS를 활용한 프로토타입 (Onepage) 프로토타입 샘플모델 원페이지형식으로 위키백과와 유사한 단원아트 원페이지 스타일 홈피작업입니다. 기초적이지만 위키백과 스타일이란 주제를 원페이지형식으로 정하고 생소한 태그와 디자인 스타일이 나오지만, 앞부분 기초를 기반으로 하니 앞부분의 내용을 미리 볼 수 있는 기회겠죠. https://www.youtube.com/watch?v=Eiiysvcw7iQ&t=7s 아래는 위 영상소개부분의 웹소스입니다. 배경에 대한 모든표현 매니저는 중복한 배경처리시 아래와 같은 함축된 CSS를 이용한다. 귀찮게 많을 것을 넣을 필요가 없을 때 아래 스타일을 추천한다. body{margin:90px; background:#ffeace url('imgs/bg_kart.jpg') no-repeat right bottom; /* 배경.. 웹기초-01. 일반적인 웹문서와 스타일 기초 웹디자인 이후에 이어지는 웹 퍼블리싱(공개란 뜻) 작업은 HTML과 CSS외에 자바스크립트 등 다양한 기능들이 붙여지면서 비로소 웹문서로 구현할 수 있습니다. 웹 퍼블리싱이 구현되야 인터렉티브한 페이지 구동을 하는 웹프로그램이 이어지게 되는 것입니다. 이번시간 부터는 HTML과 CSS 기초에서 일반적인 웹문서와 웹문서의 스타일 규정까지 전반적인 문서구조를 소개하는 첫시간을 갖겠습니다. 아래 영상강좌로 보여진 샘플파일을 압축파일로 준비했으니 함께 보시면 좋겠습니다. E01. 웹문서의 HTML 일반적인 구성 E02. 웹문서의 HTML 일반적인 구성 하이퍼링크의 종류는 다음과같다. 글,그림 URL위치에 아래내용구분 웹사이트(외부 네이버) target="new" 웹문서(자체페이지간 이동) ★★★원페이지의 원리(.. HTML+CSS 고급 - 레이아웃 포지션과 시안 브라우저 테스트 URL 링크를 지원하는 앵커태그외 onclick 이벤트 활용한 링크표현 자체창 바뀌는 링크(일명 셀프. 기본값) onclick="location.href='URL'" 새창뜨는 링크(새창,새탭) onclick="window.open('URL')" 팝업새창뜨는 링크(별도 지정한 크기의 창) onclick="window.open('URL','window_name','width=430,height=500,location=no,status=no,scrollbars=yes');" 디자인시안 브라우저 테스트 위 이미지는 메인디자인 시안 초기 작업모델이다. 아래는 브라우저롤 볼 수 잇는 웹문서가 포함되어 있다. PC버전 메인디자인 시안작업 원본PSD파일을 아래와 같다. 시안제작에 활용할 벤치마킹 모델 웹사이트 - 포스.. HTML+CSS 고급 - 레이아웃 좌/우배치 플롯과 한글 로렘입숨 플롯은 이미지 및 디비전 태그등 박스모델의 좌/우 배치를 위한 꼭 필요한 스타일 규정을 말한다. 플롯은 박스모델들을 수평으로 배분하기 위해 사용한다. 신문기사와 같은 문단과 어울어진 플롯처리 플롯은 머릿글, 이미지, 문단 등 텍스트들과의 좌우 배치기능을 함축적으로 소개한 CSS표현이 들어간 샘플입니다. float_02파일을 다운받아 에디터에서 보세요. 내비게이션에 적용하는 플롯처리 특정한 페이지로 연결되는 앵커태그등을 내비게이션이라 합니다. 아래는 플롯의 좌우 배치기능을 함축적으로 소개한 CSS표현이 들어간 샘플입니다. float_02파일을 다운받아 에디터에서 보세요. 디자인 작업을 하다보면 문단에 대체할만한 입숨이 대부분 영어로 아래와 같이 뜨는 경우가 있다. Lorem ipsum dolor sit a.. HTML+CSS 고급 - 그래픽요소 표현(배경이미지, 그림자효과) 배경 색상과 이미지의 표현을 알아봅니다. 배경색은 background 혹은 길게 background-color로 스타일이 있고 속성값으로는 16진수로 #000000 표기하거나, 목적에 따라서 투명도를 고려해서는 rgba(0,0,0,1.0)과 같이 Opacity를 적용할 내용을 추가해서 표기하기도 합니다. 컬러픽커 | 그라디언트 | 텍스트 그림자 | 박스모델 그림자 | 필터(흑백/블러) head와 body에 삽입하는 코딩소스이다. CSS Backgrounds (w3schools.com) CSS Backgrounds W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Cove.. HTML+CSS 고급 - 웹문서의 Style표현 CSS-스타일시트란? CSS란 Cascading Style Sheets(계단식 스타일 시트)의 약어로 HTML로 작성된 웹문서의 디자인과 표시 방법을 기술하기 위한 스타일 시트 언어를 말한다. 본문에 해당되는 Body부터 내부의 서식의 스타일을 규정하는 표현식을 스타일시트라고 한다. 보통은 해당된 태그에 입력하는 인라인방식과 head문에 스타일을 묶어서 표현하는 방식, 다수의 문서간 공유할 수 있는 별도 CSS파일을 연동해서 보여주는 방식이 있다. 요즘 트랜드인 이미지를 슬라이드 방식으로 만드는 카드뉴스도 대부분 CSS와 자바스크립트로 만들어진 결과물이다. CSS Tutorial (w3schools.com) CSS Tutorial CSS Tutorial CSS is the language we use t.. CSS3 background 색상과 이미지의 배경처리(포터블-컬러픽커와 다크네이머) CSS3에는 배경을 처리하는 종합된 background와 가 있다. 이들을 이용해서 색상과 이미지의 배경처리하는 방법들을 소개한다. https://www.w3schools.com/css/css_background.asp CSS Backgrounds CSS Backgrounds The CSS background properties are used to add background effects for elements. In these chapters, you will learn about the following CSS background properties: background-color background-image background-repeat background-attachment backgr ww.. HTML+CSS 중급 - 하이퍼링크 기본과 이미지맵 쉽게 코딩하기 텍스트보도더 설득력 있는 시각적인 이미지가 삽입을 통해 전달력있는 웹문서를 만들 수 있습니다. 이미지 태그는 상대경로의 현재 웹문서와 연관된 폴더(디렉토리)를 통해 보여지거나, 프로토콜까지 포함된 외부 이미지의 파일경로를 포함함 절대경로로 연결된 이미지를 표현하는 것을 기본으로 합니다. https://youtu.be/QzI6FUC5UgQ?t=1326 세상을 연결하는 앵커태그 글,이미지,박스모델에 페이지 연결기능을 목적으로하는 하이퍼링크는 일명 앵커태그(anchor)라고 한다. 페이지 연결 외에도 현재 문서내 상하이동 기능(위키백과같은 원페이지), 다운로드기능, 전자우편-전화-문자(스마트폰),회원가입등 프로그램기능 수행한다. Visit W3Schools.com! 전화 및 문자와 메일보내기에도 적용된다. 전.. HTML+CSS 중급 - 표(table) 태그와 스타일 표는 과거 웹표준이전인 html4에서 레이아웃의 방법으로 표현하던 예인데, 기본이 테두리가 없어서 T자형 구조에 원하는 대상을 배치할때 주로 사용하였습니다. 현재 html5에서는 레이아웃이 아닌 '일정표'등 일반적인 표사용에 대해서 소개하겠습니다. HTML Tables를 종합해서 배울 수 있는 w3schools.com 표는 table tr td 3개를 기본으로하여,줄(가로 행,row), 칸(세로 열,column)으로 구분된다. 필요시 td대신에 맨위에 머릿글표현을 위해서 th를 사용하기도 한다. th는 상단외에 좌측에도 표현가능하다. HTML Tables HTML Tables HTML tables allow web developers to arrange data into rows and columns. .. W3C vs Fontawesome 특수기호와 폰트어썸 https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 윈도우즈에서 특수문자 입력이 아닌 찾아보기 http://oknok70.woobi.co.kr/special/ 특수문자·심볼 리스트 oknok70.woobi.co.kr HTML+CSS 기초 - 글씨관련 태그들 Chapter 01. 웹브라우저와 편집기, 기본코딩 실제 스마트문화앱(모바일 웹 앱)을 제작하기 위한 기초 첫시간으로 웹분야1위 도서로 알려진 " HTML5+CSS3 웹표준의 정석" 을 줌을 통한 쌍방향 학습의 부교재로 선정하여 쌍방향학습하는 내용을 공개합니다. 코딩을 처음하는 분들에게 추천하며 교재를 참고하되, 교재없이 독학도 영상을 참고하면 가능합니다. Chapter 02. HTML기초와 Head문에 삽입되는 것들 HTML문서는 본문에 대부분 보여지는 내용을 Body태그내에 구성한다. HTML을 처음 배우는 분들은 Head문에는 title이 웹문서를 브라우저로 보는 타이틀만 보여지는 것으로 알 수 있는데, Head문에도 상당히 두뇌같은 복잡한 태그들이 들어가서 궁금해 하는 분들을 위해 정리해본다. 저.. 반응형웹 플러그인 - 부트스트랩과 제이쿼리 PC와 스마트폰 등 다양한 화면크기에서 쉽게 반응하는 웹사이트를 만들어 주는 기술인 반응형웹은 하이브리드앱을 구현할 수 있는 가장 쉬운 표현방법이다. UI디자인에서 세부 레이아웃 및 그래픽 요소들을 다양한 자바스크립트와 CSS스타일로 구현하는 부트스트랩과 제이쿼리를 소개하는 시간을 가져본다. Bootstrap(부트스트랩)은 자체 구성된 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하면서, 반응형 모바일 웹 사이트를 개발하기위한 가장 인기있는 HTML, CSS 자바 스크립트 프레임 워크인 부트 스트랩입니다. 부트스트랩은 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 현재 최신 버전은 5이지만, 버전 4가 일반적으로 많이 사용되고 있다. Bo.. 웹사이트 제작 4편 - 오픈그래프으로 사이트 알리기 그누보드5 추가한 반응형웹 테마적용시 직접 모바일환경에서 스마트폰으로 테스트를 해야 한다. 만약 기본 그누보드5의 모바일웹으로 뜨는 경우 추가된 반응형웹 테마에서는 기본 기능인 PC와 모바일 2개환경에 맞게 설정된 config.php파일을 리모트사이트(서버)에서 다운받아서(설치시 DB정보등이 기록되있어서 꼭!!!!!! 다운받아서 해야함) 136번 줄의 아래 내용처럼 수정 후 업로드 하면 해결된다. define('G5_USE_MOBILE', false); // 모바일 홈페이지를 사용하지 않을 경우 false 로 설정, 그누보드는 PC와 모바일 공통사용을 기본으로 해서 반응형의 경우는 true를 false로 설정해야 반응형이 바로 동작한다. 웹사이트를 오픈그래프(Open Graph)으로 카카오톡 등 SNS를.. 웹사이트 제작 3편 - 네비 및 내용구성 메뉴를 구성하고 내용을 표현하는 부분들을 구현해봅니다. 테마는 에티 비지느스 무료테마 에서 받은 것을 기반으로 페이지를 구성하겠습니다. https://sir.kr/g5_theme/6648 에티 비즈니스 무료테마 v1.5 > SIR 안녕하세요~ 에티테마 입니다. 지난번에 v1.2 를 배포했었는데 너무 시간이 많이 가서 이제야 업로드합니다. 최대한 빨리 올려드린다고 말씀드린 sir.kr 에디테마 배포파일에는 theme외에 page라는 디렉토리(폴더)를 제공하는데에는 내용들을 수록할 수 있다. 루트인 /html 내에 /pages 폴더 업로드합니다. 링크주소를 기입하는 URL 주소에 대해 우선 절대주소와 상대주소를 알고 가야한다. 절대주소(경로) : 브라우저로 프로토콜을 포함한 URL을 말한다. http://k.. 웹사이트 제작 2편 - 테마변경 설치된 그누보드5의 테마(Theme)는 웹사이트의 레이아웃과 디자인을 담은 템플릿이다. 그누보드5의 테마 공유 게시판에 가보면 다양한 테마들이 있는데... 설치한 버전에 맞는 반응형웹 테마를 통해서 레이아웃과 디자인이 응축되어 포함된 jQuery, Bootstrap등의 외부 플러그인이 연결된 종합된 팩키지로 외관과 기능을 기본 테마를 새로운 테마로 변경해서 전혀 다른 사이트로 변화를 줘보자. 테마(Theme) 추가하기 소개하는 내용을 위 유튜브 채널에 영상으로 강좌를 올렸으니 참고하고 따라한다. 아래 그누보드 공식사이트의 배너나 URL 링크로 들어가서 테마라는 메뉴를 클릭해서 "반응형웹"테마를 받아서 설치해보자! https://sir.kr/g5_theme 그누보드5 테마 > SIR 그누보드, 영카트 개발.. DIV(디비전)태그 총정리 / 슬라이드 외부소스 HTML 구성은 HTML 구조내 네모난 박스형태의 Body(본문)내에 특정한 정보를 소개하기 위한 제목, 단락, 목록 등과 같은 텍스트들과 이미지, 혹은 영상들을 가져와서 본문을 꾸미고, 필요한경우 URL 링크등을 통해 유기적인 구조적 문서를 만들 수 있는 방법을 제공한다. Head에는 CSS, 자바스크립트 등을 포함하거나 Link를 통해 불러 올 수 있는데, 기본이자 전체 구조를 표현하는 DIV(디비전)과 관련 내부 구성요소들의 태그를 총정리해보겠습니다. p 태그에 아래 Lorem ipsum~을 복사해서 사용하세요. Img는 Pixabay의 이미지들을 활용했습니다. > Pixabay Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam .. On Event 전체메뉴(사이트맵) 보기 자바스크립트의 On Event는 크게 onclick, onmouseover, onmouseout 등이 적용된다. onclick onmouseover onmouseout onload 마우스클릭외 마우스를 올리거나, 범위내를 벗어나는 상황에 맞는 전체메뉴 열기원리를 소개한다. CSS 스타일 규정 #navbox{background:#00f;color:#fff;height:90px;} #navbox .logo{margin:0;float:left;padding:0 100px;} #navbox .fLT{float:right;margin-top:30px;} .btn{cursor:pointer;} #subnav{position:relative;left:0;bottom:-90px;height:400px;backgroun.. div 태그 레이아웃 div 태그 레이아웃을 결정짓는 Box model 세로로 펼쳐지는 글씨와 이미지 요소들을 분리된 박스영역내에 표현하는 레이아웃의 기본요소이다. DIV가 레이아웃으로 역할을 할때 주로 사용하는 CSS에는 바깥여백 margin / 안쪽여백 padding / 선 border / 배경 backgrond / 좌우 배치 float / 새로운 시작 clear:both / 보여주는 방식 display: none block inline inline-block 외 다양한 스타일 속성이 존재한다. 디비전 태그 | 디스플레이 속성 | 플롯의 속성 | 플롯의 사용예시 | 클리어 속성 아래 원본파일을 참고하세요.(이미지는 포함되지 않았습니다.) Splash(Intro) 페이지에 사용할 수 있는 Positon 속성1편-절대위치 P.. Web 05. 이미지 스타일(Background:color,url('url') 로고 SVG파일 불러오기 www.w3schools.com/cssref/css3_pr_background.asp CSS background property CSS background Property Example Set different background properties in one declaration: body { background: lightblue url("img_tree.gif") no-repeat fixed center; } Try it Yourself » Definition and Usage The background property is a shorthand property f www.w3schools.com 색상정보를 쉽게 알수 있는 Color Picker www.w3schools... Web 04. Layout을 위한 디비전태그<div> 일반적으로 여러분이 사용하는 글,그림 등의 요소들은 무조건적으로 아래로 내용이 펼쳐집니다. 어떤대상은 테두리(border)를 CSS 스타일로 제작하는 방법을 소개합니다. 그외 수평선, 제목1dls , 이미지에도 Border-radius를 적용하는 전체적인 방법을 동영상과 함께 아래 소스를 공유합니다. About me(Profile) Portfolio Contact HOME 이전 1 2 다음
