BE/WebProgramming (25) 썸네일형 리스트형 [WebProgramming] 4. Spring[Day1] -Spring 프로젝트를 진행하기 앞서 프론트엔드 부분말고 백엔드도 공부해야 할 필요성을 느껴서 스프링을 간단하게 공부하게 되었다. 스프링을 공부하기 위해서 java를 다시 설치하고 eclipse대신 intellij를 이용하기로 했다. 스프링부트는 스프링 프레임워크의 복잡한 환경 설정을 대신해서 나온 것 인것 같다. 뭔가 개발자친화적인 느낌,,,?? 그래서 스프링 부트를 이용해서 스프링 프로젝트를 전보다 쉽게 만들 수 있다고 하며, https://start.spring.io/ 여기로 접속해서 프로젝트를 만들 수 있다. 사이트에 들어가서 위처럼 해당사항을 변경해준다음, GENERATE버튼을 눌러주면, 압축파일이 다운로드 된다. 그 다음 압축을 풀고 intellij를 통해서 폴더 안에 있는 build.gra.. [WebProgramming] JavaScript(Day2) - 조건문 실습하기 전의 상태 night day버튼을 각각 누르면 배경의 색이 변하도록 한다. 근데 조금 더 효율성을 높이기 위해서 하나의 버튼에 조건문을 두어서 버튼이 2개가 아닌 1개로 만들어 보려고 한다. → toggle 실습 코드 ↓ 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 31 32 33 34 35 36 37 38 web 데이터베이스 순서 7장 8장 9장 데이터베이스란 무엇일까 요약 여러 사람에 의해 공유되어 사용될 목적으로 통합하여 관리되는 데이터의 집합을 말한다. 자료항목의 중복을 없애고 자료를 구조화하여 저장함으로써 자료 검색과 갱신의 효율을 높인다. 현대적인 의미의 데이터베이스 개념을 .. [WebProgamming] Javascript(Day1) -script 태그 사용자와 상호작용 할 수 있도록 웹페이지를 구성해줄 수 있는 방법 html 은 javascript위에서 동작하는 언어! script태그를 이용해서 자바 스크립트 언어를 구현할 수 있다. 문자열을 출력하는 실습을 해보면 HTML과 크게 차이가 없는 줄 알았는데, 숫자를 대입해보니 자바 스크립트는 동적인 언어이기 때문에 HTML과 달리 연산의 결과가 출력되는 것을 볼 수 있다. -이벤트 웹 브라우저 위에서 일어나는 일들 : 이벤트 지금은 그냥 간단한 실습을 하는 중이다....ㅎ [WebProgramming] CSS (DAY2) -BOX 모델 일단 box에 대해서 알아보기 위해 아무글이나 가져와서 웹페이지를 만들어본다. h1태그는 제목을 나타내는 태그로 화면 전체를 사용하는 반면, a태그는 화면 전체를 사용하지 않고 해당 부분만 사용한다. 이를 가시적으로 확인하기 위해서 style태그를 사용해서 알아보면, 이렇게 한눈에 알아볼 수 있다. 따라서 화면 전체를 쓰는 태그들은 block level element 라고 하고 자기 자신의 내용만큼 화면을 사용하는 태그들은 inline element라고 한다. block level element들고 display:inline; 을 사용하면 인라인처럼 사용을 할 수 있고 반대로 inline태그들도 display:block;을 사용하면 블록 태그처럼 사용이 가능하다. -참고: style태그의 .. [WebProgramming]CSS (DAY1) -CSS가 등장하기 이전의 상황 태그가 존재했고, 디자인만 나타낼 수 있었음 Q. 1억개의 a태그를 다 바꾸려면,,? ->font태그를 이용해서는 시간이 너무 오래 걸리니까 CSS를 이용해보자 그래서 태그를 추가한다기보다는 CSS를 사용하는 것으로 방향이 잡힘 -CSS CSS문법은 HTML태그들 위에 이런식으로 적어주면 된다. 효과는 효율성의 극대화 (코드 중복 제거, 웹 페이지 사이즈 줄어들기 , 유지보수가 높아짐, 가독성이 좋아짐) html에서 디자인 기능을 뺏어온 것이라고 할 수 있다. 그리고 style태그를 이용하는 것 대신에 style속성을 사용해서 html 태그에 직접 적용이 가능하기도 하다. 지금은 간단하게 css를 배우기 전에 어떤 것인지 틀을 잡는 정도고 다음부터 본격적으로 공부를 해봐야.. [WebProgramming]윈도우로 웹 서버 운영하기(DAY4) 1. 웹 서버 설치 저번에 한 프로젝트를 깃에 올리고 이번에는 윈도우로 웹 서버를 운영해볼 것이다. 그러기 위해서는 WAMP packaged by bitnami 를 다운로드 해주어야 한다. 다 설치하면, 이런 화면이 뜨고 여기서 go to applicaion을 누르면 이 화면이 나오면 제대로 실행이 된 것이다...ㅎ 2. 웹 서버와 HTTP 원래 주소창에는 local host라고 써있는데 이 주소를 http://127.0.0.1로 바꾸어 준다. http://127.0.0.1/index.html : 그리고 경로에 이 주소로 바꾸었을때 위의 화면과 똑같이 나와야 한다. 차이는 없다는 점! 이 index파일은 내 pc에 어디에 위치해 있는 걸까? : 저 위의 경로를 따라 들어가다보면 index파일을 발견할 수.. [WebProgramming] HTML (DAY3) 간단하게 웹사이트 만들기 아직은 html 밖에 안배우고 css랑 javascript를 안배워서 형편없지만 그래도 임의로 만들어 보았다 web페이지 여러개 만들어서 a태그를 잘 이용하면 화면 간의 전환은 쉽게 할 수 있다. 전에 배웠을때는 a태그가 중요하다고 생각을 안했는데 이제 와서 보니 왜 a태그가 중요한지 알겠다 ...ㅎ 이 내용은 간단하지만 그래도 깃에 올려놔야지!@! https://github.com/yeon-jae/web1 위에 실습을 하기 위해서 필요한 html은 index.html, 1.html, 2.html, 3.html 이렇게 필요했다. [Web Programming] HTML(DAY2) -줄바꿈 사용 br은 단순 줄바꿈이라면 p는 문단을 나눌 수 있는 태그라고 생각을 하면 된다. br태그와는 다르게 p태그는 와 같이 닫히는 태그를 사용할 수 있다. -문법 속성과 img 이미지를 넣고 싶을 때는 img속성을 사용해주면 되는데, 이것만 사용해서는 img를 불러올 수 는 없다. 그래서 를 사용해서 url을 가져오면 된다. 연습을 할때 사용하는 이미지들은 저작권에 구애를 받지 않는 unsplash에서 다운을 받으면 된다. 위에 처럼 사용을 해주면 되고 크기를 조절할때는 width와 height을 이용해주면 된다. 속성 부분은 width, src와 같은 부분으로 위치는 상관이 없고 tag의 내용을 설명해줄 수 있다. -Parent Child속성 리스트들을 나타내기 위해서 li태그를 사용할 수 있.. 이전 1 2 3 4 다음
