자바 수업 정리 -선택자, 시멘틱, servlet(26 일차)

IT 면접족보/자바 면접족보

자바 수업 정리 -선택자, 시멘틱, servlet(26 일차)

낙산암 2020. 12. 30. 16:47

!-- 키워드 값 -->
overflow: visible;   <!--content is not clipped --> 
overflow: hidden;    <!-- no scrollbars are provided --> 
overflow: clip;     
overflow: scroll;    <!-- always show scrollbars --> 
overflow: auto;      <!-- append scrollbars if necessary --> 
overflow: hidden visible;

<!-- 전역 값 -->
overflow: inherit;
overflow: initial;
overflow: unset;

1. 선택자(Selectors)란?

CSS에서 선택자는 스타일을 주고 싶은 요소를 선택하기 위해 사용 되는 일종의 패턴이다. (= 스타일로 꾸미는 것!)

선택자 종류 (배운 것)

* (asterisk) 전체 선택자

모든 요소를 선택함
<style> *{font-size:10px;} </style>

element / tag 선택자

id 특성에 따라 특정 요소(태그)를 선택함
문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 함
id="firstname"** 형태로 지정
스타일 지정시에 #id 형태로 사용! <style> #id{font-size:10px;}</style>

id 선택자

#을 맨 앞에 붙여 사용 **#id이름{ 속성1:속성값; 속성2:속성값; }**
원칙적으로 한 문서에서 단 하나의 요소에만 스타일을 적용할 수 있다.

→ 페이지 내에서 특정 위치나 태그를 지정하는 것이기 때문

class 선택자

.을 맨 앞에 붙여 사용 **.class이름{ 속성1:속성값; 속성2:속성값 }**
복수의 여러 요소에 스타일을 적용할 수 있다.
하나의 class는 한 문서에서 여러번 사용 가능하다.

2. CSS 문법은?

html을 꾸미는 것을 말한다. (색상, 폰트, 백그라운드, 크기 등 전체를 다 꾸밀 수 있다.)
<style>태그를 사용해 안쪽에 꾸밀 내용을 작성한다.
선택자를 활용해 스타일을 지정함으로써 중복되는 코드를 줄일 수 있다.
스타일 지정시 작성 위치 <head><style> 여기에서 스타일 지정 </style></head>
스타일을 *, p, h1 에서 중복 지정하면 자기 자신게 먹는다.

3. 시멘틱(Semantic) 태그에 대하여 설명하고, 그 종류는?

Semnatic 의미

HTML5이전에는 <div> 태그를 활용하여 <div id = "nav"> , <div class = "header"> , **<div id = "footer">와 같이 묶어주었다.
HTML5 이후 Semantic이 등장해서 Semantic을 활용하는 쪽으로 바뀌고 있지만 아직까지 div 태그를 많이 사용하고 있기도 하다.
태그에 의미를 넣은 것을 말한다. ( <div> + 의미 )
<div><span>등은 non-semantic 요소이다. (포함하는 콘텐츠에 대한 설명이 없는 태그)

Semantic 종류

<header>

제목, 소개 내용이나 탐색 링크의 집합
<h1>-<h6>, 로고 or 아이콘, 저자 정보 등이 포함 될 수 있다.

<footer>

문서나 section의 바닥 글(꼬리글)을 정의함
저자정보, 저작권 정보, 연락정보, 사이트맵, 맨 위로 링크, 관련 문서 들이 포함됨

<nav>

navigation
문서 부분 중 현재 페이지 내, 다른 페이지로의 링크를 보여주는 구획을 나타냄
메뉴, 목차, 색인 등이 포함 될 수 있다.

<main>

주요 콘텐츠를 나타냄
문서의 핵심 주제나 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어짐

<article>

문서, 페이지, 애플리케이션, 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
게시판, 블로그 글, 매거진, 뉴스 기사 등이 포함 될 수 있다.

<section>

html 문서의 독립적 구획을 나타냄 (문서의 섹션을 정의함)
보통은 제목을 포함함 <h1>, <2>등등

<aside>

문서의 주요 내용과 간접적으로 연관된 부분을 나타냄
주로 사이드바, 콜아웃 박스로 표현함
문서 <body>의 주요 콘텐츠를 나타낸다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결 됐거나 확장하는 콘텐츠로 이루어진다.

<details>

"열림"상태 일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성함
<summary>나 레이블은 요소를 통해 제공함

<summary>

<details>의 상자에 대한 요약, 캡션 또는 범례를 지정
클릭하면 <details>의 상태가 열리거나 닫힌다.

→ 이것이 <details>와 <summary>이다.
<summary>

<figure>

독립적인 컨텐츠 표현
<figcaption>으로 설명을 붙일 수 있다.
figure, 콘텐츠(img 등), <figcaption>은 하나의 단위이다.

<figcaption>

캡션, <figure>가 포함하는 이미지 등의 다른 콘텐츠에 대한 설명, 혹은 범례를 나타냄

<mark>

현재 맥락에 관련이 깊거나 중요해서 표시 또는 하이라이트 한 부분을 나타냄 (형광펜!)

<time>

시간의 특정 지점 또는 구간을 나타냄
dateteime=""으로 속성을 지정해서 보다 적절한 검색 결과, 알람같은 특정 기능을 구현할 때 사용한다.
나타낼 수 있는 시간: 24시간 표기법 시계의 시간, 그레고리력 날짜(시간대 정보 포함 가능), 유효한 시간 범위

4. bootstrap 에 대하여 설명하시오.

등장 배경

트위터 직원인 Mark Otto와 Jacob Thornton가 Twitter Blueprint를 개발 후 github에 오픈소스로 발표되면서 부트스트랩이라는 이름을 가지게 되었고, 이후 많은 개발자들이 프로젝트에 투입되어 프레임워크 형태로 발전되었다. 현재도 수많은 관련 프로젝트가 있고, 계속 발전중이다.

특징

Bootstrap 은 반응형, 모바일 우선 front-end 웹 개발을 위한 무료의 오픈소스 html, css, JavaScript framework 이다. (framework → 재사용이 가능하다)
타이포그래피, 양식, 버튼, 입력 폼, 아이콘, 메뉴바, 페이지 이동 바 등 웹 페이지에 많이 쓰이는 요소들을 거의 다 내장하고 있다.
그래서 부트스트랩을 사용하면 작성 해야 하는 코드의 양을 줄일 수 있다. 만들어진 템플릿을 기반으로 사용하기만 하면 된다. (사용이 쉬움)
반응형으로 되어있어서 모든 디바이스에 적용할 수 있다는 장점이 있다.
모든 브라우저와도 호환된다.
오픈소스이고 상업적 이용도 가능하다. (유로로 판매하는 경우도 있다.)
공동 작업시 서로 다른 인터페이스 사용으로 인해 복잡하고 방대한 코드에 대한 관리가 어려운 점을 해결할 수 있다. → 일관성 유지 가능
하지만 부트스트랩을 사용했는지 알아볼 수 있다는 단점도 있다.

5. overfolw 에 대하여 설명하시오.

콘텐츠가 너무 커서 요소의 블록 서식에 맞출 수 없을 때 처리하는 방법을 지정함

<!-- 키워드 값 -->
overflow: visible;   <!--content is not clipped --> 
overflow: hidden;    <!-- no scrollbars are provided --> 
overflow: clip;     
overflow: scroll;    <!-- always show scrollbars --> 
overflow: auto;      <!-- append scrollbars if necessary --> 
overflow: hidden visible;

<!-- 전역 값 -->
overflow: inherit;
overflow: initial;
overflow: unset;

visible

콘텐츠를 자르지 않고 박스 공간을 벗어나서도 표시됨

hidden

콘텐츠를 안쪽 여백 상자에 맞추기 위해 박스 공간을 넘어가면 잘라냄 (보이지 않음)

clip

hidden과 마찬가지로, 콘텐츠를 안쪽 여백 상자에 맞춰 자른다.

scroll

콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라내고 보이지 않는 부분은 스크롤바를 제공해 볼수 있도록 함
다 보이더라도 무조건 스크롤바 생성

auto

스크롤바가 보이는 여부를 client(browser)가 결정
콘텐츠가 박스 공간에 들어간다면 visible과 동일하게 보이고, 콘텐츠가 공간을 넘어가면 스크롤바 생성함

overlay

auto와 동일하게 동작하지만, 스크롤바가 공간을 차지하는 대신 콘텐츠 위에 위치함 Webkit(Safari 등)과 Blink(Chrome 또는 Opera 등) 기반 브라우저만 지원

6. class 와 id 선택자의 차이와 어떨 때 사용하는가?

태그의 id와 class를 이용하여 CSS에서 속성을 설정 할 수 있다.
우선순위는 id > class > tag 순으로 적용된다.

id 선택자 (#id)

#을 맨 앞에 붙여 사용 **#id이름{ 속성1:속성값; 속성2:속성값; }**
원칙적으로 한 문서에서 단 하나의 요소에만 스타일을 적용할 수 있다. (유일 해야 함! 중복되면 안된다!!!)

→ 페이지 내에서 특정 위치나 태그를 지정하는 것이기 때문

class 선택자 (.class)

.을 맨 앞에 붙여 사용 **.class이름{ 속성1:속성값; 속성2:속성값 }**
복수의 여러 요소에 스타일을 적용할 수 있다. (중복 가능)
하나의 class는 한 문서에서 여러번 사용 가능하다.

7. Servlet의 생명주기에 대하여 설명하시오.

Servlet은 최초 요청 시 객체가 만들어져 메모리에 올라가고, 이후 요청 시에는 기존의 객체를 재활용한다. 그래서 동작 속도가 빠르다.

Servlet 작동순서

클라이언트에서 servlet 요청이 들어오면 서버에서는 servlet 컨테이너를 만들고, 요청이 있을 때마다 스레드가 생성된다.

웹브라우저 → 웹 서버 → 웹 어플리케이션 서버 → Servlet 컨테이너

스레드 생성
Servlet 객체생성

Servlet 라이프사이클(생명주기)

Servlet 객체생성 (최초 한번)

→ Init() 호출(최초 한번)

→ service(), doGet(), doPost() 호출 (요청시 매번)

→ destroy() 호출 (마지막 한번, 자원 해제: 서블릿 수정, 서버 재가동 등)

initPostConstruct() init()함수는 한번만 실행되고, 새로고침 하면 doGet()함수만 반복적으로 실행되는 이유

실행되면 객체를 생성 하면서 메모리에 올라가기 때문에 계속 새로 띄우는게 아니고 실행만 시키는 것!

'IT 면접족보 > 자바 면접족보' 카테고리의 다른 글

자바 수업 정리 -css-display,font,overflow \| jsp-정적/동적문서, tags(28일차) (1)	2021.01.05
자바 수업 정리 -jsp_한글(다국어)처리,초기화 파라미터, ServletContextListener/ css_선택자(27 일차) (0)	2020.12.31
자바 수업 정리 -HTML \| doGet(),doPost(),Context Path(25 일차) (0)	2020.12.30
자바 수업 정리 -웹 프로그램의 동작,Tomcat, JSP와 Servlet문서 작성(24 일차) (0)	2020.12.28
자바 수업 정리 -컬렉션 클래스- TreeSet<E>,Queue<E>&Stack,Map<K, V>,정렬,찾기(23 일차) (1)	2020.12.24

현재글자바 수업 정리 -선택자, 시멘틱, servlet(26 일차)

쿵스보이

IT 관련 블로그 입니다.

React 개요, 로또 #제이쿼리 #jquery, BMI #Bmi, java #자바 #면접족보, 자바, 자바채팅, 화폐매수, 리액트 #리덕스, React - 프로젝트 생성, 동적생성 #ajax #jsp, 자바 #자바면접족보 #java, 게시판 db 설계, 리액트 설치, 로또 #lotto, 스프링 부트 #spring boot, 자바 #스트림 #자바스트림, 이벤트 핸들러 구현 #자바에서의 callback, IT 면접요령, 웹브라우저 #소켓구현, 자바 코딩이 잘 안될 경우,

Today :
Yesterday :

쿵스보이