📅2024. 01. 19 30일차

---

📒kakaopay securities 페이지 만들기

• 5차시도 2차메뉴 배경의 높이 조절 (3차 + 4차)

• 6차시도 모바일 탑바 레이아웃

• 7차시도 토글 버튼 완성

Cubic Bezier

• https://cubic-bezier.com/

📝JSP (JavaServer Pages)

• HTML 코드에 JAVA 코드를 넣어 동적웹페이지를 생성하는 웹어플리케이션 도구이다.
• JSP 가 실행되면 자바 서블릿(Servlet) 으로 변환되며 웹 어플리케이션 서버에서 동작되면서 필요한 기능을 수행하고그렇게 생성된 데이터를 웹페이지와 함께 클라이언트로 응답한다.

웹(web)

• 웹이란 인터넷 기반의 정보기술로 World Wide Web 의 줄임말로 쓰이며 WWW 라고도 한다.전세계에 거대한 네트워크 망을 통해 정보를 공유하며 정보의 흐름은 양방향성을 가진다.

웹어플리케이션(Web Application)

• 웹어플리케이션은 웹에서 실행되는 응용프로그램을 뜻하며 인터넷을 통한 은행업무, 인터넷쇼핑, 등등 인터넷에서 하는 여러 서비스를 총칭하며 사용자가 필요한 요청(Request) 를 하고 서버에서는 이에 해당하는 요청을 수행하고 그리고 요청한 데이터를 응답(Response) 한다.

자바 서블릿(Java Servlet)

• 서블릿이란 웹페이지를 동적으로 생성하기 위해 서버측 프로그램을 말한다. 이는 자바 언어를 기반으로 만들지며 웹 어플리케이션 서버 ( Web Application Sever ) 위에서 컴파일 되고 동작한다.

STS4에서 JSP 에러 나면 꼭 먼저 해야 할 것!!!

실행 중지
톰캣 서버 삭제
create new server
아파치에서 아파치 10.1 선택
add all 하고 finish
tomcat server 8080을 8081로 바꾸기
다시 실행 톰캣 선택 후 next -> finish

sprite img

• 스프라이트 이미지 잘라서 쓰기

.mail {
  border: 2px solid red;
  width: 100px; /*44px*/
  height: 44px;
  background-image: url(https://pm.pstatic.net/resources/asset/sp_main.2b26eb67.png);
  background-position: -250px -90px;
  background-size: 434px 416px;
}

youtube iframe

• 동영상 넣기

• 음소거 바로 재생 가능

pop-up

• 특정 홈페이지 들어가면 나오는 팝업창을 의미한다.
• 팝업창이 떻을 때는 팝업 이외에 아무것도 안눌린다.
• close 버튼까지~~

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="pop_up">POP UP!</div>

<div class="layer">
  <div class="title">title</div>
  <div class="body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ut pariatur commodi eligendi, nostrum numquam. Architecto, repellat molestias at ducimus expedita quisquam. Quos expedita possimus nam odio ab sint cupiditate? </div>
  <button class="close_btn">close</button>
</div>

<div class="layer_bg"></div>

CSS

body,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}

.pop_up {
  display: inline-block;
  font-size: 4rem;
  background-color: #afafaf;
}

.layer {
  display: none;
  width: 500px;
  height: 500px;
  background-color: pink;
  border: 5px solid red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translatex(-50%) translatey(-50%);
  z-index: 100;
}

.title {
  padding: 20px;
  font-size: 2rem;
}

.body {
  padding: 20px;
  font-size: 1.4rem;
}

.close_btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-size: 2rem;
}

.layer_bg {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
}

JS

console.clear();

$(".pop_up").click(function () {
  $(".layer").show();
  $(".layer_bg").show();
  // $('.layer').css('display','block');
});

$(".close_btn").click(function () {
  // $(".layer").hide();
  $(".layer").css("display", "none");
  $(".layer_bg").hide();
});