VisualStudioCode_Day

4.VisualStudioCode/2).VisualStudioCode_개념 및 실습

VisualStudioCode_Day_06

구이제이 2024. 2. 23. 21:07

html css 정리(반응형

ㅡㅡㅡ

자바스크립트

#깃에 올리기

css - reset파일 삭제 하고 필요한 부분만 가져오는 basic.css

# index.css

# link로 추가하기.

>>> index는 메인 화면입니다. index의 style을 분할한다.

ㅡㅡㅡ

★백엔드

자바

데이터베이스

jsp

서블릿

ㅡㅡㅡ

★프론트엔드

프론트 - 모양

ㅡㅡㅡ

# 정렬

ctrl + A

alt + shift + F

◐

indexTea.html

indexTea.css

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

</nav>

</ul>

</nav>

</div>

<ul>

<li><a href="#">동아리모임</a></li>

</ul>

</nav>

</div>

<hr>

</form>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<ul>

<li><a href="#">정보공개알림<span class="symbols">|</span></a></li>

<li><a href="#">개인정보처리방침<span class="symbols">|</span></a></li>

<li><a href="#">이용서비스현황<span class="symbols">|</span></a></li>

<li><a href="#">이메일무단수집거부<span class="symbols">|</span></a></li>

<li><a href="#">전화번호안내<span class="symbols">|</span></a></li>

</ul>

</nav>

</div>

</footer>

</div>

</body>

</html>

ㅡㅡ

/* 전체를 감싸는 부분 */

.wrap {

width: 100%;

}

/* 헤드라인 부분(윗쪽 부분) */

div.topContainer {

width: 100%;

height: 120px;

position: relative;

margin-bottom: 10px;

/* background-color: antiquewhite; 확인용,지울부분*/

}

/* 1. 로고 부분 */

.topLogo {

width: 100%;

height: 70px;

display: flex;

flex-direction: row;

flex-wrap: nowrap;

}

.logo {

width: 600px;

overflow: hidden;

/* 자식에서 float 쓰기 위해 */

margin-top: 10px;

margin-left: 5px;

/* background-color: aquamarine; */

}

.logo>img {

width: 80px;

height: 60px;

float: left;

margin-right: 10px;

}

.logo>h1 {

height: 60px;

line-height: 60px;

float: left;

font-size: 2.3rem;

color: blueviolet;

}

/* 2. 네비게이션 부분, 로그인, 회원가입,.. */

.topNav {

width: 350px;

text-align: right;

}

.topNav li {

display: inline-block;

}

.topNav li>a {

display: inline-block;

padding: 10px 7px;

/* 위/아래 왼/오 */

}

.topNav li>a:hover {

color: white;

background-color: blueviolet;

border-radius: 5px;

}

/* 메인 메뉴 부분, 회사소개, 프로그램,... */

.mainNav {

position: absolute;

bottom: 0px;

left: 150px;

/* background-color: aqua; */

}

.mainNav>ul {

display: flex;

flex-direction: row;

justify-content: space-around;

}

.mainNav li>a {

display: inline-block;

padding: 5px 12px;

font-size: 1.1rem;

}

.mainNav li>a:hover {

color: blueviolet;

}

/* 경계선 */

hr {

border: 1px solid blueviolet;

margin-bottom: 20px;

}

/* 검색 부분 */

.search{

width: 100%;

height: 70px;

line-height: 70px;

padding: 3px 0px;

display: flex;

flex-direction: row;

justify-content: space-around;

border-top: 1px solid gainsboro;

border-bottom:1px solid gainsboro;

margin-bottom: 20px;

}

/*1. 자료검색, 강좌검색 */

.search>form{

overflow: hidden;

}

.search>form>div{

float: left;

width: 210px;

/* background-color: aqua; 지울 부분, 확인용 */

}

.search>form>div span{

display: inline-block;

margin-left:5px;

margin-right: 12px;

}

/* .search>form>input */

/* .search>form>input[type="text"] */

.search>form>input[name="textSearch"]{

height: 35px;

width: 320px;

/* text-align: center; */

padding-left: 10px;

}

/* 배너 이미지 부분 */

.banner{

width: 100%;

margin-bottom: 20px;

}

.banner>img{

width: 100%;

}

/* 코스 설명 부분, 글쓰기 교실 ... */

.courseInfo{

display: flex;

flex-direction: row;

flex-wrap: wrap; /* 공간이 부족하면 요소 아래로 배치 가능 */

margin-bottom: 20px;

}

/* .courseInfo>a{

display: inline-block;

padding: 2px 3px;

margin: 3px 2px;

} */

.courseInfo img{

box-sizing: border-box;

width: 240px;

}

/* 탭이 있는 부분, 공지사항,.... */

.mainInfo{

box-sizing: border-box;/* border,padding 포함 width와 height 설정 */

width: 100%;

height: 420px;

display: flex;

flex-direction: row;/* 플렉스 아이템(자식요소) 배치 방향 */

flex-wrap: wrap;

justify-content: space-between; /*양쪽 끝에 맞춰 배치 */

margin-bottom: 20px;

}

/* 탭 부분 */

.tabMenu{

width: 600px;

height: 420px;

margin-right: 20px;

}

/* tab 제목 부분 */

.tabTitle{

height: 49px;

overflow: hidden;

border: 1px solid #ccc;

background-color: #f1f1f1;

}

/* tab 제목의 버튼 부분 */

.tabTitle button{

width: 150px;

background-color: inherit; /* 부모것 상속 받기 */

float: left;

border: none;

outline: none;

cursor: pointer; /*마우스 포인터 모얄 */

padding: 14px 16px;

transition: 0.2s;/* 하나의 스타일이 완전히 다른

스타일로 바뀌는 것

시간 : 스타일이 바뀌는 시간

초단위

font-size: 17px;

}

.tabTitle button:hover{ /* 마우스 포인터가 올라왔을 때 */

background-color: #ddd;

}

.tabTitle button.active{/* 활성화 되었을 때 */

background-color:#ccc;

}

.tabPage{

box-sizing: border-box;

height: 369px;

display: none; /* 숨기기, 자리까지 없어짐 */

padding: 6px 12px;

border: 1px solid #ccc;

border-top: none;/* 윗쪽 테두리 없앰 */

}

.tablinkInit{

display: block;

}

/* 책 이미지 부분 책소개 */

.bookInfo>img{

box-sizing: border-box;

width: 340px;

height: 369px;

/* vertical-align: baseline; */

margin-top: 50px;

}

/* footer 부분 */

.footer{

width: 100%;

height: 200px;

}

.companyInfo{

box-sizing: border-box;

width: 100%;

border-top: 1px solid gray;

border-bottom: 1px solid gray;

margin-bottom: 10px;

}

.companyInfo>ul{

display: flex;

flex-wrap: nowrap;

justify-content: space-around;

flex-direction: row;

height: 40px;

line-height: 40px;

padding: 0px 20px;

}

.companyInfo li>a:hover{

color: red;

}

.symbols{

margin-left: 18px;

}

.companyAddress>span{

line-height: 28px;

letter-spacing: 1px;

margin-left: 20px;

}

#git hub

아이디.github.io

반드시체크

파일추가하고, commit 하기

나올려면, 10분정도 걸립니다.

ㅡㅡ

JSP서블릿

●

html

javascript3.html

<!DOCTYPE html>

<head>

<title>Document</title>

//한줄 주석

/* 여러줄 주석*/

ECMA(유럽컴퓨터제조협회)에서 자바스크립트를 ECMAScript라는 이름으로 표준화

ECMAScript( 자바스크립트 ) : 브라우저 안에서 실행되는 프로그램 언어(객체지향 프로그래밍 언어)

자바하고 거희 똑같습니다.

ECMAScript 6

실행시키는것 3가지 방법

간단한 메세지 출력

1)alert(실행할 문장 ); //실행문장의 끝인 ;(세미콜론)은 생략가능

2)console.log(실행 문장); // 콘솔에서 확인

3)document.write(실행문장); // 브라우저 본문에 표시

alert('즐거운 시간!!'); //내장함수 "", '' - 문자열(자바는 구분하는데, 자바스크립트 구분안합니다.)

console.log('즐거운 시간!!!'); //화면에는 안나오지만, 로그화면엔 나옵니다.(f12눌러서 console창에서 확인가능)

alert('test'); //html,css는 에러잡기가 힘들지만, javasript는 콘솔로 확인가능합니다.

document.write('<h1>javascript is fun</h1>');

// 숫자 - number, 문자열 - string, 불린 - boolean : true, false

// false : 0, true :1 (이외의 숫자)

// 비교연산자 : > , >=, <, <=, == < !=

// ==(자바는 스택에 있는 참조주소값만 비교)

// ==(자바스크립트는 값이 같은지만 비교)

// ===(값과 자료형까지 같은지 비교)

// !=(왼쪽과 오른쪽이 같은 여부) 값만 비교

//!== 값과 타입이 같지 않다.

//%%, ||, ! 같다.

// 변수 와 상수

// 1. 변수 선언 (자바변수 선언3가지)

int a = 3;

a = 7;

double a = 3.7; (x) 이미 변수 선언해서 자바에서는 사용불가

int a = 10; (x) 이미 변수 선언해서 자바에서는 사용불가

JS는

1.var : 변수를 중복해서 선언가능, 변수가 속하는 범위가 에매함

ex)

var a = 3; (js 가능하다)

a=3; (js 가능하다)

var a=7; (js 가능하다)

>>> var같은 경우 선언이 자유롭고 범위도 넓다.

ex) var result = 3;

var result = 7; 가능,result에는 마지막에 선언한 7이 담김

2.let : 중복해서 선언할 수 없음, 변수 범위가 명확({})

2.let(var단점보완) - 블록범위내 사용, 지역변수같은 개념(선언된 부분에서 가능)

선언할떄, 타입이 설정되는 것이 아니라, 값을 넣을떄 타입이 설정된다.

ex)let test=3;

let test=7; //불가능, 중복 선언 안됨

3.const(상수) : 값이 한번 정해지면 절대 변하지 않음, 상수

ex)const 상수이름 = 값

const PI = 3.141592

*** 주로 let이나 const로 사용하세요. var는 웬만하면 사용하지않길 권장 ***

//입력받는것 prompt(메세지...); 키보드로부터 입력 받기, 문자열로 입력 받음

//숫자를 입력 받아서 홀/짝

let inNum = Number(prompt('정수를 입력하세요')); //자바스크립트(똑같은개념)

//int inNum = Integer.parseInte(scan.nextLine()); - 자바 (똑같은개념)

let result;

//===3개사용시 타입까지 확인

if(inNum % 2 === 0){

result = '짝수';

}else{

result = '홀수';

}

alert(result);

console.log(result);

document.write(result);

</script>

</head>

<body>

</body>

</html>

자바스크립트 - 클라이언트 쪽에서 움직여준다.

(스크립트 종료가 많다.)

에크마스크립트 -

// 한 줄 주석

#콘솔창 로그확인

◐

javascript4.html

<!DOCTYPE html>

<head>

<title>Document</title>

//#

//script를 나중에 실행하는 방법

// function : 자기함수안에서 함수를 호출한다 - 콜백함수 , 이벤트리스너

document.addEventListener('DOMContentLoaded', function(){

let num = Number(prompt("숫자 입력"));

let sum =0;

for(let i=1 ; i <=num; i++){

sum += i;

}

//document.write(sum);

let div1 = document.querySelector(' .innerResult');

//querySelector

//클래스 ().) id는 (#), 태그는 ;그냥'

div1.innerHTML = '<h1>' + sum + '</h1>';

});

/* 자동완성 시키는게 좋다.*/

</script>

</head>

<body>

<hr>

</body>

</html>

#w3chools how to적용 -Tab

◐

javascript5.html

그대로 가져와서 적용

<!DOCTYPE html>

<head>

<title>Document</title>

//#

//script를 나중에 실행하는 방법

// function : 자기함수안에서 함수를 호출한다 - 콜백함수 , 이벤트리스너

document.addEventListener('DOMContentLoaded', function(){

let num = Number(prompt("숫자 입력"));

let sum =0;

for(let i=1 ; i <=num; i++){

sum += i;

}

//document.write(sum);

let div1 = document.querySelector(' .innerResult');

//querySelector

//클래스 ().) id는 (#), 태그는 ;그냥'

div1.innerHTML = '<h1>' + sum + '</h1>';

});

/* 자동완성 시키는게 좋다.*/

function openCity(evt, cityName) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";

}

tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(cityName).style.display = "block";

evt.currentTarget.className += " active";

}

</script>

</head>

<body>

<hr>

<!DOCTYPE html>

<html>

<head>

<style>

body {font-family: Arial;}

/* Style the tab */

.tab {

overflow: hidden;

border: 1px solid #ccc;

background-color: #f1f1f1;

}

/* Style the buttons inside the tab */

.tab button {

background-color: inherit;

float: left;

border: none;

outline: none;

cursor: pointer;

padding: 14px 16px;

transition: 0.3s;

font-size: 17px;

}

/* Change background color of buttons on hover */

.tab button:hover {

background-color: #ddd;

}

/* Create an active/current tablink class */

.tab button.active {

background-color: #ccc;

}

/* Style the tab content */

.tabcontent {

display: none;

padding: 6px 12px;

border: 1px solid #ccc;

border-top: none;

}

</style>

</head>

<body>

<p>Click on the buttons inside the tabbed menu:</p>

<button class="tablinks" onclick="openCity(event, 'London')">London</button>

<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>

<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

</div>

<h3>London</h3>

<p>London is the capital city of England.</p>

</div>

<h3>Paris</h3>

<p>Paris is the capital of France.</p>

</div>

<h3>Tokyo</h3>

<p>Tokyo is the capital of Japan.</p>

</div>

</body>

</html>

</body>

</html>

◐

javascript1.html

응용

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

/* 탭 부분 */

.tabMenu{

width: 600px;

height: 420px;

margin-right: 20px;

}

/* tab 제목 부분 */

.tabTitle{

height: 49px;

overflow: hidden;

border: 1px solid #ccc;

background-color: #f1f1f1;

}

/* tab 제목의 버튼 부분 */

.tabTitle button{

width: 150px;

background-color: inherit; /* 부모것 상속 받기 */

float: left;

border: none;

outline: none;

cursor: pointer; /*마우스 포인터 모얄 */

padding: 14px 16px;

transition: 0.2s;/* 하나의 스타일이 완전히 다른

스타일로 바뀌는 것

시간 : 스타일이 바뀌는 시간

초단위

font-size: 17px;

}

.tabTitle button:hover{ /* 마우스 포인터가 올라왔을 때 */

background-color: #ddd;

}

.tabTitle button.active{/* 활성화 되었을 때 */

background-color:#ccc;

}

.tabPage{

box-sizing: border-box;

height: 369px;

display: none; /* 숨기기, 자리까지 없어짐 */

padding: 6px 12px;

border: 1px solid #ccc;

border-top: none;/* 윗쪽 테두리 없앰 */

}

.tablinkInit{

display: block;

}

</style>

function openTab(evt, infom){

let tabPage, tablinks ;

// tabPage = document.querySelector('.tabPage');

tabPage = document.getElementsByClassName('tabPage');

tablinks = document.getElementsByClassName('tablinks');

for(let i=0; i<tabPage.length; i++){

tabPage[i].style.display = 'none';

}

for(let i=0; i<tablinks.length; i++){

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(infom).style.display = 'block';

evt.currenTarget.className +=" avtive";

}

/*쿼리샐럭터로 한번에 처리할수있다.

그러나 따로따로 getElementsByClassName

쓸 수 있다.

</script>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

◐

indexTea2.html

./js/tab.js

#js파일 분리시키는 법

js폴더,

<!DOCTYPE html>

<head>

</script>

<style>

</style>

</script>

</head>

<body>

</nav>

</ul>

</nav>

</div>

<ul>

<li><a href="#">동아리모임</a></li>

</ul>

</nav>

</div>

<hr>

<div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<ul>

<li><a href="#">정보공개알림<span class="symbols">|</span></a></li>

<li><a href="#">개인정보처리방침<span class="symbols">|</span></a></li>

<li><a href="#">이용서비스현황<span class="symbols">|</span></a></li>

<li><a href="#">이메일무단수집거부<span class="symbols">|</span></a></li>

<li><a href="#">전화번호안내<span class="symbols">|</span></a></li>

</ul>

</nav>

</div>

</footer>

</div>

</body>

</html>

ㅡㅡ

function openTab(evt, infom){

let tabPage, tablinks ;

// tabPage = document.querySelector('.tabPage');

tabPage = document.getElementsByClassName('tabPage');

tablinks = document.getElementsByClassName('tablinks');

for(let i=0; i<tabPage.length; i++){

tabPage[i].style.display = 'none';

}

for(let i=0; i<tablinks.length; i++){

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(infom).style.display = 'block';

evt.currenTarget.className +=" avtive";

}