web 홍길동
웹클라이언트
요청 => 다음
웹 서버
응답HTML
-HT
-ML =?' 표시' => '태그' <p> Hello World </p>
1) 제목태그 h1~h6
2) 본문태그
- p: 한줄의 영역 전부 차지 => 개행o
- span: 내가 넣은 컨텐츠 => 개행x
3) 개행태그
- <br>
4) 강조태그<strong>
5) 리스트 태그
- 나 여기에 리스트 선언 할꺼야 => ul, ol
- 실질적인 리스트 데이터 => li
이미지태그
<img>: 웹 페이지에 이미지를 보여주는 태그
src - 이미지의 경로 지정(파일 경로나 URL)
alt - 이미지에 대한 설명(경로가 잘못되었을 경우)
boder - 이미지 주위의 테두리
height- 이미지의 높이
width- 이미지의 너비
hspace- 좌우 여백
vspace- 상하 여백
절대경로: 어떤 페이지나 파일이 가진 고유한 경로 *외부 웹페이지로 연결할 때 사용
img src="https://yuhyewon.tistory.com/logo.png"
-> 이미지의 고유한 주소, 절대 바뀌지 않는 값
상대경로: 특정 위치를 기준으로 파일을 찾는 경로 *내부 자료를 연결할 때 사용
상위 파일 -> ../
1) 현재를 기준으로 바로접근 가능 -> ./ <img src="./img>
2) 상위를 기준으로-> ../ <img src="../img/banana.png">
3)루트를 기준으로 <img src = "/ing/banana.png"> -> 최상단 루트가는방법
1) 현재를 기준으로 바로 접근 가능 ./ (생략이 가능)
2) 상위 ../
=>여러번 ../../../
3) 최상단 /
앵커태그
<a href="url">텍스트</a>
href: hypertext reference로 연결할 주소 지정
name: 문서 내 특정 위치 이동
target: 링크된 내용이 열릴 대상
href - hypertext referenece로 연결할 주소 지정
name- 문서 내 특정 위치 이동
target- 링크된 내용이 열릴 대상
_blank: 링크 클릭 시 새 창 설정
_self: 현재와 동일한 브라우저 창 설정
<ex05 이미지.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- http://www.palnews.co.kr/news/photo/201801/92969_25283_5321.jpg -->
<!-- img태그 (필수 속성: src ) -->
<!-- (1) 절대 경로: 어떤 파일이 가진 본인만의 고유한 경로 -->
<img src="http://www.palnews.co.kr/news/photo/201801/92969_25283_5321.jpg" width="300px">
<!-- (2)상대 경로: 특정 위치를 기준으로 파일을 찾는 경로 => 내부 자료
1) 현재를 기준으로 : ./
2) 상위를 기준으로 :../
-->
<!-- <img src="./img/img.webp"
width="300px" -->
<!-- 두번째 사진을 다시 불러와보자! -->
<img src="../img/img.webp"
width="300px">
</body>
</html><ex06a태그.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- a태그 : hyper text의 기능 현재 문서에서 다른 문서로 즉시 이동 가능
**필수 속성:href(어디로 이동?)
** 선택 속성: target(현재 창 or 새탭, 새창)
-->
<a href="https://www.naver.com/" target="_blank">
네이버로 이동
</a>
<br>
<!--
(1) 로고 이미지를 띄워준다
(2) 로고 이미지를 클릭 시, https://smhrd.or.kr/ 로 이동
(3)
-->
<a href="https://smhrd.or.kr/" target="_blank">
<img src="./img/logo.png" width="300px">
</a>
</body>
</html>
테이블 태그
<table>
| 이름 | 주소 |
| 홍길동 | 광주 |
코딩이 아니라 일반적으로 표를 만드는 상황을 기억할 것
<table>: 테이블을 만들 때 사용하는 태그
align : 표의 정렬 방식(left,right,center)을 지정
bgcolor: 표의 배경색을 지정
border: 표의 테두리 두께를 지정
bordercolor: 표의 테두리 색 지정
width: 표의 너비를 지정
height: 표의 높이를 지정
<tr>태그</tr>: table row의 줄임말, 표 내부에서 1줄을 생성하는 태그
align: 행 정렬 방식(left, center, right) 지정
bgcolor: 행 배경색 지정
height: 행 높이 지정
<th>텍스트</th>: 행의 head 역할을 하는 태그
<td>텍스트</td>: table data/ 칸 안의 데이터를 나타내는 태그
td & td 태그 속성
align - 셀 정렬방식/(left,right) 지정
bgcolor: 셀 배경색 지정
colspan : 셀 병합
rowspan: 행 병합
width: 셀 너비 지정
height: 셀 높이 지정
=> <table></table>
2) 몇 줄 만들거야! (열) : table rows
=> <tr></tr>
3) 몇 칸 만들거야! (행)
=> 표의 헤더 부분 table header : <th></th>
=> 표의 데이터 부분 table data : <td></td>
4) 그 안에 내용
=> 각각 th, td 의 컨텐츠==== 실제 코드 ====
<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr></tr>
<tr></tr>
</table>
<ex07테이블>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.테이블을 만들거야! <table> -->
<table
border="1px solid black"
>
<!-- 참고) 표의 제목 caption -->
<caption>메뉴판</caption>
<!-- 2. 1줄 (1열) 생성할거야! table row: <tr> -->
<tr bgcolor="green">
<!-- 3.표의 헤더 부분 table header:<th>-->
<th>메뉴</th>
<th>가격</th>
</tr>
<tr>
<!-- 4.표의 데이터 부분
table date:<td>-->
<td>아메리카노</td>
<td>3000</td>
</tr>
<tr>
<td>카페라떼</td>
<td>4000</td>
</tr>
</table>
</body>
</html><ex08테이블 실습>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px solid black" width="200px" align="center">
<caption>가족팀</caption>
<tr bgcolor="yellow">
<th>이름</th>
<th colspan="2">성별/주소</th>
<th > 비고</th>
</tr>
<tr align="center">
<td>엄마</td>
<td>여자</td>
<td>광주</td>
<td rowspan="4"></td>
</tr>
<tr align="center">
<td>딸</td>
<td>여자</td>
<td>광주</td>
</tr>
<tr align="center">
<td>아빠</td>
<td>남자</td>
<td>광주</td>
</tr>
<tr align="center">
<td>오빠</td>
<td>남자</td>
<td>광주</td>
</tr>
</table>
</body>
</html>입력양식 태그
<form></form>: 웹 페이지에 입력폼을 만들 때 사용하는 태그
action: 입력 데이터의 전달 위치 지정
method: 입력 데이터의 전달 방식 지정(GET/POST)
name: form 태그의 이름 지정
<input type="text">: 데이터를 입력할 수 있는 태그
name: 입력한 값을 구분하기 위해 이름 지정
value: 기본값 지정
placeholder: 미리보기 텍스트 지정
autofocus: 자동 커서 설정(true)
maxlength: 글자 수 제한 지정
readonly: 읽기 전용 지정
<select>태그</select>: 입력폼에서 목록상자를 생성해 선택이 가능한 태그
ex) <select>
<option value="">메일선택...</option>
<option value="naver.com">네이버</option>
<option value="gmail.com">구글</option>
</select>
<input type = "password">: 비밀번호를 입력할 때 사용하는 태그
<inputtype = "checkbox">: 여러 항목을 동시에 선택할 때 사용하는 태그
<inputtype = "radio">: 여러 항목 중 하나만 선택할 때 사용하는 태그
<inputtype = "file">: 파일 업로드시 사용하는 태그
<inputtype = "color">: 색을 지정할 때 사용하는 태그
<inputtype = "number">: 수치를 입력할 때 사용하는 태그
<inputtype = "range">: 특정 범위의 수치를 입력할 때 사용하는 태그
<inputtype = "date">: 날짜를 입력할 때 사용하는 태그
<inputtype = "datetime-local">: 날짜 시간수치까지 입력할 때 사용하는 태그
<ex09폼태그.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- form 태그
"나 여기서부터 여기까지 입력폼 만들어줄거야!" 선언
=>필수 속성 2가지
- action: 어디로 보낼건지
- method: 어떻게 보낼건지
-->
<!-- <input> 추가 속성
**
(1) type: 입력 타입을 지정(text,password ... )
(2) name: 입력한 값을 구분하기 위해 이름 지정
(3) autofocus: 자동 커서 설정
(4) placeholder: 미리보기 텍스트
(5) value: 기본 값 지정*
(6) readonly: 읽기 전용 지정
(7) maxlength: 글자 수 제한 지정
-->
<form action="#" method="get">
ID <input type="text" name="ID" autofocus placeholder="아이디를 입력하시오">
<br>
PW <input type="password" maxlength="10">
<br>
주소 <input type="text" name="Add" value="광주" readonly>
<br><br>
<!-- 사용자가 선택할 수 있는 입력창
(1) input - type: checkbox
(2) input - type: radio
(3) select 태그
-->
<!-- **checkbox와 radio 둘 다
name, value 필수 속성 ***
- name: 어떤 설문인지?
- value: 어떤 값인지?
-->
<!-- (1) checkbox: 중복 선택 가능 -->
<p>좋아하는 음료를 모두 골라주세요</p>
아메리카노<input type="checkbox""menu" value="ia">
민트초코<input type="checkbox""menu" value="mc">
<br>
<!-- (2) radio: 중복 선택 불가능-->
<p>성별을 골라주세요</p>
남성<input type="radio" name="gender" value="man">
여성<input type="radio" name="gender" value="woman">
<!-- (3)select 태그 (input 태그의 타입이 아님! 별도의 태그)-->
<br>
<select>
<option value="naver">네이버</option>
<option value="daum">다음</option>
<option value="google">구글</option>
</select>
<br><br>
<!-- 가볍게 볼 내용! -->
<input type="file">
<br>
<input type="color">
<br>
<input type="number">
<br>
<input type="date">
<br>
<input type="datetime-local">
<!-- 여기까지! -->
<!-- 제출 및 초기화 **
제출 및 초기화되는 정보들은 무조건
form태그 안에 존재!
-->
<br>
<input type="submit">
<input type="reset">
</form>
</body>
</html><ex10회원가입실습.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 사용자에게 데이터를 받아줄 공간 -->
<form action="#" method="get">
<!-- 표를 만들어줄 공간:table -->
<table width="400px">
<!-- Step 1-->
<!-- (tr>td*2)*4 -->
<tr>
<th bgcolor="gray" height="50" align="left" colspan="2">Step1: 아이디/비번 입력</th>
</tr>
<tr bgcolor="whitesmoke" height="35" >
<td align="right">아이디:</td>
<td><input type="text"</td>
</tr>
<tr bgcolor="whitesmoke" height="35">
<td align="right">비밀번호:</td>
<td><input type="password"</td>
</tr>
<tr bgcolor="whitesmoke" height="35">
<td align="right">비밀번호 확인:</td>
<td><input type="password"</td>
</tr>
<!-- Step 2-->
<tr>
<th bgcolor="gray" height="50" align="left" colspan="2">Step2: 개인정보</th>
</tr>
<tr bgcolor="whitesmoke" height="35" >
<td align="right">성별:</td>
<td>남<input type="radio" name="gender" value="man">여<input type="radio" name="gender" value="woman"></td>
</tr>
<tr bgcolor="whitesmoke" height="35">
<td align="right">혈액형:</td>
<td>
<select>
<option value="A">A형</option>
<option value="B">B형</option>
<option value="O">O형</option>
<option value="AB">AB형</option>
</select>
</td>
</tr>
<tr bgcolor="whitesmoke" height="35">
<td align="right">생일:</td>
<td><input type="date"></td>
</tr>
<!-- Step 3-->
<tr>
<th bgcolor="gray" height="50" align="left" colspan="2">Step3: 선호도</th>
</tr>
<tr bgcolor="whitesmoke" height="35" >
<td align="right">추미:</td>
<td>
축구<input type="checkbox" name="hobby" value="sc">
야구<input type="checkbox" name="hobby" value="sc">
농구<input type="checkbox" name="hobby" value="sc">
</td>
</tr>
<tr bgcolor="whitesmoke" height="35">
<td align="right">좋아하는 색깔:</td>
<td><input type="color"</td>
</tr>
<!-- Step 4-->
<tr>
<th bgcolor="gray" height="50" align="left" colspan="2">Step4: 적고 싶은 말</th>
</tr>
<tr>
<td colspan="2"><textarea cols="56" rows="5">
</textarea>
</td>
</tr>
<!-- 제출&초기화 -->
<tr bgcolor="whitesmoke">
<td colspan="2" align="center"><input type="submit"><input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>오후 javascript
조건문
주어진 조건을 비교, 판단하여 결과를 얻는 구문
단순if문 if~else문 다중if문 switch문
<Ex05조건문>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num = 10;
//if~else문(조건:비교연산자, 논리연산자 -> true,false)
if(num>=10){
document.write("10이상이다");
}else{
document.write("10미만이다");
}
//switch문(값: 변수가지고있는값 (봄/여름/가을/겨울...))
let season="여름";
switch(season){
case "봄":
document.write("봄입니다")
break;
case "여름":
document.write("여름입니다")
break;
}
</script>
</body>
</html>
<Ex06조건문실습.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//반환값 -> String
let javaScore = Number(prompt("java점수를 입력하세요"));
let andScore = Number (prompt("Adroid점수를 입력하세요"));
let webScore = Number (prompt("Web점수를 입력하세요"));
let total=javaScore+andScore+webScore;
let avg=(total/3).toFixed(2);
//toFixed: 소수점 자리지정
let grade;
if(avg>=90){
grade = "A"
}else if(avg>=80){
grade = "B"
}else if(avg>=70){
grade = "C"
}else{
grade = "F"
}
console.log("당신의 평균은" +avg+ "이고 학점은"+grade+"입니다")
</script>
</body>
</html>
<ex07조건문배경실습.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var color = prompt("색깔을 적어주세요(빨강,초록,파랑)");
//String 비교
//color=="빨강"
switch(color){
case "빨강":
document.querySelector("body").style.backgroundColor = "red";
break;
case "초록":
document.querySelector("body").style.backgroundColor = "green";
break;
case "파랑" :
document.querySelector("body").style.backgroundColor = "blue";
break;
}
</script>
</body>
</html>반복문
어떤 조건에 만족할 때 까지 같은 처리를 반복하여 실행하는 구문
while문 do~while문 for문
<Ex08반복문.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//While문
var num = 1;
while(num<=10){
document.write(num);
num++;
}
for(let i =1; i<=10; i++){
document.write(i);
}
//문제1
let first= Number(prompt("시작할 숫자를 입력해주세요"));
let last = Number(prompt("마지막 숫자를 입력해주세요"));
var sum=0;
for(let i=first; i<=last; i++){
sum+=i;
}
console.log (first +"부터 "+last+"까지의 합 >>"+ sum);
</script>
</body>
</html>
<ex09반복문실습.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let rd = Math.floor(Math.random()*100)+1;
while(true){
let num = Number(prompt("숫자를 입력해주세요"));
if(num==rd){
alert("정답입니다 축하합니다🎉");
break;
}else if(num>rd){
alert("입력한 숫자보다 작은 수 입니다...");
}else{
alert("입력한 숫자보다 큰 수 입니다...");
}
}
</script>
</body>
</html>
for-in , for-of => 배열, object등의 형태를 다룰 때 사용
실행위치 내부,외부,온라인
HTML5 UP
Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.
html5up.net
<Ex10JS작성위치.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 내부방식 -->
<script>
var a =10;
</script>
<!-- 외부방식 -->
<!--async : 브라우저가 렌더링을 하는 동안(html 파싱) 병렬로
js 다운로드 명령 js 다운로드가 완료되면 html 파싱 멈춤 -> 다운로드한 js 실행
다운로드 받는 속도 절약할 수 있음, html 파싱이 잠깐 멈추기 때문에 페이지를 보는데 시간이 걸림,
내가 원하는 화면이 안나올 수도 있음(파싱이 더 빨랐을 때) -->
<script async src="./Ex10.js"></script>
<!-- 모든 js 파일이 다운로드되고 html 파싱 이후에 실행 -->
<script defer src="./Ex10.js"></script>
<title>Document</title>
</head>
<body>
<!-- 인라인방식 -->
<button onclick="ck()">클릭</button>
<button onmouseenter="alert('마우스올림!')">마우스올리기</button>
<button onmousewheel="alert('스크롤!')">스크롤내리기</button>
<!-- 내부방식 -->
<script>
var b=10;
</script>
</body>
</html><Ex10.js>
function ck(){
alert("외부자바스크립트호출!")
}객체(object)
키(key)-값(value)를 쌍으로 데이터를 저장하는 구조
배열(array)
여러 자료들을 한꺼번에 다룰 수 있는 자료구조
- 여러 자료형을 섞어서 하나의 배열에 저장 가능
배열의 특징
- 인덱스와 인덱스에 대응하는 데이터 들로 이루어진 자료 구조: 배열에 데이터를 추가할 때 자동으로 공간 할당
- 모든 타입을 저장할 수 있는 구조: 한 배열의 요소가 모두 같은 타입일 필요 없음, 다른 배열이나 객체를 포함할 수도 있음
- 인덱스 0부터 시작: 배열의 시작 위치에서부터 데이터가 있는 상대적인 위치를 의미
배열의 크기
- 배열의 크기는 동적이다
- 배열의 크기가 지정되어 있어도 데이터를 추가하면 저장공간이 자동으로 할당된다
- 배열의 크기는 배열의 length 프로퍼티(property)에 저장
<Ex11배열.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//배열 생성, 값할당
let list1 = [1,2,3];
let list2 = new Array(1,2,3);
//배열 선언 후 값을 나중에 할당
let list3 = [];
list3[0] =1;
list3[1] =2;
//배열에 있는 값 확인
console.log(list2);
console.log(list2.length)
//배열함수
//push: 배열의 맨 마지막 인덱스에 데이터 추가
list3.push(3);
console.log(list3);
//pop: 배열의 맨 마지막 인덱스 데이터 삭제
list3.pop();
console.log(list3);
//unshift : 배열의 맨 앞 인덱스(0)에 데이터 추가
list3.unshift("추가데이터");
console.log(list3);
//shift : 배열의 맨 앞 인덱스(0) 데이터 삭제
list3.shift();
console.log(list3);
//배열 안에 값 출력
//1. forEach문 : Array객체 에서만 사용
//callbackfn(콜백함수) : 함수의 인수로 사용되는 함수
list1.forEach(function(item){
//item: list(배열) 안에 0번 인덱스에 있는 값부터 차근차근 저장
console.log(item);
})
//2. for~in 문 : Object 에서 사용
for(var item in list1){
console.log(item); //객체의 key값
console.log(list1[item]); //key와 매칭되는 실제 값
}
//3. for~of문: Object 에서 사용
for(var item of list1){
console.log(item)
}
</script>
</body>
</html>
<Ex12 배열실습.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let list= [23,54,78,13,44];
let max = list[0]; //내가 지금까지 본 값 중에 제일 큰수
for(var item of list ){
if(item>max){
max=item;
}
}
alert(max);
</script>
</body>
</html>
'Full Stack 교육 회고록' 카테고리의 다른 글
| 8/16-css(박스모델, 신호등 표현) javascript(DOM, htmlelement객체) (1) | 2022.09.16 |
|---|---|
| 8/15 CSS(아이디, 클래스, 계층 선택자) JAVASCRIPT(화살표함수,함수) (0) | 2022.09.15 |
| 9/13- HTML(기초,태그)-정리완료 / javascript(연사자,자료형,입출력,변수) (1) | 2022.09.13 |
| 8/31 자바 멀티캐스킹, 채팅프로그램 (0) | 2022.08.31 |
| 8/30 [JAVA]- JDBC 응용 (0) | 2022.08.30 |
