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 컨테이너

  1. 스레드 생성

  2. 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

'IT 면접족보/자바 면접족보'의 다른글

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

관련글

티스토리툴바