11.17 ~ 11.19 수업내용이다.
응용SW기초기술활용을 끝내고 화면설계 파트를 공부했다.
* UI 요구사항 확인하기
- UI 흐름 : 메뉴(링크) 구조도 ( 필요한 정보를 찾기 쉽게)
작업순서 )
- 와이어프레임
* 와이어프레임
: 구조(페이지 요소의 구성 방식), 콘텐츠(페이지에 표시될 내용) 및 기능(인터페이스의 작동 방식)을 설명하는 데 사용
- 포토샵 작업
- HTML(CSS+Javascript) 퍼블리싱/안드로이드 액티비티 만들기
- 스프링(자바) 프로그램 입히기
* 실제 현업에서는 사용자 화면보다 관리자 화면부터 작업한다.
- 관리자화면(CRUD, 회원관리, 게시판관리) -> 사용자화면(CRUD, 게시판관리, 로그인관리)
<실습>
- 카카오 오븐에서 화면레이아웃 설계하기
- html 실습
- html 실습을 하기 전에, 카카오 오븐으로 화면레이아웃을 만들어보았다.
OvenApp.io
Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공)
ovenapp.io
- PC용, 태블릿용, 모바일용 중에 내가 선택한 것은 모바일용이었다.
- 먼저 장표를 작성한다. 꼭 들어가야하는 구성은 다음과 같다.
- 화면이름, 화면ID, 화면경로(링크경로), 관련계정, 메뉴바출력여부, 비고(이미지출처여부 등)
- 모바일용에 맞게 아이콘은 크게하고 심플하게 만들었다.
- 위에서 설계한 화면 레이아웃 중 메인페이지를 HTML로 구현한다.
- 먼저 이클립스에 생성한 프로젝트의 webapp폴더 내에 resources/sample 폴더를 만든다.
* resources 폴더 : 디자인에서 사용하는 리소스
(src/main/resources 폴더 : 자바 프로그램 리소스)
- sample 폴더 내에 index.html 파일을 생성한다. html templates는 html5 선택.
* index.html : 홈페이지 진입점(자동실행되는 부분)
(main() 메소드 : 자바프로그램 진입점)
- 생성 시 첫 화면은 아래와 같다.
<!DOCTYPE html> : 현재 문서의 형태 선언
<html></html>: html 문서는 태그 열고 ~ 태그 닫고
<head></head> : 문서 내용과는 관계 없는 문서 정보가 들어있다. 메타데이터 존재.
<meta charset="UTF-8"> : 문서의 언어 인코딩 설정, 지금은 유니코드.
<title></title> : 문서의 제목을 브라우저 상단 왼쪽에 표시
<body></body> : 문서 내용이 들어가는 영역
- 이제 여기에 다른 필요한 태그들을 추가한다.
- 우리가 필요한 것은, 로고, 햄버거메뉴아이콘, 햄버거 메뉴 눌렀을 때 나오는 메뉴들, 슬라이드이미지
- 해야할 것들을 적절한 위치에 배치한다.
- 로고, 햄버거메뉴아이콘, 메뉴들 : header
- 슬라이드이미지 : section
- body 안에 모든 내용을 div태그로 래핑시킨다. 아이디를 wrap으로 설정한다.
* id : 전체 중 같은 이름 사용 불가능, 한 개만 존재
* class : 전체 중 같은 이름 사용 가능
- 로고와 햄버거메뉴아이콘을 먼저 디자인한다.
- LOGO는 글자를 h1태그를 이용해서 헤드라인 글자로 설정한다.
- 햄버거 메뉴 아이콘은 span태그를 이용해서 만든다.
* span 태그 : 자리를 차지하지 않는 영역, 한뼘
- 여기까지 했을 때, 실행하면 위와 같은 결과가 나온다.
- 우리가 해야할 것은 햄버거메뉴아이콘 만들기, 글자 세로 정렬
- 먼저 햄버거메뉴아이콘 만들기
- 스타일태그 영역에 지정을 한다.
- display:block;
- height:10px;
- width:50px;
- background-color:red;
- margin-bottom:5px;
- 아랫부분에 준 margin 5px이 적용되어 5px씩의 간격을 가진 50x10크기의 빨간 햄버거메뉴아이콘이 만들어졌다.
- 다음은 글자 세로 정렬
- 메뉴들은 ul 태그와 li 태그를 이용해서 정렬한다.
* ul : Unordered List, li : list
(ol : Ordered List, 1.~ 2.~ 3.~)
- 본문 슬라이드이미지1에 실제 이미지를 넣을 것이다.
- 이미지를 넣을 때는 img태그를 이용하고, src에는 이미지가 실제로 위치하고 있는 경로를 적어준다. alt는 이미지가 뜨지 않을 때 나타날 코멘트를 적어준다.
- 절대경로 : /(루트)로 시작
- 상대경로 : ./img/mornitor.jpg 이런 식으로 현재 위치한 폴더를 기준으로 적어준다.
- 지금 이 이미지는 브라우저창 화면의 크기와 상관없이 크기가 고정되어 있는데, 브라우저 창 크기에 맞게 달라지도록 만든다.
- 본문 슬라이드 영역을 div 태그로 영역을 나누어주고, 클래스명을 지정해준다.
- 위 스타일 태그에 img에 대한 스타일지정을 한다.
- 저장 후 실행하면, 아래와 같이 브라우저 창 크기에 맞게 이미지의 크기가 줄어든다.
- 지금까지 필요한 입숨데이터는 다 작성하였다.
- 이제 영역을 지정해준다.
- 영역을 지정하고, 스타일지지정도 클래스(혹은 id)명을 추가해준다.
- 영역별로 스타일을 지정하기 전에, reset.css 파일을 불러온다.
* reset.css : 크로스 브라우징 사전처리 역할
<link rel="stylesheet" href="/resources/sample/css/reset.css" type="text/css">
- 실행하면, 아래와 같다.
- 이제 영역별로 스타일을 지정한다.
- header 영역
* relative : 공간을 한정하는 포지션 값.
- relative 포지션 값을 가지고 있는 어떤 요소 이후에 나오는 모든 자식요소들은 relative가 정의된 요소 영역/공간을 벗어날 수 없다. (fixed 제외)
- .header : 헤더영역 크기 지정
- .header .logo : 헤더 영역 중 로고영역 왼쪽으로 지정
* float : 떠다니는 영역, 역할 : 세로배치->가로배치 변경
-. header .menu-toggle-btn : 헤더 영역 중 햄버거버튼 영역 오른쪽으로 지정
- 저장 후 실행하면 아래와 같이 나온다.
- header 영역 세부 디자인
- 햄버거메뉴아이콘을 누르면 나오는 메뉴들(gnb)의 스타일을 지정한다.
- position:absoulte; header의 relative 위치안에서 움직임
- top:80px; left:0px; 위에서 80px, 왼쪽에서 0px 떨어진 위치
- width:100%; 브라우저 창 너비랑 같게
- background: 배경색
- z-index:21; 겹쳤을때 위치, 숫자 클수록 사용자와 가까움
- border-bottom(top): 1px(두께) solid(선종류) rgb(색)
- first-child: 가상선택자
- header영역에 height를 줘서 사진이 보이지 않도록 한다.
- menu-toggle-btn 영역에 margin-top을 15px로 줄여 중앙으로 오도록 한다.
- gnb의 스타일 세부지정
- padding값을 이용해 한 줄 당 차지하는 크기를 키운다.
- font-size를 키우고, 색을 지정한다.
- 이제 햄버거메뉴버튼의 토글 기능을 구현한다.
- jQuery로 구현할 것이다.
- jQuery를 사용하기 전, 외부 자바스크립트를 불러온다.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>- jQuery의 기본 형식
$(document).ready(function(){
// $제이쿼리 시작한다는 의미(index.html).ready(자동콜백함수실행)
$(".menu-toggle-btn").click(function(){
$(".gnb").stop().slideToggle("fast");
});
});- 토글 기능 구현
- 햄버거메뉴아이콘을 누를때만 나와야하기 때문에 display:none; 으로 변경
- 로고에 사진 넣기
.header .logo .a {
display:block;
height:80px;
background:url(/resources/sample/css/logo.png) no-repeat;
background-size:90%;
background-position: 0px center;
}
