Progamming93 Servlet 작성 방법 들어가기 전에현재 프로젝트에서 웹을 개발할 때 서블릿을 직접 써서 개발하지는 않는다. 조금 더 편하게 사용할 수 있게 도와주는 다양한 프레임워크를 사용해서 개발하는 경우가 더 많다. 하지만, 그 프레임워크들도 서블릿 없이는 동작할 수 없기 때문에 서블릿의 기본적인 작성법이나, 서블릿의 라이프 사이클을 이해하고 있다면 웹의 동작을 이해하는 데 많은 도움이 된다. 학습 목표1. 서블릿을 작성할 수 있다.2. 서블릿 버전에 따른 web.xml을 적절하게 작성할 수 있다. 핵심 개념- HttpServlet- web.xml 버전에 따른 Servlet 작성 방법1. Servlet 3.0 spec 이상에서 사용하는 방법- web.xml 파일을 사용하지 않는다.- 자바 어노테이션(annotation)을 사용한다.- 앞.. 2019. 1. 16. Servlet이란? 들어가기 전에웹 어플리케이션은 정적인 컨텐츠와 동적인 컨텐츠로 나누어 볼 수 있다. 프로그램을 수행해서 페이지를 동적으로 만들어주는 서블릿에 대해 알아보자. 학습 목표1. 자바 웹 어플리케이션의 구조를 이해한다.2. 서블릿에 대하여 이해한다. 핵심 개념- 자바 웹 어플리케이션- 서블릿 자바 웹 어플리케이션(Java Web Application)- WAS(Tomcat)에 설치(disploy)되어 동작하는 어플리케이션- 자바 웹 어플리케이션에는 HTML, CSS, 이미지, 자바로 작성된 클래스(Servlet, JSP, package, 인터페이스 등), 각종 설정 파일 등이 포함된다. 자바 웹 어플리케이션의 폴더 구조 - 웹 어플리케이션은 혼자 동작하는 것이 아니라 WAS에 의해 동작된다. 그래서 반드시 폴더.. 2019. 1. 16. 개발환경 설정 - BE JDK 다운받기 및 설치하기https://www.edwith.org/boostcourse-web/lecture/16680/ 환경 설정하기https://www.edwith.org/boostcourse-web/lecture/16681/ 이클립스 다운받기 및 설치하고 인코딩 설정하기https://www.edwith.org/boostcourse-web/lecture/16682/ HelloWorld 컴파일하고 실행하기https://www.edwith.org/boostcourse-web/lecture/16683/ Tomcat 다운받기 및 설치하기https://www.edwith.org/boostcourse-web/lecture/16684/ HelloWorld 서블릿 컴파일 및 실행하기https://www.edwit.. 2019. 1. 16. 디버깅-HTML-CSS 들어가기 전에프로그래밍에서는 디버깅이 꽤 중요하다. HTML/CSS를 개발하면서 생기는 문제를 어떻게 빨리 처리해야될까? 더 빠르고 정확한 문제를 해결하기 위한 HTML/CSS 디버깅 방법을 공부해보자. 학습 목표1. HTML/CSS의 디버깅 방법을 이해한다. 핵심 개념- debugging- chrome developer tools 크롬 개발자 도구를 통해 쉽게 할 수 있는 일- CSS Style을 inline 방식으로 빠르게 테스트 할 수 있다.- 현재 엘리먼트의 값을 임시로 바꿀 수 있다.- 최종 결정된 CSS 값을 확인할 수 있다.- https://www.edwith.org/boostcourse-web/lecture/16679/ 2019. 1. 16. float 기반 샘플 화면 레이아웃 구성 들어가기 전에웹 페이지의 레이아웃을 float 속성을 중심으로 어떻게 만드는지 실제 코드구현 과정을 이해한다. 학습 목표1. float로 웹 사이트의 레이아웃을 구성할 수 있다. 핵심 개념- float- layout 실습https://codepen.io/hzoou/pen/XoQmQX?editors=1100 2019. 1. 16. Element가 배치되는 방법(CSS layout) 들어가기 전에CSS의 배치를 위해서는 중요한 여러가지 개념을 알고있어야 한다. 그 중에서 block과 inline의 차이 그리고 position의 속성을 이해해야 한다. 또한, 많이 사용되고 있는 float의 성질도 알아둘 필요가 있다. 학습 목표1. layout의 방식에 대해 이해하자. 핵심 개념- 박스 모델 (Box model)- margin- border- padding- position 엘리먼트가 배치되는 방식엘리먼트를 화면에 배치하는 것을 layout 작업, 또는 Rendering 과정이라고 한다. 편의상 배치라고 하자. 위에서 아래로 배치되는 것이 기본이다. 하지만 웹사이트의 배치는 다양하게 표현이 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용한다. - displ.. 2019. 1. 16. CSS 기본 Style 변경하기 들어가기 전에글자색, 배경색, 글꼴은 어떻게 바꾸는 것일까? 텍스트 속성 및 옵션값을 변경하는 방법에 대해 배워보도록 하자. 학습 목표1. CSS 없이 먼저 HTML 구조를 설계할 수 있다. 핵심 개념- font-size- background-color- font-family font 색상 변경- color : red;- color : rgba(255, 0, 0, 0.5); → a (알파값) : 투명도- color : #ff0000; → 16진수 표기법으로 가장 보편적, 축약가능(f00) font 사이즈 변경- font-size : 16px;- font-size : 1em; → 먼저 정의된 픽셀값을 기준(default : 16px)으로 두고 상대적인 크기(배수)로 지정 배경색- background-col.. 2019. 1. 16. CSS Selector 들어가기 전에특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야한다. 특정 엘리먼트 뿐 아니라 여러개의 엘리먼트일 수도 있다. 학습 목표1. 엘리먼트를 쉽고 빠르게 찾을 수 있는 CSS Selector 분법을 이해한다. 핵심 개념- CSS Selector- id, class, tag selector- nth-child CSS Selector- HTML의 요소를 tag, id, class, html 태그 속성들을 통해 쉽게 패턴 매칭을 시켜주는 방법- element에 style을 지정하기 위해서 세가지 기본 선택자를 사용할 수 있음· tag : 태그 이름을 쓰면 된다. 태그 이름이 동일한 경우, 모든 태그에 적용· id : 해당 값을 가지고있는 id에 적용· class· 그룹 선택 : h.. 2019. 1. 16. 상속과 우선순위 결정 들어가기 전에 CSS 스타일을 적용하는 것에는 여러가지 이유로 몇 가지 규칙이 존재한다. 상속은 대표적인 CSS 적용 규칙인데 중복된 속성을 매번 적용해야하는 일을 줄일 수 있다. 학습 목표1. CSS 상속의 특징과 상속이 되지 않는 상황에 대해서 이해해보자. 핵심 개념- CSS 상속- 선택자 우선순위 (CSS Specificity) CSS 상속- 상위에 설정된 스타일을 하위에서도 쓴다 : 재사용 측면에서 효율성 good- box-model이라고 불리는 속성(width, height, margin, padding, border)과 같이 크기와 배치에 관련된 속성은 상속을 받지 않음 Cascading- CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다.· 경쟁 :.. 2019. 1. 16. 이전 1 ··· 6 7 8 9 10 11 다음
