dl,dt,dd 요소

'용어'와 '그 설명' 으로 구성된 목록을 '정의형 목록 또는 정의 리스트(definition list)' 이라고 한다.

dl 요소 : 정의형 목록 (definition list)

dt 요소 : 용어 (definition term)

dd 요소 : 용어 설명부분 (definition description)

많은 브라우저에서 dd 요소가 들여쓰기가 되어 표시

dl 요소

block 요소이지만 dt,dd 요소 이외의 요소를 포함 할 수 없다.

• dl요소 밑에는 dt,dd를 제외한 다른 유형의 요소가 있어서는 안된다.
•  

dt 요소

inline요소이며 inline요소와 텍스트를 포함 할 수 있다.

• dt 내부에 div태그는 허용불가. (inline요소인 p, span, layber 등은 가능)
• 정의 리스트는 아이템을 규정하고 설명하기 위한 목적으로 사용하므로 주어부와 서술부가 바뀌면 그 의미가 달라질 수 있다. 따라서 dt 요소는 반드시 dd 요소 앞에 있어야 한다.

dd 요소

block요소이며 inline요소와 텍스트를 포함할 수 있고, block요소를 포함할 수 있다.

• dd 요소 내부에는 div , 기타 요소를 포함할 수 있다.
• dl 요소 내에서만 사용되며 반드시 dt 요소와 짝을 이루어 사용해야 한다.

일반적인 단순한 표형태는 dl태그로

복잡한 데이터 및 그리드 같은 복합형 표일경우엔 table로 구성

CSS 포지션(position) 속성

태그들의 위치를 결정하는 CSS

정적, 상대적, 고정, 절대 또는 고정을 지정

• static
• relative
• absolute
• fixed
• sticky

position속성을 설정 한 후 top, right, bottom, left 속성을 사용해 위치 조절이 가능.

static (기본값)

- 일단 모든 태그들은 처음에 position: static (정적으로 배치) 상태. (기본적으로 static이라 따로 써주지 않아도 됨.)

- 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

- static을 사용하면 top,right, bottom, left를 설정해도 적용되지 않는다.

relative

태그의 위치를 변경하고 싶을때 position: relative를 사용

이후 top, right, bottom, left 속성을 사용해 위치 조절이 가능.

기존에 자리를 잡던 위치를 기준으로 위치를 잡는다. (상대적인 위치)

방향으로 주어진 px만큼 이동.

absolute

가장 가까운 위치에 있는 조상과 관련해 배치됨.

문서 전체를 기준으로 위치를 잡는다. (절대적인 위치)

relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면 ,

absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직임.

 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨.

• 절대위치 요소에 조상이 배치되어 있지 않으면 문서 전체기준에 움직인다.

fixed

특정위치에 고정되어있게 하는 position.

스크롤을 내려도 항상 같은 위치에 유지

sticky

with 요소 position: sticky는 사용자의 스크롤 위치를 기반으로 배치됨

뷰포트에서 지정된 오프셋 위치가 충족될 때 까지 상대적 위치에 배치 된 다음 위치에 고정됨.

참고 : Internet Explorer, Edge 15 및 이전 버전은 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다 (아래 예 참조). 또한 중 하나 이상 지정해야합니다 top, right, bottom또는 left끈적 위치가 작동 할 수 있습니다.

전체기준이 아닌 부모를 기준으로 위치를 잡고 싶을 때

부모가 relative이고 자식이 absolute라고 생각한다.

하위 class를 감싸고 있는 상위 class에 relative를 적용하고

하위class에 absolute로 적용하면 , 해당 하위 class가 absolute임에도 불구하고 문서 전체가 아닌 relative속성을 가진 부모(상위) class를 기준으로 위치를 선정하여 부모위치를 기준으로 위치를 잡게된다.

absolute와 relative가 만나면 상대적으로 절대적인 위치를 잡는다.

겹치는 요소

요소가 배치되면 다른 요소와 겹칠 수 있다.

z-index 속성으로 요소의 스택 순서를 지정할 수 있다. (요소는 다른 요소의 앞에 또는 뒤에 있어야한다.)

요소는 양수 또는 음수 스택 순서를 가질 수 있다.

더 큰 스택 순서를 갖는 요소는 항상 스택 순서가 낮은 요소 앞에 위치!

참고 : 두 개의 배치 된 요소가 z-index 지정 없이 겹치면 HTML 코드의 마지막에 배치 된 요소가 맨 위에 표시됩니다.

CSS - float 속성

CSS 속성(property) float 은 웹 페이지의 배치 및 레이아웃에 사용된다.

한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정

float은 block 레이아웃이기 때문에, 경우에따라 display 계산 값을 수정한다.

주의: JavaScript에서 이 속성을 element.style 객체의 멤버로서 참조한다면,  cssFloat으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 styleFloat으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 의 "for"는 "htmlFor"로 이스케이프할 필요와 같이 "float"이 JavaScript에서 예약어란 사실 때문)입니다.

값

• left

  left는 요소가 자신을 포함하고 블록의 좌측에 부동해야 함
  

   

• right

  right는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드

   

• none

  기본값 . 요소가 부동하지 않아야 함을 나타내는 키워드  (텍스트에서 나타나는 위치에 표시)

   

• inline-start

   요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다.

  즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽

   

• inline-end

  요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드

  즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.

형식구문

left | right | none | inline-start | inline-end

float 위치 지정

요소가 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나 다른 부동된 요소의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.

float 지우기

 float을 지우는 가장 간단한 방법은 우리가 왼쪽으로 정렬되는 지 확인하고 싶은 새 머릿글에 clear 속성을 추가하는 것

h2.secondHeading { clear: both; }

그러나, 이 방법은 우리가 머릿글이 가로로 옆에 계속 보이기를 원하는 같은 블록 형식 문맥(block formatting context) 내에 다른 요소가 없을 때만 동작합니다. 우리 h2 좌우로 부동되는 사이드바(sidebar)인 형제(sibling)가 있다면, clear 사용은 강제로 머릿글이 두 사이드바 아래로 나타나게 하고 이는 아마 우리가 원하는 게 아닙니다.

아래 요소의 float을 지우는 게 선택사항이 아니라면, 다른 방법(approach)은 부동 요소가 담긴 컨테이너의 블록 형식 문맥을 제한하는 겁니다. 다시 위 예제를 참조하면, 빨간 박스 셋은 모두 p 요소 내에 있는 걸로 보입니다. 우리는 박스를 포함하도록 늘어나지만, 그 하단 밖(밑)으로 사라지지 않게 hidden 혹은 auto 로 p의 overflow 속성을 설정할 수 있습니다:

p.withRedBoxes { overflow: hidden; height: auto; }

주의: overflow 를 scroll 로 설정하면 부동된 모든 자식(child) 요소도 포함합니다. 하지만 스크롤바가 콘텐츠의 높이에 상관없이 보입니다. 그 컨테이너가 콘텐츠를 수용하기 위해 늘어야(grow) 함을 나타내는 기본(default)임에도 불구하고, 여기에서 우리는 height 를 auto 로 설정하고 있습니다.

clearfix 해킹

요소가 포함 된 요소보다 크고 떠 다니는 경우 해당 요소가 컨테이너 외부에서 "오버플로"됩니다.

그런 다음 overflow: auto;이 요소를 포함하여이 문제를 해결할 수 있습니다.

예

.clearfix { overflow: auto; }

overflow: auto당신이 당신의 마진과 패딩 (다른 사람이 스크롤바를 볼 수 있습니다)의 제어를 유지할 수 있습니다로 clearfix 긴으로 잘 작동합니다. 그러나 새롭고 현대적인 clearfix 해킹 은 사용하는 것이 더 안전하며 다음 코드가 대부분의 웹 페이지에 사용됩니다 .

예

.clearfix::after { content: ""; clear: both; display: table; }

참고 링크 - https://developer.mozilla.org/ko/docs/Web/CSS/float

프로젝트 생성 및 타일즈 설정

1. 프로젝트 생성하기

New > eGovFrame Web Project  > project name 작성

Group id도 name명과 동일하게 작성 후 <Next>클릭 > Generate Example 체크 후 <Finish>

[타일즈(tiles) 설정]

2. 생성한 프로젝트의 pom.xml 에서 타일즈 버전추가

<properties> ...</properties> - 버전 정보 넣는곳

<properties> 

...

     <org.apache.tiles-version>2.2.2</org.apache.tiles-version>

</properties>

3. pom.xml  package Explorer에서 Maven Dependencies 확인하기

.jar안에는 .class파일들이 압축되어있다.

java만 읽을 수 있게 만든 확장자로 이 .jar파일들로 전자정부 프레임워크가 돌아가고 java가 파싱된다.

처음 프로젝트 생성할때 기본세팅에서 Generate Example 체크한 라이브러리들이 생성되어 있다.

<dependency>
...
</dependency>

타일즈를 사용하기위해 dependency (의존성 주입) 를 통해 라이브러리를 추가한다. 

4. dispathcer-servlet.xml

위치는 webapp폴더 안에 있다.

xml파일인데 webapp에 있는 이유

보통 컨트롤러관련 설정하는 곳인 xml은 다른곳에 위치해 있는데

dispathcer-servlet.xml 은 화면단쪽의 설정을하는 곳이기 때문에 webapp폴더안에 위치해 있다.

dispathcer-servlet.xml 에서 <bean> 태그를 찾는다.

viewResolver 

/WEB-INF/jsp/egovframework/example/ 부분이 order=1 우선순위 1로 기본설정이 되어있는데

타일즈 설정을 추가하여 타일즈를 먼저 읽고 jsp를 두번째로 읽는걸로 설정을 변경한다.

기존의 viewResolver와 configurer 부분을 복사해서 붙여온다.

기존 viewResolver jsp의 순위 1을 2로 변경해주고 타일즈 viewResolver부분을 우선순위 1로 변경해준다.

[Egov] 프로젝트 구조

Java 폴더  - MainController.java

Java폴더 내의 cmmn, main, sample 들은 업무패키지이다.

Cmmn- 공통업무 패키지

Main-업무패키지

Sample- 샘플업무패키지

resources 폴더

egovframework의 설정 파일과

Sql 쿼리 관련 파일(.xml)

webapp폴더

view관련 파일들 (.css, .jsp, .js, .img, .xml 등)

WEB-INF폴더 내에 jsp파일이 들어있다.

톰캣 서버를 올린 후 메인이 뜨기까지의 과정

1. Servers >Tomcat v7.0 Server at localhost- config > context.xml

context.xml

WEB-INF/web.xml로 가라고 하여 이동한다.

2. WEB-INF/web.xml

// web.xml
<welcome-file-list>
	<welcome-file> index.jsp </welcome-file>
</welcome-file-list>

web.xml에서 welcome file이 있는데

현프로젝트의 처음 페이지를 지정해주는 부분으로 지정된 index.jsp로 이동하게 된다.

3. index.jsp

// index.jsp

<jsp: forward page = "/main.do"/>

Forward태그:어디어디로 찾아가라는 의미로

page속성에 설정된 값 main.do로  이동한다.

4. main.do의 위치는 java폴더> egovframework > example > main > web > MainController.java

@RequestMapping(value = "main.do")

public String initMain() throws Exception {

return "main/main.tiles";

}

Web폴더 안에있는 컨트롤러의 @RequestMapping (리퀘스트맵핑 어노테이션)은main.do를 찾아가게 되는데

여기서 속성값인 문자열은 반드시 "유니크" 해야 호출 시 찾아올 수 있다.

(두 개 이상이면 jsp:forward가 찾아갈 수 없기 때문에)

호출된 메서드 안의 구현부 { }에서 return 으로 main폴더 내의 main.tiles를 호출한다.
main/main.tiles는 jsp업무폴더안에있는 jsp파일 명이다.

그래서 톰캣서버를 올리면 main.jsp가 뜬다.

Model : 모든 데이터의 상태와 로직을 처리

View : 모델이 가진 데이터를 표현하는 방법을 제공 (화면단)

Controller : 사용자로부터 받은 정보를 모델에게 상태변경요청을 하고 필요에 따라 뷰의 상태변경을 요청

MVC 패턴

디자인 패턴중 하나인 MVC패턴

디자인패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에

발생했던 문제점들을 정리해서 상황에 따라 간단하게 적용해 쓸 수 있는 것을 정리하여

특정한 “ 규약”을 통해 쉽게 쓸 수 있는 형태로 만든 것

라이브러리, 프리임워크등을 예로 말할 수 있다.

MVC란?

MVC는 Model View Controller의 약자로 하나의 애플리케이션, 프로젝트를 세 가지 역할로 구분한 패턴으로

사용자(Client)가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고

화면단(View)를 제어하여 사용자에게 전달한다.

MVC 장점

1.     유연하고 확장하기 쉽다 (컨트롤러가 뷰와 모델 간의 중간관리 역할을 하여 간접소통을 통해 좀 더

        유연한 구조를 설계할 수 있다. 수신하는 데이터 양을 줄일 수 있다.

2.     디자이너와 개발자의 협업이 용이하다.

3.     유지보수 비용을 절감할 수 있다.

MVC 단점

1.   기본기능 설계를 위해 클래스들이 많이 필요하여 복잡해질 수 있다. 스크립트로 작성되므   로 디버깅이 용이하지 않다..

2.   설계시간이 오래 걸리고 숙련된 개발자가 필요하다.

3.   처음 설계시간이 오래 걸려서 속도가 중요한 프로그램에서는 권장되지 않을 수 있다.

4.   Model과 View의 의존성때문에 완벽한 분리가 어려워서 패턴이 모호해질 수 있고 변형     이 올 수 있다.

MVC 순서

처음 User가 View에서 보여주는 화면에 접속

컨트롤러는 페이지를 보여주기 위해 모델을 호출

모델은 웹페이지의 결과값을 조합하여 결과물을 컨트롤러로 리턴

모델이 리턴한 결과를 View에 업데이트하여 사용자에게 보여줌

 

  요청  Client > Controller > Service > ServiceImpl > Mapper > DB(xml)

 

  응답  DB(xml) > Mapper > ServiceImpl > Service > Controller > Client

 

 

> Controller (컨트롤러)

- class

- 데이터를 주고받는 역할

- 터미너 역할

 

 

> Service (서비스)

- interface인터페이스이다.

- 구현부가 없다.

- ServiceImpl이 구현부 역할을 한다.

 

 

> ServiceImpl(서비스 임플)

- class

- 서비스의 구현부역할로 제일 중요한 로직들이 이 서비스임플에 있다.

 

 

> Mapper(맵퍼)

- interface 인터페이스

 

- Sql의 쿼리를 가리키는 역할을 한다. 

 

Ajax (Asynchronous Javascript And XML) - 에이잭스

서버에 요청을 하고있어 응답을 받게 되면 성공이나 실패 등에 따라 함수가 실행하게 되는데 그 함수가 먼저 실행되는 것이 아니라 서버의 응답을 받은 후 실행되는 것.

자바스크립트를 통해서 서버에 데이터를 요청한다.

HTML form태그가 아니라 자바스크립트를 통해서!

Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 

함께 사용하는 기술의 묶음을 지칭하는 용어로 여러가지 기술집합을 의미한다.

웹 클라이언트 측에서 Reload 없이 비동기적으로 콘텐츠를 변경하기 위해 사용하는 모든 기술을 지칭한다.

서버에서 로딩된 데이터를 페이지에 보여주기 위해 새로운 HTML페이지로 간다거나

새로고침을 할 필요가 없이 부분부분만 로딩한다.

Ajax 장점

1.      페이지 이동없이 (부분부분만 로딩) 고속으로 화면을 전환할 수 있다.

2.      수신하는 데이터 양을 줄일 수 있다.

3.      클라이언트에게 처리를 위임할 수 있다.

Ajax단점

1.      페이지 이동 없는 통신으로 인한 보안성의 문제가 있다.

2.      스크립트로 작성되므로 디버깅이 용이하지 않다..

3.      Ajax 요청을 남발하여 사용하게 되면 역으로 서버에 부하가 늘 수 있어서 필요한 

   부분에서만 적절히 사용하는 것이 효율적이다.

* Submit이란?

동기방식으로 DOM(HTML)을 그릴 때 쓴다.

메인화면이 생기고 View가 DOM을 그리는 상황이 Submit이다.

전체페이지 절반이상을 바꿔야한 상황에서는 Submit을 사용한다.

Node.js 실습환경 구축

프로젝트 폴더생성

윈도우 바탕화면 또는 사용자 계정폴더 아래에 설치

방법1. 바탕화면 > [brackets_nodejs] 폴더생성 > [Node.js]하위폴더생성

방법2. 로컬디스트(C:) > 사용자(또는 User) > 본인계정폴더 

> [brackets_nodejs] 폴더생성 > 하위폴더에 [Node.js]하위폴더생성

[Brackets 확장기능]

NodeJs Integration 설치

위의 확장기능을 이용하여 브라켓내에서 Node를 바로 실행시킬 수 있다.

!테스트해보기!

Brackets 실행

파일>폴더열기 메뉴

생성해뒀던 [brackets_nodejs] 하위폴더 [Nodejs] 폴더지정

[파일만들기] - (파일명) test1.js 파일생성

자바스크립트 간단한 코드입력

console.log('Hello'};

명령프롬포트(CMD)에서 실행하기

해당 폴더로 cmd 쉽게 접근방법

파일탐색기>brackets_nodejs>Nodejs 

메뉴아래 폴더위치부분 클릭 - 폴더위치 파란색영역으로 변화됩니다.

한번 더 클릭 - cmd 입력 후 엔터

해당폴더내의 명령프롬프트(CMD)창이 바로 실행됩니다.

명령프롬프트에서 js파일 실행시키기

node test1.js  엔터

'Hello'가  정상출력이된다면 제대로 세팅완료!