이때, 디자이너가 설계한 이미지와 구성을 개발자가 이해할 수 있는 형태의 문서로 개발자에게 전달해야 한다
2. UI 디자인 가이드의 개요
(1) 정의
UI 디자인 가이드란, 디자이너가 프로젝트 및 서비스에 맞추어 확정한 디자인 내용을
개발자에게 이관하기 위하여 컬러, 폰트, 이미지, 좌표, 크기 등의 디자인 리소스를 문
서화하여 제공하는 문서이다.
(2) 구성 요소
UI 디자인 가이드(이하, 문서 또는 가이드 문서)는 일관성 있는 화면 디자인을 위하여
목표 시스템의 공통 규칙, 폰트, 컬러 등의 리소스 요소와, 서비스 목적에 따른 여러
유형의 레이아웃(예: 단순 정보 전달, 검색 레이아웃) 등을 사전에 설계해 둠으로써 반
복적으로 활용 가능한 내용들로 구성된다.
(가) 일반사항
문서명, 담당자(부서, 이름) 등 가이드 문서의 일반 사항을 작성함으로써 가이드 문
1) 화면 설정
구현 환경(PC, 모바일, 태블릿)에 따른 해상도, 지원하는 브라우저 버전, 화면
정렬, 스크롤 바, 프레임 사용 여부 등 기본적인 화면 설정 내용을 전달한다.
내비게 이션
페이지상에서 원하는 기능을 선택할 수 있도록 제공하는 기능
테이블
전달하고자 하는 데이터를 표 형태로 구성하기 위하여 속성(border, color, height, colspan 등) 조절을 통해 다양한 형태 구현
툴팁
페이지의 특정 요소에 마우스 오버 시 간단한 정보를 제공하는 말 풍선
탭
페이지의 구성을 유의미한 분류로 나누어 스크린 공간을 사용할 수 있도록 해 주는 기능
아이콘
페이지의 핵심 요소로서 시각적인 효과를 전달하며, 사용자의 집중 도를 유도하는 기능
4）레이아웃
레이아웃의 전체적인 구조는 header, container, footer로 구성되며, 콘텐츠의 구
성은 필요에 따라 고정/가변 형태로 나누어 구성되고, 사용자에게 서비스가 직
관적으로 가시화될 수 있도록 페이지 구성 후 콘텐츠를 제공한다.
이름지을때.. 20p
------------------
~26 패스?
웹표준 웹접근성 웹호환성!!
42p 사용자 접근 용이성!!
alt 속성 적용 여부(그림)
시각장애인.. alt 설명?으로 읽어주기 때문에 설명을 잘 써놓자!
브라우저의 모든 버전에서 접근성 여부!!
///////////////카카오 오븐
https://ovenapp.io/
///톰캣
http://tomcat.apache.org/
tomcat9 Download
Core : zip(pgp,sha512)
zip파일 잡고 C드라이브 밑에 던지기
이클립스 실행
New -> other -> Web -> Dynamic Web Project -> 생성
src -> main -> webapp -> New -> Html file
프로젝트파일 우클릭 -> run -> run on server -> apache -> 9.0 -> 폴더선택 아까 저장한 C 밑
무조건 index 먼저 실행!
localhost = 127.0.0.1
DNS Domain. N. Server
cmd -> ping www.naver.com
--------------HTML
구분선 : <hr>
줄바꿈 : <br>
단락 : <p></p> (위아래 공백)
헤드라인 : <h1></h1> (한 줄 차지)
볼드 : <b></b> (블럭요소)
화면과 같이 출력 : <pre></pre>
글자 변경 :
글자 <font size="5">크기</font>를 변경해보겠습니다.<br>
글자 <font size="12pt">크기</font>를 변경해보겠습니다.<br>
글자 <font size=10pt>크기</font>를 변경해보겠습니다.<br>
글자 <font color=green>색</font>을 변경해보겠습니다.<br>
글자 <font color="#c0c0c0">색</font>을 변경해보겠습니다.<br>
글자 <font face="궁서체">모양</font>을 변경해보겠습니다.<br>
스페이스바 :
<꺽쇠> : < >
앤드(&) : &
"따옴표" : "
못외울땐 & + ctrl + space
링크 : <a href="경로">보여줄 글</a>
이미지 : <img src="princess_icon.png" alt="공주" height="100px" width="100px" align="middle">
align은 left right top middle 등등 가능
///유용한사이트
https://www.iconfinder.com/
아이콘 프리
*.jpg
*.png
*.gif 손실압축
*.bmp 비손실압축
*.svg 그림파일 html로??
표 만들기
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
//////////////////////////////////
<table border="1" style="width: 150px; height: 150px; border-collapse: collapse;">
<tr style="background-color: yellow;">
<td>1</td>
<td>2</td>
<td style="text-align: right; vertical-align: bottom;">3</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td colspan="2">5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
//////////////////////////////////////////////
<table border="1" style="width: 150px; height: 150px; border-collapse: collapse;">
<tr style="background-color: yellow;">
<td colspan="2">1</td>
<td rowspan="2" style="text-align: right; vertical-align: bottom;">3</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">8</td>
</tr>
</table>
////같은 폴더 내 다른 파일로?
<a href="./list.jsp">게시판으로 </a>
