BE/WebProgramming (25) 썸네일형 리스트형 [WebProgramming] 노마드코더 JavaScript [2] -Arrays :하나의 variable 안에 데이터의 list를 갖는 것 배열 안에는 숫자나, 문자열 다 가능하다. 배열 생성시 지켜야 할 규칙 1. 시작과 끝에 대괄호[]를 사용하기 2. 배열 안 각각의 항목은 쉼표로 분리하기 const daysOfWeek=["mon","tue","wed","thu","fri","sat","sun",]; console.log(daysOfWeek[1]); => 값은두번째 값인 tue 출력 배열 안의 값을 출력하고 싶을때는 숫자를 적어주면 되는데 첫번째 값이 배열에서 0번째인 것만 알면 된다. -Objects 객체 내의 요소를 모두 let으로 표기한 것 ++object요소의 추가와 삭제 추가 (object.추가하는 특성 = 특성값 ;) 삭제 (delete object.삭제.. [WebProgramming] 노마드코더 JavaScript [1] -기본적인 내용 브라우저에서는 css나 js는 열리지 않고 html만 제대로 작동을 하기 때문에 css와 js에 적은 내용을 html에 추가하는 것이 중요하다. 본격적으로 내용을 배우기 전 기본 상태 index.html DOCTYPE html> Momentum style.css body{ background-color: aliceblue; } app.js alert("hi"); 이렇게 하면 이렇게 기본 화면을 띄울 수 있다. css와 js내용을 적고 html에 파일을 불러오는 것만 기억을 잘 하면 될 것 같다. -Variable(cost, let , var) -variable을 만드는 방법 const & let const는 상수라서 값이 고정되어 변하지 않는다는 특징을 가진 반면에, let은 변수의 값이.. [WebProgramming]노마드코더 CSS- Animations & Media Query 4.3 Animatinos part one 마우스를 올려놨을때만 실행되는 것이 아니라, 계속 재생될 수 있는 애니메이션을 얻고 싶을때 사용한다. 애니메이션을 만들기 위한 규칙 : @을 사용하기 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Transformations /*애니메이션 사용법*/ @keyframes imgcoinflip{ /*어느 한 지점부터 다른 지점으로까지 애니메이션 적용하기*/ from{ transform:rotateX(0); } to{ transform:rotateX(360deg); } } img{ border:1px solid black; border-radius: 50%; /*이.. [WebProgramming]노마드코더 내용정리 -Transitions & Transformations Transitions part one 4.1 transition에 관한 실습을 해보았고 이를 코드 내용으로 정리를 해보았다.(주석 달아놓음 ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Transition a{ background-color:mediumturquoise; color:midnightblue; text-decoration: none; /*underline생략*/ padding:3px 5px; border-radius:5px; font-size:20px; /*hover가 없는쪽에 transition작성*/ transition: background-color 5s ease-in-out, color 3.. [WebProgramming]노마드코더 내용정리 CSS-Pseudo Selectors -Pseudo Selectors 1 ) pseudo Selectors: 세부적으로 element를 연결해주는 것 클래스나 아이디 처럼 style안에서 사용을 할 때 #, .혹은 그냥 이름을 적는 것 말고도 다르게 쓰고 싶을 때 사용한다. ex) 다섯개의 div를 생성하고 마지막 div가 다른 배경색을 갖도록 해보기 그럴때 id나클래스를 따로 지정하지 않고 div:last-child { background-color: beige; } 이런 식으로 선택이 가능하다. 2) span태그에서의 pseudo selector 그리고 홀짝 번갈아 가면서 색을 바꾸고 싶을 땐 , span:nth-child(even) { background-color: lime; } 이렇게 짝수만 설정을 해줄 수 있다. even or o.. [WebProgramming]노마드코더 내용 정리 CSS-Position -position position : 레이아웃보다는 위치를 살짝 움직이고 싶을 때 사용 1) position: fixed - 화면의 범위가 커져서 스크롤을 내릴때도 fixed가 적용이 되면 위치가 (div박스의 위치) 고정이 된다. 이렇게 두가지의 div가 있을때 , 밑의 div에만 position:fixed를 설정하고 위치를 조정하기위해서 top,left등등을 사용해서 값을 지정하면, 밑div는 위의 div를 신경쓰지 않게 되면서 다른 레이아웃에 있게 된다고 생각을 하면 된다. position:fixed는 웹 사이트를 만들때 메뉴바와 같이 상태 고정바에 사용이 되면 효율적일 것이다. 2. other positions 2)position: static- 레이아웃이 박스를 처음 위치하는 곳에 두는 것을 의.. [WebProgramming] 4. Spring[Day3] 1. 정적 컨텐츠 기존의 hello-spring 파일에 resources-> static에 hello-static.html 파일을 생성한다. 그리고 내용을 입력해준다음에 실행을 시키고 url(http://localhost:8080/hello-static.html)을 입력해주면 이와 같이 화면이 실행되는 것을 볼 수 있다. 2. mvc와 템플릿 엔진 m:model v: view c: controller controller랑 view과 분리된 방식, view는 화면을 표현하는데 중점을 두어야 하고 controller는 내부에 중점을 두어야 하기 때문에 분리된 방식이 필요하다. 1) helloController에 1 2 3 4 5 @GetMapping("hello-mvc") public String hello.. [WebProgramming] 4. Spring[Day2] -view 저번 포스트에서 실습한 페이지는 오류가 뜨는 페이지였는데 이를 바꿔주는 실습을 진행해 본다. -welcome page만들기 hello-spring파일 → src →main →resources → static으로 들어간다음 여기에 index.html이라는 새로운 파일을 생성해준다. index파일에 간단한 내용을 입력해준다음, 원래의 localhost로 이동을 해주면, error페이지 대신, index파일에 쳤던 내용을 볼 수 있다. 위에서 처럼 정적인 사이트 대신 thymeleaf템플릿 엔진을 사용하면, 동적인 사이트를 만들 수 있다. thymeleaf 공식 사이트: https://www. thymeleaf.org/ 스프링부트 메뉴얼 : https://spring.io/projects/sprin.. 이전 1 2 3 4 다음
