아래와 같이 클릭하면 원하는 시점으로 이동하도록 설정해보자
웹프로젝트를 설계한다는 것
요구사항 정의서란?
기능적/비기능적 요구사항
웹프로젝트를 설계한다는 것
웹 프로젝트를 기획(설계)한다는 것 웹 프로젝트를 설계한다는 것은 그 프로젝트를 구상하고 구체화하는 과정을 말한다. 이를 통해 프로젝트의 목적과 범위를 명확히하고, 사용자 요구를 이해하며, 그에 맞는 기능과 시스템 구조를 설계한다. 요구사항 정의서, 플로우차트, DB 차트, UI/UX 디자인등을 작성하는 것이 설계의 결과물로 올 수 있다. 장점 ) 1. 문서와 다이어그램을 통해 프로젝트를 시각적으로 보여줌으로서 팀원들 간에 의사소통을 돕고, 개발을 위한 청사진이 될수 있는 자료를 제공 2. 프로젝트 초기에 발생할 수 있는 혼란이나 수정 사항을 줄이고, 개발 및 구현 단계에서 일관성 유지에 도움을 줌
요구사항 정의서란?
프로젝트에 구현해야하는 기능적이고 비기능적인 요구사항을 설명하는 문서 시스템이나 소프트웨어가 해야 하는 일, 이용자의 요구사항, 데이터 처리, 보안, 성능 등이 포함됨 전반적인 프로젝트 목표와 범위를 명확히 하고, 이를 충족하기 위한 요구사항을 명세화함
기능적/비기능적 요구사항
기능적 요구사항 시스템이나 소프트웨어가 수행해야하는 작업. 즉 기능 사용자가 할 수있는 특정 작업(로그인, 데이터 입력, 검색, 주문 등) 비기능적 요구사항 시스템이 수행하는 작업의 방식, 픔질, 제약 사항 등을 정의 시스템이 어떻게 그 일을 수행해야하는지 설명 사용자 경험, 시스템의 안정성, 데이터 보안과 같은 주제가 포함됨
scrollIntoView()
원하는 시점으로 이동하도록 동작하는 javacript 이벤트
위의 예시에서, 다음과 같이 사용하였다.
<!DOCTYPE html>
<html>
<head>
<title>클릭해서 본문으로 이동</title>
</head>
<body>
<div>
<style>
/* CSS로 커서를 포인터로 변경. */
.title {
cursor: pointer;
}
</style>
<div class = "title">
<p onclick="제목1_가기()" data-ke-size="size16">웹프로젝트를 설계한다는 것</p>
<p onclick="제목1_가기()" data-ke-size="size16">요구사항 정의서란?</p>
<p onclick="제목1_가기()" data-ke-size="size16">기능적/비기능적 요구사항</p>
</div>
</div>
<div> </div>
<div>
<h1 id="제목1">웹프로젝트를 설계한다는 것</h1>
<p>본문내용</p>
<h1 id="제목2">요구사항 정의서란?</h1>
<p>본문내용</p>
<h1 id="제목3">기능적/비기능적 요구사항</h1>
<p본문내용</p>
</div>
<script>
function 제목1_가기() {
var h1요소 = document.getElementById("제목1");
h1요소.scrollIntoView({ behavior: "smooth" });
}
function 제목2_가기() {
var h1요소 = document.getElementById("제목2");
h1요소.scrollIntoView({ behavior: "smooth" });
}
function 제목3_가기() {
var h1요소 = document.getElementById("제목3");
h1요소.scrollIntoView({ behavior: "smooth" });
}
</script>
</body>
</html>
1. scrollImtoView() 는 옵션없이 바로 사용할 수도 있다.
2. true/false 속성
ex) document.getElementById("제목1").scrollIntoView(true) : "제목1" 상단을 기준으로 스크롤 이동
document.getElementById("제목1").scrollIntoView(false) : "제목1"의 하단을 기준으로 스크롤 이동
3. options - auto, smooth
위에서 사용한 옵션은 smooth 옵션이다.
auto 옵션을 사용하면 화면이 스르륵 이동하는게 아니라 뚝! 이동한다
function 제목3_가기() {
var h1요소 = document.getElementById("제목3");
h1요소.scrollIntoView({ behavior: "smooth" });
}
'jQuery && JS' 카테고리의 다른 글
| jQuery | 페이징 처리 (javaScript) (0) | 2023.05.19 |
|---|---|
| jQuery | 선택자 '>' (0) | 2023.05.19 |
| jQuery | closet() 함수 (0) | 2023.05.18 |
| jQuery | 출생년도에 따라 배경색 변경 (0) | 2023.05.18 |
| jQuery | 윤년 구하기(JavaScript) (0) | 2023.05.16 |
