- 웹개발자 설정으로 설치하였기때문에 원할한 작업을 위해 설정 변경이 필요
- 우측 상단에 Perspective에 JAVA가 추가되어있는 것을 확인 가능
- JAVA EE, JAVA
- Ctrl + F8로 전환가능
| [JAVA][04] 변수(Variable)란? (1) | 2024.10.03 |
|---|---|
| [JAVA][03] Hello World (0) | 2024.10.03 |
| [JAVA][02] 이클립스 설치 (1) | 2024.10.01 |
| [JAVA][01] JDK 설치 및 환경변수 설정 (1) | 2024.10.01 |
| java파일 명령 프롬프트(cmd)로 컴파일 해보기 (0) | 2018.06.18 |
- 추후 JSP를 하기 위해서 web developers 선택
- 프로젝트 저장 위치, 추후 변경 가능
| [JAVA][04] 변수(Variable)란? (1) | 2024.10.03 |
|---|---|
| [JAVA][03] Hello World (0) | 2024.10.03 |
| [JAVA][02] 이클립스 Perspective 설정 (0) | 2024.10.03 |
| [JAVA][01] JDK 설치 및 환경변수 설정 (1) | 2024.10.01 |
| java파일 명령 프롬프트(cmd)로 컴파일 해보기 (0) | 2018.06.18 |
- 변경하지 않고 진행
- 윈도우키 + R 또는 명령 프롬프트 검색
- JDK 구버전에서는 환경변수 설정이 필요하였지만
JDK 11버전 이상부터는 인스톨러가 제공되어 설정하지 않아도 가능.
- 특정 프로그램에서 필요하거나, 호환성, 원인 모를 오류 등을 대비하여 설정이 필요할 수도 있음.
- 단축키 : 윈도우키 + Pause break
- 윈도우에서 시스템 환경 변수 편집 검색도 가능
- 변수 이름 : JAVA_HOME
- 변수 값 : C:\Program Files\Java\jdk-17 (JDK 설치 위치)
- %JAVA_HOME%\bin 입력 후 확인
| [JAVA][04] 변수(Variable)란? (1) | 2024.10.03 |
|---|---|
| [JAVA][03] Hello World (0) | 2024.10.03 |
| [JAVA][02] 이클립스 Perspective 설정 (0) | 2024.10.03 |
| [JAVA][02] 이클립스 설치 (1) | 2024.10.01 |
| java파일 명령 프롬프트(cmd)로 컴파일 해보기 (0) | 2018.06.18 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <style> a {text-decoration:none;color:#333;} ul {list-style:none;} ul.zoom_btn li {display:inline-block;border:1px solid #ccc;text-align:center;} ul.zoom_btn li a {display:block;width:40px;height:40px;line-height:40px;} </style> <header> <ul class="zoom_btn"> <li><a href="javascript:;" id="zoomOut">-</a></li> <li><a href="javascript:;" id="zoomInit">기본</a></li> <li><a href="javascript:;" id="zoomIn">+</a></li> </ul> </header> <!--//header--> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis delectus, libero porro. Voluptate autem mollitia delectus. Voluptate consectetur, provident nam, facilis ea mollitia rerum animi pariatur illo suscipit, eos autem!</p> <script type="text/javascript"> var zoomsVal = 100; var zoomsInterval = 10; var zoomsInit = document.getElementById("zoomInit"); var zoomsIn = document.getElementById("zoomIn"); var zoomsOut = document.getElementById("zoomOut"); zoomsInit.addEventListener("click", zoomInit); zoomsIn.addEventListener("click", zoomIn); zoomsOut.addEventListener("click", zoomOut); function zoomInit(){ zoomsVal = 100; zoomCalc(); //console.log("zoom init"); } function zoomCalc(){ document.body.style.zoom = zoomsVal + '%'; } function zoomIn() { zoomsVal += zoomsInterval; zoomCalc(); //console.log("zoom In"); } function zoomOut() { zoomsVal -= zoomsInterval; zoomCalc(); //console.log("zoom out"); } </script> | cs |
| [JAVASCRIPT] loop(반복문) - for문, for of문, forEach메서드 (0) | 2024.11.18 |
|---|---|
| [JAVASCRIPT] Form Validator 폼 유효성 검사 함수 (6) | 2024.11.16 |
| [javascript] select option 홈페이지 이동기능 (0) | 2020.02.01 |
| [javascript] select로 탭메뉴 만들기 (0) | 2020.01.29 |
| 탭기능구현 (addClass / removeClass) (0) | 2019.07.10 |
.sub_nav ul li:first-child:nth-last-child(1) {
width: 50%;
}
.sub_nav ul li:first-child:nth-last-child(2),
.sub_nav ul li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
.sub_nav ul li:first-child:nth-last-child(3),
.sub_nav ul li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
.sub_nav ul li:first-child:nth-last-child(4),
.sub_nav ul li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
.sub_nav ul li:first-child:nth-last-child(5),
.sub_nav ul li:first-child:nth-last-child(5) ~ li {
width: 20%;
}
.sub_nav ul li:first-child:nth-last-child(6),
.sub_nav ul li:first-child:nth-last-child(6) ~ li {
width:16.6%;
}
서브페이지 2뎁스에 유용하게 쓰고 있다
이전엔 스크립트나 제이쿼리 li 요소 개수를 세어서 너비를 변경했는데
css로도 너비 변경이 가능!!
.sub_nav ul li:first-child:nth-last-child(5), /* 개수가 5개일 때 첫번째(뒤에서 부터 5번째) 너비는 20% */
.sub_nav ul li:first-child:nth-last-child(5) ~ li { /* 첫번째 요소 일반형제연산자(~) 뒤에도 모두 20%로 */
width:20%;
}
구글링 중에 발견
https://www.growingwiththeweb.com/2014/06/detecting-number-of-siblings-with-css.html
Detecting number of siblings with CSS
I came across a clever CSS technique, originally developed by André Luís in 2009 and later refined by Lea Verou 2 years later; applying a style when the number of siblings is a particular number. It’s definitely worth knowing.
www.growingwiththeweb.com
| SEO 메타태그 & 파비콘 (0) | 2020.03.11 |
|---|---|
| SEO (0) | 2019.08.13 |
<meta charset="utf-8">
<meta name="description" content="<?php echo $['site_name']; ?> 홈페이지에 오신 것을 환영합니다.">
<meta name="keywords" content="여기에, 키워드를, 입력해서, 검색되게">
<meta name="Robots" content="index, follow">
<meta name="viewport" content="width=device-width, user-scalable=1">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo $['site_name']; ?>">
<meta property="og:description" content="<?php echo $['site_name']; ?> 홈페이지에 오신 것을 환영합니다.">
<meta property="og:url" content="<?=$['url'];?>">
<meta property="og:image" content="<?=$['path']['img']?>openGraph.jpg">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="canonical" href="<?=$['url'];?>">
<link rel="shortcut icon" type="image/x-icon" href="<?=$['path']['img']?>favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title><?php echo $['site_name']; ?></title>
파비콘은 여기서..
| li 개수에 따라서 width값 설정하기 (0) | 2020.03.11 |
|---|---|
| SEO (0) | 2019.08.13 |
|
1
2
3
4
5
6
7
8
9
|
<select name="" id="scltList" title="포털 리스트">
<option value="x" selected="selected" id="slct">--선택--</option>
<option value="http://www.naver.com">네이버</option>
<option value="http://www.google.co.kr/">구글</option>
<option value="http://www.daum.net/">다음</option>
</select>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script type="text/javascript">
/* select tab function */
var selectTab = document.getElementById("scltList"); // 셀렉트를 변수에 저장
selectTab.addEventListener("change",function(){ // change 이벤트 발생
var val = selectTab.options[selectTab.selectedIndex].value; // option value값 저장
if(val != "x" ){ // value값이 x가 아닐 때
window.open(val); // 새 창으로 홈페이지 띄움
document.getElementById("slct").selected = true; // 선택한 옵션을 제일 처음으로 바꿔줌.
}
});
</script>
|
cs |
셀렉트를 이용하여 홈페이지를 이동시키는 기능입니다.
1. 셀렉트 내 옵션을 선택 할 때 value값이 x가 아니면
window.open을 이용하여 새 창으로 url로 이동
2. 이동 후 제일 첫번째 옵션으로 재선택됨
| [JAVASCRIPT] Form Validator 폼 유효성 검사 함수 (6) | 2024.11.16 |
|---|---|
| [JAVASCRIPT] 브라우저 zoom in / zoom out 기능 (1) | 2020.10.21 |
| [javascript] select로 탭메뉴 만들기 (0) | 2020.01.29 |
| 탭기능구현 (addClass / removeClass) (0) | 2019.07.10 |
| mega menu, full wide dropdown menu (0) | 2019.03.11 |
모바일 화면일 때 셀렉트로 컨트롤 가능한 탭기능을 자바스크립트로 만들어 보았다..
<CSS>
1 2 3 4 5 6 | <style> .con_cmn {display:none} .con1 {display:block;} </style> | cs |
<HTML>
|
1
2
3
4
5
6
7
8
9
10
11
|
<select name="" id="selectTab" class="select_tab" title="교육과정 선택 구분">
<option value="x">-- 선택 --</option>
<option value="0" id="tab1">야구</option>
<option value="1">축구</option>
<option value="2">농구</option>
</select>
<!--//select_tab-->
<div class="con_cmn con1">야구 콘텐츠</div>
<div class="con_cmn con2">축구 콘텐츠</div>
<div class="con_cmn con3">농구 콘텐츠</div>
|
cs |
<JAVASCRIPT>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<script type="text/javascript">
/* select tab function */
var selectTab = document.getElementById("selectTab"); // select 저장
var con = document.getElementsByClassName("con_cmn"); // select 에 대응하는 콘텐츠 요소들 저장
selectTab.addEventListener("change",function(){ // selecㅅ가 변화할 때
var val = selectTab.options[selectTab.selectedIndex].value; // option value값
for (var i = 0;i<selectTab.length-1; i++){ // select가 4개, 콘텐츠가 3개이기때문에 length-1
con[i].style.display = "none" ; // 콘텐츠 모두 숨김
if(val == i ) { // select에 해당하는 콘텐츠가 보여짐
con[i].style.display = "block" ;
} else if (val == "x" ){ // value값이 x인 첫번째 option을 선택 했을 때
con[0].style.display = "block" ; // 1번째 콘텐츠 보여주고
document.getElementById("tab1").selected = true; // select는 첫번째를 선택
}
}
});
</script>
|
cs |
| [JAVASCRIPT] 브라우저 zoom in / zoom out 기능 (1) | 2020.10.21 |
|---|---|
| [javascript] select option 홈페이지 이동기능 (0) | 2020.02.01 |
| 탭기능구현 (addClass / removeClass) (0) | 2019.07.10 |
| mega menu, full wide dropdown menu (0) | 2019.03.11 |
| fade slide (0) | 2018.07.13 |
1. meta name
<meta name="description" content="site_name 홈페이지에 오신것을 환영합니다.">
<meta name="keywords" content="키워드1, 키워드2, 키워드3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. openGraph
<meta property="og:type" content="website">
<meta property="og:title" content="site_name">
<meta property="og:description" content="site_name 홈페이지에 오신것을 환영합니다.">
<meta property="og:url" content="site_url">
<meta property="og:image" content="src/img/openGraph.jpg">
<link rel="canonical" href="site_url>">
openGraph img size : 800x400
kakao developers 캐시 삭제 도구 : https://developers.kakao.com/docs
| li 개수에 따라서 width값 설정하기 (0) | 2020.03.11 |
|---|---|
| SEO 메타태그 & 파비콘 (0) | 2020.03.11 |
$(function(){
var tab1 = $("#latest ul.latest_tab li");
var tab2 = $("#notice ul.notice_tab li");
function tabFunction(el, elThis, idx){
el.removeClass("on");
elThis.addClass("on");
$(".tab_con").removeClass('on');
$('.tab' + idx).addClass('on');
}
tab1.click(function(){
var el = tab1;
var elThis =$(this);
var idx = $(this).index()+1;
tabFunction(el, elThis,idx);
});
tab2.click(function(){
var el = tab2;
var elThis =$(this);
var idx = $(this).index()+1;
tabFunction(el, elThis, idx);
});
});
| [javascript] select option 홈페이지 이동기능 (0) | 2020.02.01 |
|---|---|
| [javascript] select로 탭메뉴 만들기 (0) | 2020.01.29 |
| mega menu, full wide dropdown menu (0) | 2019.03.11 |
| fade slide (0) | 2018.07.13 |
| 슬라이드 setInterval, clearInterval (0) | 2018.07.04 |