Dolphins의 HelloWorld

자바 웹 어플리케이션(Java Web Application) Was에 설치(deploy)되어 동작하는 어플리케이션. 자바 웹 어플리케이션에는 HTML, CSS, 이미지, 자바로 작성된 클래스(Servlet 포함, package, 인터페이스 등), 각종 설정 파일 등이 포함된다. 자바 웹 어플리케이션의 폴더 구조 서블릿이란? 자바 웹 어플리케이션의 동적인 처리를 하는 프로그램의 역할. 서블릿을 정의해보면 서블릿은 WAS에 동작하는 JAVA클래스. 서블릿은 HttpServlet 클래스를 상속받아야한다. 서블릿과 JSP로부터 최상의 결과를 얻으려면, 웹 페이지를 개발할 때 이 두가지(JSP,서블릿)를 조화롭게 사용해야 한다. 예를들어, 웹 페이지를 구성하는 화면(HTML)은 JSP로 표현하고, 복잡한 프로그래..

엘리먼트가 배치되는 방식 (float:left) float 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있다. 일반적인 배치에 따라서 배치된 상태에서 float는 벗어난 형태로 특별히 배치된다. 따라서 뒤에있는 block 엘리먼트가 float된 엘리먼트를 의식하지 못하고 중첩돼어 배치된다. float의 속성은 이런 특이성 때문에 웹사이트의 전체 레이아웃 배치에서 유용하게 활용된다. 예시를 통해 알아보자. float를 통해서 이렇게 녹색 사각형을 이렇게도 배치할 수 있는것을 볼 수 있다. 실제로 float가 어떻게 사용되고 있는지 naver 모바일 버전에서 확인해 보자 개발자 도구를 이용해서 확인해 보면 네이버 모바일 사이트는 왼쪽, 가운데, 오른쪽 세 부분으로 이루어져있다. 이 때 이 부분..

엘리먼트가 배치되는 방식 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering과정 이라고도 한다. 기본적으로 엘리먼트는 위에서 하래로 배치되는데 웹사이트의 배치는 다양하게 표현 가능해야하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용해야 한다. 이렇게 별도의 설정 없이 배치를 하면 위에서 아래로 배치가 되는 모습을 볼 수 있다. display 속성이 inline인 경우 위에서 보이는 것과 같이 우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐른다 높이와 넓이를 지정해도 반양이 되지 않는다는 특징이 있다. 다음의 예시를 보면 기본적으로 inline 속성을 가지고 있는 span, a, strong 태그들에게 display : block 을 주었더니 inline속..

CSS에서 가장 기본적인 style 적용에 대해 알아보겠다. 먼저 색상변경에 대한 것을 살펴보겠다. - color : red; - color : rgba(255,0,0,0.5); - color : #ff0000; 첫번째 방법은 가장 단순한 정해져 있는 색상의 이름을 통해 설정하는 방식이다. 두번째로는 rgb를 사용해서 색을 표현하는 것인데 각 속성의 최댓값은 255이며 네번째 값은 알파값이라고 부르며 희미한 정도를 나타내는 속성이다. 세번째는 우리가 흔히 아는 16진수를 통해 색을 나타낸 것인데 인터넷에서 색상표를 이용하던가 다음과 같이 style 목록에서 나오는 color 옆에 있는 네모를 클릭해서 직접 색깔을 바꿔보면서 선택할 수도 있다. 다음으로는 font-size에 대해서 살펴보자 우리가 잘 알고..

특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야 한다. 엘리먼트를 쉽고 빠르게 찾을 수 있는 CSS Selector 문법을 알아보자. 먼저 elemet에 style을 지정하기 위해서, 3가지 기본 선택자를 사용할 수 있다. tag, id, class tag로 지정할 때는 그냥 태그 이름을 써서 style을 지정하면 된다. 아래는 span태그의 style을 지정한 예 이다. 이런식으로 적용하게 되면 위의 예시에서는 span이 하나밖에 없지만 span이 여러개가 있는 경우에도 동일하게 모두 style이 지정된다. 다음은 id와 class를 통해 style을 지정하는 방법이다. id와 class도 역시 동일한 id와 class를 가진것들이 여러가지가 있다면 일괄적으로 style이 적용된다..

CSS상속 상위에서 적용한 스타일은 하위에도 반영된다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다. 예시를 통해서 실제로 반영이 잘 되는지 확인해보자. 먼저 CSS를 설정할 때 범위를 구체화 해서 색깔을 넣어주었고기대하는 것과 같이 지정해준 범위만 빨간색이 된 것을 볼 수 있다. 여기서 CSS가 적용되는 범위를 가장 큰 범위로 바꾸어주면 다음과 같은 결과가 나온다. div아래 있는 모든 영역에 CSS가 적용되는 것을 확인할 수 있다. 색깔 말고 다른 속성도 설정해주고 테스트를 해보면 다음과 같은 결과가 나온다. 이 결과를 보면 color, font-size는 하위 엘리먼트에 모두 적용이 되지만 배치와 관련된 속성들인 border, padding과 같은 ..

CSS 선언 CSS의 선언은 선택자와 다음 property, value로 구성된다. Style을 HTML에 적용하는 방법으로는 inline, internal, external 세 가지 방법이 있다. inline으로 적용한 style은 다른 어떤 파일에 CSS로 별도 다른 방법으로 선언한 것보다먼저 적용하게 되어있다. 이것은 별로 좋은 방법은 아닌데 그 이유는 구조를 표현하는 HTML에 CSS가 들어있다보니유지보수가 어렵고 관리하기가 어렵기 떄문이다. 다음은 inline을 통해 적용한 예시이다. internal 방식은 head안에 바로 style을 넣는 방식이다. 이 방식의 장점은 별도의CSS파일을 관리하지 않아도 된다는 점 또 서버에 CSS파일을 부르기 위해서 별도의 브라우저가 요청을 보내지 않아도 된다..

ID - 고유한 속성으로 한 HTML 문서에 하나만 사용 가능하다. - 고유한 ID값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다. 위의 예시를 살펴보면 각 방송사가 위치해있는 하나의 칸 마다 id가 지정되어있음을 볼 수 있다. Class - 하나의 HTML문서 안에 중복해서 사용 가능하다. - 하나의 태그에 여러개의 다른 class 이름을 공백을 기준으로 나열할 수 있다. - 홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 class의 사용이 필수적이다. 다음의 예시를 살펴보면 뉴스 이미지 하나하나마다 동일한 class가 적용되는 것을 볼 수 있다. 즉 같은 디자인이 적용되고 있는 것이다. 출처 : edwithhttps://www.edwith.org/boostcourse-w..

HTML 구조설계 html 개발을 할 때 처음에는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 시작한다. 즉 개발해야하는 것에 대하여 구조를 먼저 분석해야 한다. 먼저 영역을 상단/본문/네비게이션 이런 식으로 분리한다. 그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적이다. 영역안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하면서 완성해나간다. 이때 CSS코드를 같이 구현하지 않고 HTML로 먼저 구조를 잡아나가는 것이 개발 단계에서 유리하다. 다음의 화면을 보고 HTML을 통해 뼈대를 만들어보자. 출처 : edwith https://www.edwith.org/boostcourse-web/lecture/16668/

Layout이란? HTML 화면을 구성하는 기본적인 모습 상단의 header, 하단의 footer, 가운데에 본문 영역, 웹 사이트의 네비게이션 영역 등.. 웹사이트에서 실제로 구현된 부분을 한번 살펴보자. header같은 경우는 div에 CSS클래스를 넣어서 구현했음을 볼 수 있다. 그 외에 코드를 살펴보면 상단의 뉴스, 연예 이 카테고리에는 nav를 사용했음을 볼 수 있고section태그를 사용한 것도 확인할 수 있다. 다음은 이런 레이아웃 태그를 이용해서 간단한 실습을 해본 결과이다. 위에서 언급한 태그들은 아래와 같은 화면으로 구성된다. 보통 PC에서는 header나 footer 이런 걸 쓰지 않고 그냥 div에다가 클래스로 이름을 header, footer이렇게 많이 주고 모바일에서 주로 이 태..