출근하느라 바쁜 쭈니어

https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp Bootstrap Tabs and Pills W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 이 페이지에 대한 공부기록입니다 부트스트랩 3 기준입니다. 1. 탭 생성하기 시작 2 3 1. 탭 생성하기 2. 현재 페이지 active 표현 2. 드롭다운 메뉴가 있는 탭..

가상서버를 만드는방법에는 여러가지가 있다. 이번에는 Postman을 이용하여 MockServer 라는 가상의 서버를 만들어서 사용할 것이다. (그런다음에 axios를 사용하여 네트워크와 통신을 할것이다.) axios javascript에서는 네트워크 통신을 하도록 돕는 함수가 fetch함수이다. fetch함수보다 더 편하게 도와주는 외부 라이브러리가 axios이다. 즉 axios는 js에서 네트워크 통신을 도와주는 외부라이브러리이다. GitHub - axios/axios: Promise based HTTP client for the browser and node.js GitHub - axios/axios: Promise based HTTP client for the browser and node.js P..

*인프런강의자료 참고했습니다. html 요소들을 쉽게 배치할 수 있는 flex레이아웃이라고 있다. flex 방향 설정하기 수평으로 정렬을 원할시에 flex의 기본설정은 수평(row)이기에 flex-direction이 없어도 되긴한다. .parent{ display:flex; flex-direction:row; } 수직으로 정렬을 원할시에 ,div는 기본적으로 수직이기에 flex를 안해도 되긴하다. .parent{ display:flex; flex-direction:column; } 아이템 정렬방향-수평의 기준 justify-content justify-content는 영역안에 있는 아이템을 어떻게 정렬할지 설정한다. .parent{ display:flex; justify-content:center; } ..

css는 html에 디자인을 더해주는 요소이다. 선택자{ 속성1: 값; 속성2: 값; } 선택자 선택자는 스타일을 적용하는 대상이다. id, class, tag를 선택할 수 있다. /*tag 가 선택자일때 */ p{ color:orange; } /*id 가 선택자일때 */ #title{ color:blue; } /* class가 선택자일때 */ .item{ color:red; } Hello Grab Hello Everyone id가 적용된다. class가 적용된다. class가 적용된다. 복합선택자 #item-list #item3 { margin-bottom: 32px; background-color: yellow; } #item-list > #item4 { margin-left: 16px; margin..

html은 태그, 속성, 콘텐츠를 이해하면 된다. 기본형식: 콘텐츠 Hello inflearn! 속성이 있는 경우: 콘텐츠 네이버로 가기 태그 안에 태그가 있는 경우 hello grab! hello grab! HTML의 기본구조 html 내용 HTML의 기본구조 예시 Hello inflearn! img, form태그 예시 아이디 입력 비밀번호 입력

* 한성대 김남윤교수님 수업자료입니다. Web page -> Static page vs Dynamic page Static Page 는 정적인 페이지로서, 항상 동일한 페이지를 돌려준다. Dynamic Page 는 동적인 페이지로서, 피라미터에 따라 다른 페이지를 돌려준다. 동적인 페이지를 만들기 위해선, WAS(Web Application Server)가 필요하다. Web Service 구조 웹서비스의 구조이다. 정적인페이지는 Web Server만 필요하지만 동적인 페이지는 저 구조가 필요하다. WAS는 예시로 톰캣이 있다. WAS안에는 Web Server, Servlet Container가 있다. Web Server : client에게 받은 요청을 Servlet container에게 넘겨준다. cli..

Spring mvc framework model -view -controller구조를 제공하며, web application을 개발하는 framework이다. Model - POJO라는 plain old java object라는 구조로 이뤄져있으며, 애플리케이션 데이터를 캡슐화 하는 역할을 한다. View - 모델 데이터를 랜더링한 html output을 보여준다. Controller - 1. 사용자의 요청을 처리 2. 적절한 모델을 바인딩하고 view에게 건네준다 Spring MVC Overview 이 구조가 전체적인 구조이다. Dispatcher servlet 프론트 컨트롤러 역할을 수행한다. 애플리케이션으로 들어오는 모든 요청을 받게 된다. 요청을 적절한 핸들러에게 전달하는 역할을 한다. Handl..

mvc패턴의 controller 구현 코드 입니다. 서블릿으로 구현했습니다. @WebServlet(urlPatterns=" ") public class NewsContoller extends HttpServlet{ private static final long seriaBersionUID=1L; private NewsDAO dao; private ServletContext ctx; public void init(ServletConfig config)throws ServletException{ super.init(config); dao=new NewsDAO(); ctx=getServletContext(); } protected void serviece(HttpServletRequest request,Htt..

dao 구현시 참고하세요 예로서 학생 테이블에서 학생을 등록, 학생목록을 출력, 학생 삭제를 하겠습니다. 기능을 구현하기전에 DAO에 기본 open()메소드를 구현하겠습니다. dao open() public class DAO{ Connection conn=null; final String JDBC_DRIVER="database"; final String JDBC_URL="database url"; public void Open(){ Class.forName(JDBC_DRIVER); conn=DriverManger.getConnection(JDBC_URL,"id","pw"); } 학생등록 public class insertDAO(Student s){ conn=open(); String sql="insert..

web programming 학교에서 들은 web 프로그래밍 수업을 기준으로 웹사이트를 만들때 어떠한 준비를 해야하는지 적어보겠습니다. 1. 구현환경 설정하기 첫번째는 기본 구현을 할 수 있는 환경을 설정하는 것입니다. 이 단계에서 제대로된 준비가 되어야 나중에 문제가 생기지 않습니다. (제 기준으로 작성하겠습니다.) 1. 내가 구현할 파일을 새로 만든다 (이 때 바탕화면에 파일을 넣어놓는것이 아닌, c드라이브에 내가 알 수 있도록 만들어둔다) 2. 이 파일에 같이 서버를 위치해둔다. web이기에 반드시 서버가 필요하다, 그래서 아파치 파일을 같은 위치에 두었다. 3. source tree에 새로운 파일을 만든다. 나는 깃허브 연동을 sourcetree 를 이용해서 올린다. 이 source tree에 c..