StudyServer
web, server, java, spring 등.. 공부한 것을 기록하는 장소 입니다. 공부하면서 정리하였기 때문에 틀린 내용이 있을 수 있습니다. 이야기 해주시면 수정하겠습니다.
HOME /About /algorithmus /db /front /git /java /ml /search /server /spring

javascript eclipse 자동완성(with tern)

2018-12-11 00:00:00 +0000
  • Help - Install New Software 선택
  • Work with에 http://oss.opensagres.fr/tern.repository/1.2.0/ url 넣기
  • Tern-Embed Node.js, Tern IDE, Tern Tooling 3개 박스 체크
  • Install
  • 이클립스 재시작 후 프로젝트 오른쪽 클릭, Configure-Convert to Tern Project 선택
  • JavaScript-Tern-Modules 에서 Browser, CKEditor, jQuery 체크

CSS position

2018-12-10 00:00:00 +0000

position

  • html에서 위치 지정, 객체 보임, 안보임 여부
  • static : 기본값으로 일반적인 내용물의 흐름. 상단과 좌측에서의 거리를 지정할 수 없음.
  • relative : 상대적인 위치로, top, left 거리르 지정
  • absolute : 자신의 상위 box 속에서의 top, left, right, bottom 등의 절대적인 위치를 지정
  • fixed :스크롤이 일어나도 항상 지정된 위치에 고정되어있음
  • 만약 부모-자식 오브젝트 관계라면 부모 기준으로 자식위치를 설정할 수 있다
  • 부모위치 기준일 때 부모는 반드시 position이 relative 속성이여야 한다

top, left, bottom, right

  • 4개의 위치 중 하나를 정해서 px, %(퍼센트)단위 만큼 떨어진 곳에 위치하게 된다
  • 예를 들어 top:50px left:50px 일 경우 top, left 각각 50px 떨어진 곳에 위치한다

float

  • float 속성은 박스가 화면의 어느 위치에 배치할 것 인지 설정하기 위해 사용
  • left 설정 시 왼쪽에 배치되고, 오른쪽에는 글씨가 올 수 있게 된다

width, height

  • 해당 오브젝트의 길이값을 설정

  • px, %(백분율)로 나타낼 수 있습니다

  • position, selector 등을 사용하는 예제
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>레이아웃 연습하기</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
       
       #menu ul li{
       list-style-type:none;
       display:inline;
       margin-left: 30px;
       }
       
       a{
             text-decoration: none;
       }
       
       #menu ul{
             background: #B9FFFF;
             width:80%;
             position:static;
             margin:50px 1px 50px 1px;
             padding: 50px 1px 50px 1px;
             border-bottom: 1px solid;
             border-top: 1px solid;
       }
       
       #balm{
             float:left;
       }
       #content1{
             float:left;
             width: 40%;
             margin-right: 20px;
       }
       
       #content2{
             margin-bottom:70px;
             margin-left: 40%;
             margin-right: 20%;
             text-indent: 50px;
       }
       
       #infolist li{
             list-style-type:none;
             display:inline;
             margin-left: 10px;
             text-decoration: none;
             
       
       }
       #infolist a{
                    border-right: 1px black solid;
             padding-right:20px;
       }
       
       
       dt{
       background:url("images/menu_bg.gif")no-repeat 0 0;
       margin-left: 10px;
       }
       
       dd{
       margin-left : 0px;
       margin-top: 20px;
       margin-bottom: 20px;
       }
       
       #infolist{
       padding : 5px;
       background-color:#46FFFF;
       width:80%;
       }
       
       #infolist li.first{
             border:none;
       }
</style>
</head>
<body>
<div>
       <img src="images/herblogo.jpg">
</div>
<div id="menu">
<ul>
  <li><a href="#">허브란?</a></li>
  <li><a href="#">허브의 종류</a></li>
  <li><a href="#">허브 키우는 법</a></li>
  <li><a href="#">직접 만드는 허브차</a></li>
  <li><a href="#">허브, 이렇게 활용하세요</a></li>
</ul>
</div>
<div id="content1">
<h5>허브란? </h5>
<img src="images/balm.jpg" id="balm">
<p>라틴어의 ‘푸른 풀’을 의미하는 Herba에서 유래된 말로, ‘잎, 줄기와 뿌리 등이  식용, 약용에 쓰이거나, 향기나 향미가 이용되는 식물의 총체’ 라고 할 수 있다. 즉, 잎,  줄기, 뿌리, 꽃 등을 허브의 의미에 포함하며 그 성분이 식품이나 음료속에 보존용 향신료  또는 건강증진제로서 첨가되는 식물과 식품, 음료 외에 제품에 향수, 화장, 세정의 효과를  기대하여 이용되는 식물의 전부라고 할 수 있다.현재 국내에서 일반적으로 알고 있는  허브에 대한 개념은 외국에서 도입된 식물에 한정지어 생각하는 경우가 대부분이나 사실은  이미 수 천년 전부터 우리 조상들도 생활 전반에 걸쳐 많은 곳에서 이용하여 왔다. 즉,  산야초들, 예를들면 쑥, 냉이, 씀바귀, 곰취 등 봄철식단에 반찬으로 이용된 것과 한방  처방에 들어가 있는 모든 식물들도 넓게는 모두 허브의 범주에 넣을 수 있는 것이다.</p>
<ul>
  <li>허브는 약용식물이다</li>
  <li>허브는 향기식물이다</li>
  <li>허브는 채소이다</li>
  <li>허브는 향신료이다</li>
  <li>허브는 미인을 만든다</li>
</ul>
</div>
<div id="content2">
<h5>허브의 종류</h5>
<dt>바질(Basil)</dt>
  <dd>두통, 신경과민, 구내염, 강장효과, 건위, 진정, 살균, 불면증에 좋고 젖을 잘  나오게 하는 효능이 있으며, 졸림을 방지하여 늦게까지 공부하는 수험생에게 좋다. 또한  신장의 활동을 촉진시키며 벌레 물린데에 살균효과가 있다.</dd>
<dt>캐모마일(Chamomile)</dt>
  <dd>목욕제로 쓰면 심신의 긴장을 풀어주며 전신 미용에 효과가 크다. 불면증에도 차로  마시면 좋고 감기에 발한 해열 작용, 신경통, 류마티스에 진통 진정작용, 여성의 냉증에도  좋으며 미용효과로는 식후나 취침 전 뜨거운 물 한 컵에 꽃 3~5송이를 넣고 몇 분 간  우렸다가 건져내고 마시면 좋다.</dd>
<dt>레몬밤(Lemonbalm)</dt>
  <dd>레몬밤의 차는 뇌의 활동 강화, 기억력 증진에 효과가 있어 공부하는 수험생에게  좋다. 또한 우울증을 해소시키며 해열, 발한작용이 있어 감기 초기에 조석으로 마시면  효과적이며 체력소모가 많은 여름철 청량음료로도 좋다.</dd>
</div>
<div id="infolist">
<ul>
  <li id="list_title">허브 향기 가득한 곳</li>
  <li><a href="http://www.herbisland.net/" target="_blank">포천  허브아일랜드</a></li>
  <li><a href="http://www.herbhillz.com/" target="_blank">대구  허브힐즈</a></li>
  <li><a href="http://www.herbnara.com/" target="_blank">평창 허브나라</a></li>
  <li><a href="http://www.iyherbland.co.kr/" target="_blank">일영  허브랜드</a></li>
  <li><a href="http://www.herbvillage.co.kr/" target="_blank">연천  허브빌리지</a></li>
</ul>
</div>
</body>
</html>

HTML5,CSS 선택자

2018-12-10 00:00:00 +0000

HTML, HTML5의 차이점

  • 의미를 가질 수 있도록 시멘틱한 태그가 많이 추가됨
  • Section : 제목과 단락으로 구분할 수 있을 때 사용
  • Article : Article의 내용을 뽑아서 다른 페이지에서 사용해도 이상하지 않을 때 사용(내용이 독립적일 때)
이름 설명
< section > 문서 및 애플리케이션 특정 역역 표시, h1~h6와 함께 사용
< section > 제목과 단락으로 구분할 수 있다
< header > 문서 내 소개 및 네비게이션 메뉴 모음 표시
< footer > 문서 내 꼬릿말, 저자, 저작권 정보 표시
< nav > 문서내 네비게이션 요소들 표시
< acticle > 독립적인 컨텐츠 단위 표시
< hgroup > 섹션 머리말들의 그룹으로 문서의 section의 머리부분 표시

CSS

  • 인라인 스타일 적용
  • 중첩된 소스코드가 만들어짐. 되도록 사용하지 않음. 대부분 내부 링크 방식
  • 태그가 있는 곳에 스타일을 정의한다
<h2 style="font-family:돋움,serif; font-size:30px color:blue;  background-color:yellow; ">인라인 스타일 적용</h2>
  • 내부 스타일 적용
  • 현재 html에서만 사용 가능
  • head에 스타일을 적용한다
<style type="text/css">
h3{
       font-family: 돋움, serif;
       font-size:20px;
       background:#CC9966;
}
</style>
  • 내부 링크 스타일
  • 모든 html 파일에서 사용 가능
  • 스타일 파일을 따로 빼서 정의한다
1. <link rel="stylesheet" type="text/css" href="./style.css">
2. <style type="text/css">
@IMPORT url("style.css");
</style>

선택자(selector)

  • 내가 특정 기준으로 스타일을 지정할 수
이름 설명 예제
전체 선택자 html 문서 내 모든 엘리먼트 선택 * {}
타임 선택자 매칭되는 엘리먼트 선택 h1, h2, h2{}
클래스 선택자 class 속성이 매칭되는 엘리먼트 선택 .className{}
ID 선택자 id 속성 값과 매칭되는 엘리먼트 선택 #idName{}
하위 선택자 하위 엘리먼트 선택 E1 E2{} 
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
       
       a{
       text-decoration: none;
       }
       *{
             font-size:14px;
       }
       .gold{
       color:#FFEB5A;
       }
       .orange{
       color:orange;
       }
       .silver{
       color:silver;
       }
       
       #blue_border{
       border:1px;
       border-style:dotted;
       border-color:blue;
       padding : 20px 10px ;
       margin: 20px 20px;
       display:inline-block;
       }
       
       
       #red_border{
       border:1px;
       border-style:solid;
       border-color:red;
       padding : 30px;
       }
       
       #layer1{
       padding : 20px;
       }
       
       #layer1 ul{
       list-style-type:none;
       display:inline;
       padding : 20px;
       }
       
       #layer1 ul li{
       float:left;
       border:2px;
       background: green;
       padding : 10px 10px;
       }
       
       /*태그선택자와 클래스 선택자 조합*/
       p.gold{
       background-color:black;
       }
       
       /*가상 클래스 선택자*/
       a:LINK{
       color:##FF0000;
       text-decoration:underline;
       }
       
       a:HOVER{
       color:#CC0303;
       text-decoration:underline;
       }
       
       /*속성 성택자*/
       div[title = def]{
             font-size:30px;
             font_style:italic;
             color:green;
       }
       
       a[href $=pdf]{
             font-size:30px;
             font-style:italic;
             color:orange;
       }
             
</style>
</head>
<body>
       <h3>선택자 이해</h3>
       <hr>
       
       <div title="abc">abcdef</div>
       <div title="def">defffff</div>
       
       <a href="abc.pdf">pdf파일</a>
       <a href="abc.gif">gif파일</a>
       <a href="aac.pdf">pdf파일</a>
       
       <ul>
             <li>전역선택자</li>
             <li>태그선택자</li>
             <li>클래스선택자</li>
             <li>아이디선택자</li>
             <li>후손선택자</li>
             <li>태그선택자와클래스선택자조합</li>
             <li>태그선택자와아이디선택자조합</li>
             <li>가상클래스선택자</li>
             <li>속성선택자</li>
       </ul>
       
       <div class="gold">GOLD2</div>
       
       <p class="gold">GOLD</p>
       <p class="orange">ORANGE</p>
       <p class="silver">SILVER</p>
       
       <div id="blue_border">BLUE_BORDER</div>
       <div id="red_border">RED_BORDER</div>
       
       span태그는 <span>글자선택</span>블럭 역할의 태그이다.
       <div>오늘은 <span>에어콘</span>도 안되고
              <p><span>힘들다</span></p>
        </div>
       
       <div id="layer1">
             <ul>
                    <li>항목1</li>
                    <li>항목2</li>
             </ul>
       </div>
       
       <div id="layer2">
             <ul>
                    <li>항목1</li>
                    <li>항목2</li>
             </ul>
       </div>
       <a href="http://www.naver.com">네이버</a>
</body>
</html>

자바 시간 측정

2018-12-09 00:00:00 +0000

millis와 nano의 차이를 비교

package tuning;
import java.util.ArrayList;
import java.util.HashMap;
public class CompareTimer {
       public static void main(String[] args) {
              CompareTimer timer=new CompareTimer();
              for(int loop=0;loop<10;loop++) {
                     timer.checkNanoTime();
                     timer.checkCurrentTimeMillis();
              }
       }
       private DummyData dummy;
       public void checkNanoTime() {
              long startTime=System.nanoTime();
              dummy=timeMakeObjects();
              long endTime=System.nanoTime();
              double elapsedTime=(endTime-startTime)/1000000000.0;
              System.out.println("nano="+elapsedTime);
       }
       public void checkCurrentTimeMillis() {
              long startTime=System.currentTimeMillis();
              dummy=timeMakeObjects();
              long endTime=System.currentTimeMillis();
              long elapsedTime=endTime-startTime;
              System.out.println("milli="+elapsedTime);
       }
       public DummyData timeMakeObjects() {
              HashMap<String,String> map=new HashMap<String,String>(1000000);
              ArrayList<String> list=new ArrayList<String>(1000000);
              return new DummyData(map,list);
       }
}

결과

  • milli에 비해 nano로 한 측정값이 더 정확한 것을 알 수 있다
  • 결론은 성능테스트 시 milli가 아닌 nano 계산을 하자
nano=1.682242
milli=0
nano=1.994495
milli=0
nano=1.65985
milli=16
nano=1.70588
milli=0
nano=1.483508
milli=0
nano=1.750976
milli=0
nano=1.91612
milli=15
nano=4.583637
milli=0
nano=0.449407
milli=0
nano=0.620773
milli=0

git,eclipse 연동

2018-12-08 00:00:00 +0000

이클립스, git 연동 방법

  1. 이클립스 메뉴 Window-Show View-Git Repositories 선택
  2. Clone a Git repository 선택
  3. URI에 자신이 내려받을 프로젝트 주소를 넣는다
  4. Next, Finish를 눌러 Git연동을 완료한다
  5. Git Repositories에 있는 방금 프로젝트를 오른쪽 마우스 클릭하여 import projects 메뉴를 클릭한다
  6. Import as general project 선택
  7. 프로젝트 창으로 가져오기 성공

에러

  • git연동 프로젝트가 빌드되지 않는 상황 발생
  • classpath를 커밋하지 않아, classpath(빌드path)가 없던게 원인. classpath를 커밋하고 ignore에 추가해서 해결

Posts

subscribe via RSS