z-index 속성은 대게 정수값을 가지며, 높은 숫자를 가진 요소가 상위에 표시됩니다. 같은 z-index 간에는 HTML 코드상 나중에 등장하는 요소가 상위에 표시됩니다.


z-index 값을 지정하기 위해서는 해당 요소의 position 속성이 relative, absolute, fixed 중 하나여야만 합니다.


z-index의 값은 같은 depth의 요소끼리 비교하는 것이 원칙입니다.


z-index의 기본값은 auto이며, 이 경우 브라우저는 그 요소를 제쳐두고 자식 요소의 z-index 값을 비교대상으로 삼습니다. (단, Internet Explorer 7에서는 z-index의 기본값이 0인 버그가 있습니다.)




출처: http://dev.epiloum.net/904


'programing > html5&css3' 카테고리의 다른 글

html/css - 메뉴바 만들기  (0) 2018.04.04
html/css - id와 class, 우선적용 순위  (0) 2018.04.04
앱 웹 전화, 문자, 이메일, 영상전화 링크 걸기  (0) 2018.03.22
CSS3 - 고정된 사이드바 메뉴 만들기  (0) 2018.03.14
CSS3 - button 버튼 왼쪽 정렬  (1) 2018.03.14

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Portfolio</title>

 

<style>

    /*reset*/

    *{margin: 0px; padding: 0px;}

    li{list-style: none;}

    a{text-decoration: none;}

   

    /*common*/

    .wrapper{width: 1170px; margin: 0 auto;}

    .clearfix{content: ''; display: block; clear: both;}

   

    /*header*/

    header{height: 75px; background-color: #006F84; border: 1px solid #253342;

            positon: fixed; width: 100%; z-index: 9999; top: 0; left: 0;}

    h1{color: white; line-height: 75px; float: left;}

    .menu{float: right;}

    .menu li{float: left;}

    .menu a{line-height: 75px; color: white; padding: 0 15px; display: block;}

</style>

 

</head>

 

 

<body>

    <header>

         <div class="wrapper">

             <h1>Portfolio</h1>

             <nav>

                  <ul class="menu">

                      <li><a href="#">home</a></li>

                      <li><a href="#">about me</a></li>

                      <li><a href="#">photo</a></li>

                      <li><a href="#">time</a></li>

                  </ul>

             </nav>

         </div>

    </header>

</body>

</html>






출처: http://ironsky.tistory.com/21

'programing > html5&css3' 카테고리의 다른 글

html - z-index  (0) 2018.04.04
html/css - id와 class, 우선적용 순위  (0) 2018.04.04
앱 웹 전화, 문자, 이메일, 영상전화 링크 걸기  (0) 2018.03.22
CSS3 - 고정된 사이드바 메뉴 만들기  (0) 2018.03.14
CSS3 - button 버튼 왼쪽 정렬  (1) 2018.03.14


package exam;


import java.io.IOException;

import javax.servlet.ServletConfig;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


@WebServlet("/LifeCycleServlet")

public class LifeCycleServlet extends HttpServlet {

private static final long serialVersionUID = 1L;


    public LifeCycleServlet() {

        System.out.println("생성!");

    }


public void init(ServletConfig config) throws ServletException {

System.out.println("init 호출!");

}


public void destroy() {

System.out.println("destroy 호출!");

}


protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

System.out.println("service 호출!");

}


}




처음 run 실행 시:

생성!

init 호출!

service 호출!





반복 호출 시:

service 호출!

service 호출!





init의 문구를 변경하면:

(destroy되고 재생성)

destroy 호출!

생성!

init 수정 호출!

service 호출!





출처: edwith | 부스트코스 - Full-Stack Web Developer


'programing > Java' 카테고리의 다른 글

Servlet 기본 출력  (0) 2018.04.04
Spring frameworkm 개발환경설정  (0) 2018.04.03
자바 - 정해진 숫자를 오름차순/내림차순으로 정렬하기  (0) 2018.03.05
점프 투 자바 - 인터페이스  (0) 2018.03.02
점프 투 자바 - 메소드  (0) 2018.02.28


response.setContentType("text/html; charset=utf-8");

==>

response.응답을 할건데

setContentType이런 타입으로 보내줄거야

("text/html")text타입이고 html형식으로 보내줄거야

charset=utf-8해석방식으로 해석해야해




PrintWriter out = response.getWirter();

==>

PrintWriter 객체가 리턴됨

아웃이라는 통로가 마련된 것임




out.print("<h1> 1-10까지 출력 ! <h1>");

==>

ln 안 써도 됨, 어차피 html이라 br태그 써야 개행(엔터, 한 줄 밑으로 내리는 것)됨




for(int i=1; i<=10; i++){

out.print(i + "<br>"); 

}



out.close();

==>

객체 닫아주기




package exam;


import java.io.IOException;

import java.io.PrintWriter;


import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


/**

 * Servlet implementation class TenServlet

 */

@WebServlet("/Ten")

public class TenServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

       

    /**

     * @see HttpServlet#HttpServlet()

     */

    public TenServlet() {

        super();

        // TODO Auto-generated constructor stub

    }


/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html; charset=utf-8");

PrintWriter out = response.getWriter();

out.print("<h1> 1-10까지 출력 ! <h1>");

for(int i=1; i<=10; i++){

out.print(i + "<br>"); 

}

out.close();

}



}





출처: edwith | 부스트코스 - Full-Stack Web Developer

'programing > Java' 카테고리의 다른 글

Servlet의 Lifecycle  (0) 2018.04.04
Spring frameworkm 개발환경설정  (0) 2018.04.03
자바 - 정해진 숫자를 오름차순/내림차순으로 정렬하기  (0) 2018.03.05
점프 투 자바 - 인터페이스  (0) 2018.03.02
점프 투 자바 - 메소드  (0) 2018.02.28

DOM node?

html dom은 node-tree로, html document를 여긴다.

tree안의 모든 node들언 서로 관계를 가지고 있다.

node 객체는 DOM객체 가운데 가장 최상위 객체이자 모든 하위 노드 객체들이 상속받는 객체이다.


hover? 

마우스 오버

'programing' 카테고리의 다른 글

csv 한글 깨짐 현상  (0) 2018.05.09
[통계] 귀무가설, 대립가설, p-value  (0) 2018.05.03
WAS (Web Application Server)  (0) 2018.04.04
browser의 동작  (0) 2018.04.04
HTTP / 웹 프론트엔드와 백엔드  (0) 2018.04.04

html

  • id-고유 값, 하나만 사용해야 함
  • class-보통 중복으로 사용함




css


div>ul>li*2하고 엔터치면 자동생성


  • 배치와 관련한 속성(border, padding 등)은 상속을 받지 않음

ex) 여러개 div가 있다면, border는 가장 상위에 적용되서 하나만 생기고, color는 전체에 다 적용됨


  • inline>internal>external 순으로 우선적용됨

(html에 쓰인 것>html에 style 선언하여 쓰인것>외부파일 .css로 선언한 것)


  • 나중에 적은 것이 우선 적용됨


  • 구체적으로 표현된 것이 우선 적용됨


  • class(.) > id(#) > element(div 등) 순으로 우선 적용







출처: edwith | 부스트코스 - Full-Stack Web Developer


'programing > html5&css3' 카테고리의 다른 글

html - z-index  (0) 2018.04.04
html/css - 메뉴바 만들기  (0) 2018.04.04
앱 웹 전화, 문자, 이메일, 영상전화 링크 걸기  (0) 2018.03.22
CSS3 - 고정된 사이드바 메뉴 만들기  (0) 2018.03.14
CSS3 - button 버튼 왼쪽 정렬  (1) 2018.03.14

WAS (Web Application Server)

미들웨어 중 하나로 웹 클라이언트(보통 웹 브라우저)의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하는 목적이다.




웹서버는 정적인 컨텐츠

WAS는 동적인 컨텐츠




웹 서버 없이, WAS만 있어도 정적인 컨텐츠 처리가능하며, 성능상 큰 차이가 없음.

단, 규모가 커질수록 장애 극복 가능하도록 웹 서버와 WAS를 분리한다.





출처: edwith | 부스트코스 - Full-Stack Web Developer

'programing' 카테고리의 다른 글

[통계] 귀무가설, 대립가설, p-value  (0) 2018.05.03
DOM node/hover  (0) 2018.04.04
browser의 동작  (0) 2018.04.04
HTTP / 웹 프론트엔드와 백엔드  (0) 2018.04.04
무료 도메인 사이트  (0) 2018.03.28

browser의 동작


디버그? 

개발 마지막 단계에서 프로그램 오류(버그)를 발견하고 그 원인을 밝히는 작업.



컴파일? 

고급언어(인간이 구분하기 쉬운 언어)로 작성된 프로그램을 기계어(컴퓨터 등 기계가 이해할 수 있는 언어)로 번역하는 것



컴파일러? 

컴파일 처리하는 프로그램



파싱(Parsing)? 

컴퓨터가 문장 단위의 문자열을 토큰으로 분류하고 이를 구문트리로 재구성하는 구문 분석 과정(언어를 해석하는 과정)



markup?

문서 정보 전달을 위헤 문서 데이터에 추가된 텍스트



Render tree?

DOM(Document Object Model tree? html, xhtml, xml을 태그의 포함 관계에 따라 DOM 객체들을 트리 구조로 만드는 것. 



px = 화소


{}=a brace

()=parenthesis




네이버 For developers, by developers

http://d2.naver.com/home


웹 브라우저 작동에 대하여

http://d2.naver.com/helloworld/59361


위 해석본의 원문

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/




출처: edwith | 부스트코스 - Full-Stack Web Developer

'programing' 카테고리의 다른 글

DOM node/hover  (0) 2018.04.04
WAS (Web Application Server)  (0) 2018.04.04
HTTP / 웹 프론트엔드와 백엔드  (0) 2018.04.04
무료 도메인 사이트  (0) 2018.03.28
웹 사이트 / 모바일 사이트 속도 분석하기  (0) 2018.03.17

HTTP

서버~클라이언트가 인터넷상 데이터를 주고 받기 위한 프로토콜


  • 포트 값 80
  • Stateless(무상태) 프로토콜: 클라이언트/서버 계속된 연결 상태가 아니고, 연결을 끊어버림 -> 쿠키 등장
  • 서버/클라이언트 모델을 따름
  • 하나의 서버가 많은 응답/요청 처리 가능





웹 프론트엔드의 역할


웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML

적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS

사용자 요청을 잘 반영해야 합니다.(소통하듯이) - JavaScript






웹 백엔드 개발자가 알아야 할 것들


  • 프로그래밍 언어(JAVA,  Python, PHP, Javascript 등)
  • 웹의 동작 원리
  • 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
  • 운영체제, 네트워크 등에 대한 이해
  • 프레임워크에 대한 이해(예: Spring)
  • DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)





사이트(어떤 사이트인지 아직 파악 못 함)

http://html-css-js.com/





출처: edwith | 부스트코스 - Full-Stack Web Developer

'programing' 카테고리의 다른 글

WAS (Web Application Server)  (0) 2018.04.04
browser의 동작  (0) 2018.04.04
무료 도메인 사이트  (0) 2018.03.28
웹 사이트 / 모바일 사이트 속도 분석하기  (0) 2018.03.17
sublimetext3 설치 및 한글 사용이 편리하도록 변경하기  (0) 2018.03.07

Spring frameworkm 개발환경설정


Eclipse marketplace에서 spring tools suite(STS) for Eclipse Kepler 검색한 후 설치

'programing > Java' 카테고리의 다른 글

Servlet의 Lifecycle  (0) 2018.04.04
Servlet 기본 출력  (0) 2018.04.04
자바 - 정해진 숫자를 오름차순/내림차순으로 정렬하기  (0) 2018.03.05
점프 투 자바 - 인터페이스  (0) 2018.03.02
점프 투 자바 - 메소드  (0) 2018.02.28

+ Recent posts

티스토리툴바