자바 수업 정리 -css-display,font,overflow | jsp-정적/동적문서, tags(28일차)

1. display 종류와 속성에 대하여 설명하시오.

• 화면에 어떻게 보이는지를 설정하는 속성으로 block, inline, inline-block 속성값이 있다.
• 모든 태그는 block, inline, inline-block 이 셋 중 하나이다.
• visibility:hidden;(자리는 차지하지만 보이지 않음)은 display:none;(아얘 없는 취급해서 화면에 출력 안함)과 다른 개념이다.

block

• display:block;
• 전 후 줄바꿈(개행)이 일어난다.(한 줄을 다 차지)
• 대표적으로 <div>,<p>,<h1>~<h6> 태그 등이 있다.
• inline element와 달리 width, height, margin, padding 속성이 모두 반영된다.
• 해당 태그는 명시적으로 지정하지 않아도 자동으로 block으로 디스플레이 된다.

inline

• **diplay:inline;**
• 전 후 줄바꿈 없이 한 줄에 다른 elemet들과 나란히 배치된다.
• 대표적으로 <span>, <a>,<em>등이 있다.
• 주의할 점! width, height를 지정해도 무시된다.(안먹음!) 왜? 해당 요소의 공간 만큼만 차지하고 있기 때문에
• margin과 padding 속성은 좌, 우 간격만 반영되고 상, 하 간격은 반영되지 않는다.
• 해당 태그는 명시적으로 지정하지 않아도 자동으로 inline으로 디스플레이 된다.

inline-block

• **display:inline-block;**
• inline element 처럼 전후 줄바꿈(개행) 없이 한 줄에 나란히 배치된다.
• 대표적으로 <button>, <select>등이 있다.
• inline-block element는 명시적으로 **display:inline-block;** 와같이 지정해야만 한다.

2. px 과 em 의 차이는? (font)

px (pixel)

• pixel 기준 사이즈를 말함, 웹에서의 기본 단위

• 픽셀이란? 디스플레이를 구성하고 있는 최소 단위(가장 작게 찍을 수 있는 점)로 하나의 글꼴이 화면에 출력될 때 그 글꼴이 차지하는 화면 최소 구성 요소 (픽셀)의 수를 나타냄 (picture elemet의 합성 신조어) 상대 단위! (cm,mm는 절대 단위)

   

   

• 해상도에 의해 결정되는 단위 → 출력 장치에 표현되는 전체 픽셀의 갯수와 밀도에 따라 결정됨
• px값으로 폰트 크기를 지정하면 기본 크기(16px)는 무시되고 지정한 px 값으로 크기가 설정된다.
• 하나의 요소를 수정할 경우 어우러지는 나머지 요소의 값들도 전부 수정해야 하기 때문에 유지보수가 어려운 측면이 있다. (1억개라면..!!!)
• 픽셀 단위로 값을 설정할 경우 클라이언트가 브라우저의 폰트 기본 값을 변경할 경우 적용되지 않아 사용성을 떨어트리기 때문에 경우에 따라 권장하지 않기도 함 ( ctrl + / - 의 경우 해당 안됨)

em (엠)

• 기원: 금속활자 M의 크기를 기준으로 만들어짐

• 최초 기준점은 html(root)기본 폰트 사이즈 (보통 16px)

• 상위 요소를 기준으로 해서 배수로 크기를 정함(상대적) → 그래서 사용하기 어렵기도 하다.

• 상대적인 비율 단위로 움직이기 때문에 px단위에 비해 유지 보수가 훨씬 쉽다. → 활용 빈도가 가장 높다.

• 폰트 사이즈는 상속이 되기 때문에 남용하면 문제가 될 수 있다. → 계산이 복잡해지고 소수점 단위가 나올 경우 지원 해주지 않는 브라우저도 있다.

• 1em은 100% → .5em은 50%, 0.75em은 75% 3em은 300% 로 생각하면 된다.

• 예시 : font-size: 2em; 은 글자 크기를 상위 요소 크기의 2배로 하겠다는 뜻 (배수로!)

3. inline-block 태그의 종류는?

대표적인 inline-block 태그에는 button과 select가 있다.

 

 

<select>

• <select> 태그는 드롭 다운 목록을 만드는데 사용된다.
• <select>내부에 <option>태그를 통해 고르는 기능을 넣음
• <optgroup>태그로 <option>을 다시 분류할 수 있음

4. opacity 속성 사용법은?

 

• opacity는 투명도를 조절하는 속성이다.

• opacity:70%; 나 *opacity:0.4; 의 방법으로 사용할 수 있다. (1.0이 원래 색상의 100% → 0.0이 원래 색상의 0% : 투명한 상태)

5. display:none; 과 visibility:hidden;의 차이는?

 

display:none;

• 요소가 마치 없는 것 처럼 페이지에 디스플레이 되도록 숨기는 것을 말한다.
• 그렇기 때문에 레이아웃에 영향을 미치지 않는다.

visibility:hidden;

• visibility:hidden;또한 숨기고 싶을 때 사용한다.
• 하지만 요소가 보이지는 않지만 보일 때와 동일한 만큼의 공간을 차지하고 있다. → 레이아웃에 영향을 미친다.

7. 동적문서와 정적문서의 차이는?

정적 문서 (static)

• 일반적인 html 문서

• 서버에 미리 저장된 파일(html)이 그대로 전달되는 웹 페이지를 말함 ( 미리 작성된 콘텐츠는 페이지가 로드 될 때마다 동일 )

• 클라이언트는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 된다.

• 장점: 요청한 파일을 그대로 전송하기 때문에 추가 작업이 없어 빠르고, 비용이 적게 든다.

• 단점: 저장된 정보만 보여줄 수 있기 때문에 서비스가 한정적이고, 추가 수정 삭제 등의 작업을 수동으로 해줘야해서 관리가 힘든 단점이 있다.

동적 문서 (dynamic)

• 프로그래밍 요소가 들어간 페이지

• 서버는 클라이언트의 request를 해석해 데이터를 가공한 후 생성된 결과를 웹 페이지로 보낸다.

  → 즉, 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됨! (실행중에 달라지는 문서)

• 장점: 다양한 정보를 동적으로 생성해 제공할 수 있어 다양한 서비스 제공이 가능하며, 웹사이트의 구조에 따라 관리하는 작업이 용이하다.

• 단점: 데이처를 처리하는 과정이 필요하기 때문에 상대적으로 정적 문서에 비해 느리고, 추가 비용이 든다. (웹 어플리케이션 서버 필요)

페이지를 동적으로 만드는 방법

• 서버쪽: java-JSP(servlet), C#-ASP.NET, PHP , (javascript) 가장 높은 시장 점유율을 가진것은 php (하지만 은행권에서는 보안문제로 jsp를 사용한다.)
• 클라이언트 쪽: javascript (javascript는 현재 양쪽에서 모두 사용 가능)

8. 아래를(JSP 태그) 설명하시오.

지시자      : <%@     %>  : 페이지 속성
주석       : <%--  --%>  / html은 <!-- -->
선언       : <%!     %>  : 변수, 메소드 선언
표현식      : <%=     %>  : 결과값 출력
스크립트릿   : <%     %>   : JAVA 코드 → 자바 문법 들어감!
액션태그     : <jsp:action>  </jsp:action> : 자바빈 연결 등

지시자 (directive)

• JSP페이지의 전체적인 속성을 지정해 웹 컨테이너에 지시함
• jsp 페이지의 번역과 실행 과정에 사용 되는 정보를 지정하는 용도로 사용됨
• page, include, taglib 가 있으며, **<%@ 지시어이름 속성="값", 속성2="값" %>**형태로 사용
• import할 때 도 쓴다.(page 지시어 속성 중 하나) → 이클립스에서 자동 완성으로 작성해 줌
• 지시문은 키-값 쌍으로 나열하고 쉼표로 구분할 수있는 여러 속성을 가질 수 있다.

선언 (declaration)

• 스크립트릿이나 표현식에서 사용되는 서블릿 클래스의 변수 또는 메소드를 선언할 때 사용 한다.(선언된 변수 및 메소드는 전역의 의미로 사용됨) → 메소드, 변소는 사용 전에 반드시 먼저 선언 되어야 함
• 하나 이상의 완전한 문을 포함해야한다.

표현식 (expression)

• JSP페이지 내에서 사용 되는 변수, 수식의 값을 출력하기 위해 사용 된다.
• 결과값은 String 타입이다.
• 표현식의 값이 문자열로 변환되기 때문에 jsp파일의 텍스트 내에서는 표현식을 사용할 수 없다.
• 사용 방법 : **<%= 이곳에 출력될 값 or 수식 입력 %> →** ‘;’ (세미콜론)을 사용 할 수 없다.
• scriptlet과의 차이

1. scriptlet은 어떤 결과도 html에 표시하지 않고, 선연된 변수는 로컬 범위에만 있어서 jsp의 다른 곳에서 접근할 수 없는 반면, expression 태그는 결과를 문자열로 html에 삽입한다.
2. expression 태그는 출력을 위해 out.println을 작성할 필요가 없다.

스크립트릿 (scriptlet)

• 사용 방법 : <% 여기에 java source code 삽입 %>
• jsp문서 안에 java 코드 조각을 넣기 위한 방식 중 하나로 가장 일반적으로 사용됨
• 서블릿 클래스의 서비스 메소드(doGet(), doPost()) 안에서 반영됨

액션 태그

• JSP 페이지에서 특별한 기능을 제공하는 표준 액션
• 요청을 처리할 때 미리 정해진 어떤 기능(이미 만들어놓은 기능)을 수행하는 것을 말한다.
• 공통으로 사용 되는 페이지들은 코드의 중복을 피하기 위해 분리할 필요가 있다. jsp페이지를 어떻게 모듈화 시켜서 재사용 할 수 있는지에 대한 고민의 결과 중 하나이다.
• 다른 말로 "표준 액션", "기본 액션 태그"라고도 한다.
• 특별한 선언 없이 jsp라는 접두사를 붙여 태그명을 명시 하면 컨테이너가 인식해서 수행한다.
• 사용자 정의 태그(jstl)과 구분하자.