웹. 프론트.
최장증가부분수열.
여러 방법으로 풀림. 단 N에 따라 시간 복잡도 테스트.
한뚝수육국밥.
웹은 누구나 배워야..(찍먹해봐~)
보여줄 수 있다.는 장점.
웹을 싫어하지 않았으면..
HTML 트래픽커짐. 몽땅 보내야해서. 바꾸려했지만 이미 구축 된 플랫폼을 갈아 엎는 것보다 그냥 유지하는 게...
CSS
JavaScript Client(Brower)에서 돌아간다.
의심하지 말고 받아들여라...
HTML CSS JS 노베이스는 따라가기 힘듬. 프론트 수업 전 예습하고 올 것.(ZIP 많다..)
https://www.w3schools.com/ - 예제 잘 되어있음..!
------
HTML, Hyper Text Markup Language.
Not Programming Language
변수나 제어문 없이 Markup 언어로 구성.
- Element(요소)
- Attribute(속성)
- Comments(주석)
<!-- -->
Tomcat 9.0 - 서버.
태그 소문자 권장. 대소문자구분x.
UTF-8 로 설정하시오. 한글 안 깨지려면.
# A.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> // attribute, 속성
<title>Insert title here</title>
</head>
<body>
Hello 한글.
</body>
</html>
cmd - ipconfig
192.xxx.xx.xx:8080/sam/a.html
다운 - 해석 - 보여준다.
파싱.
ctl + shift + / => 주석 단축키.
ctl + shift + \ => 주석 해제 단축키.
주석도 클라이언트로 간다. 클라이언트에서 빼고 보여줌.
공백. white space.
HTML은 공백을 한 칸의 black로 처리. 아무리 많아도.
---------------
# B.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>hello</div> <div>world</div>
<span>hello</span> <span>world</span>
<br>
<pre>
yes
gumi
futsal
</pre>
<div>오늘의 메뉴</div>
<ol start = "1", type = "1">
<li>콩나물밥</li>
<li><a href="http://www.plabfootball.com/index.html">순대국밥</a></li>
<!-- 절대주소 -->
<li><a href="http://localhost:8080/sam/a.html">a.html</a></li>
<!-- 상대주소 -->
<li><a href="./../a.html">a.html</a></li>
<!-- 중간 -->
<li><a href="/sam/a.html" target = "_blank">a.html</a></li>
</ol>
<ul>
<li>콩나물밥</li>
<li>순대국밥</li>
</ul>
//name tag 위치로 이동.
<a href = "#aa">aa</a>
<a href = "">bb</a>
<br><br><br><br><br>
<a name = "aa">gumi</a>
<img src="https://img1.daumcdn.net/thumb/S308x188a.q80/?fname=https%3A%2F%2Fthumb.kakaocdn.net%2Fdna%2Fkamp%2Fsource%2Frvb3flv3dkrhb0aa7a6nzmglw%2Fthumbs%2Fthumb.jpg%3Fcredential%3DTuMuFGKUIcirOSjFzOpncbomGFEIdZWK%26expires%3D33246087365%26signature%3DtkypVHGOZoNvPYNUKbnNseJbpYU%253D%26ts%3D1689178565">
<img src="/sam/img/swings.jpg" width = "100">
- <br/>, break return
줄 바꿈.
닫을 필요 없는 것 중 하나(뒤에/추천). 유연성(제멋대로)..
이런 것들을 tag = element = marker = componet 라고 한다.
block 아니면 inline
- <div>
자신이 가질 수 있는 width를 전부 차지.
block level element.
- <span>
자신의 컨텐츠 만큼만 차지.
- <pre>
공백을 보존해줌. white space 그대로.
- <ol>
Ordered list.
- <ul>
Unordered list.
- <li>
List item.
ol, ul 안에서 하나의 Item을 표현.
- <a>
Anchor
특정한 문서에서 문서를 연결할 때. Hyper link to another page
Inline level element
attributes
- href = URL
- target = {_blank | _parent | _self | _top | framename} // _빼먹지말자.
- <img>
크기 지정하면 불러올 때 공간을 비워둠. (느린 네트워크 시 효과적)
옵션을 먼저 받아옴. 비동기 통신을 함.
- <form>
client의 입력을 받아 보낸다.
- <input>
- type
- value
- id, client에서 구분하려고
- name, server에서 사용하려고
INPUT에서 받은 걸 action으로 보낸다.
<%=request.getParameter("a") %> => jsp..
- <select>
- size = "5"
- multiple 은 그냥 이름만 적어도 됨.
- <option>
// => 원격. 다른 컴퓨터 뜻함. 사실 http:가 원격을 뜻해서 빼도 되었는데 후회..
.../index.html => 안 써도 알아서 붙여줌
절대적 주소. 상대적 주소. 절대적 상대 or 상대적 절대
http:// => 절대주소.
나를 기준으로 경로를 찾는 것. => 상대주소.
./ => 내 위치 (그냥바로쳐도된다)
../ => 상위 폴더
/로 시작 => 절대적 상대, 상대적 절대
ip포트에서 시작. 서버 내 최상위에서 시작. ex)localhost:8080/a.html
404 NOT FOUND
F12 개발자 도구.
textarea 빼고 id, name 꼭 설정!
#d.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="a.jsp">
<input type="text" value ="nickname" id ="a" name="a">
<input type="text" value ="password" id = "b" name="b"><br/> <br/>
<textarea rows ="10" cols"3" id ="c" name = "c">입력하시오</textarea>
<br/><input type="submit">
<select id="d" name="d" size='5' multiple >
<option>a
<option>b
<option value = "new c">c // 보이는 건 c 서버로는 newc 보냄.
<option>d
</select>
</form>
</body>
</html>
----
CSS, Cascading Style Sheets
HTML Element(Markup)의 시각적 표현(Appearance) 정의
3가지 방법.
1. INLINE 비추.
2. INTERNAL 헤드 사이에.
3. EXTERNAL 외부에서.
중첩되면 인라인부터.
scss는 알아서 공부.
주석 /* 주석입니다 */
id를 변수 사용해라. 심지어 같아도 버그 안 남..(유연)
선택자.
- * => 모든 유형.
- type selector => element
- # => id에서 적용.
- . => class에서 적용
순수 JS 깊게...?
의료는 .net으로 백엔드.
#e.html
----
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/a.css">
<style type = "text/css">
/* 선택자 */
.gumi {
color:blue/* internal 기법 */
}
</style>
</head>
<body>
hello<br/>
<!-- inline 기법 -->
<div style = "color:#f17236">하늘</div>
hello<br>
<div>하늘</div>
<div id = "sa">한글</div>
<h1 class = "gumi">타이틀</h1>
<div id="sb">한글</div>
<div class="gumi" id = "sc">낙동강</div>
<div class="gumi" id = "sㅇ">금오산</div>
</body>
</html>
#a.css
@charset "UTF-8";
div {
color:yellow;
background:black;
}
----
JavaScript
이것도 HTML에 쓰려고.
"~~'##'~~" 번갈아서.
원래는 javascript: 를 적어야하는데. js만 쓰는 문법들은 생략해도 알아서 js로 인식.
event.
- event source
- event
- event handler
- event listener
소스와 핸들러를 연결 시켜 줌. ex) onclick..
위에서 아래로 쭉 읽는 비동기 방식.
따라서 wait이 없기에 명령만 하고 넘어감. 그래서 확실하진 않음.
#f.html
---
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function f1(){
alert("java");
}
//이벤트, 이벤트핸들러, 이벤트 소스
</script>
<script type="text/javascript" src="js/a.js"></script>
<!-- 안정성이 없음. 비동기로 돌아가서. wait이 없기에. -->
</head>
<body>
<a href="javascript:alert('vara')">java</a>
<button onclick="alert('췤')">확인</button>
<button onclick="f1()">펑션</button>
</body>
</html>
---
input 안은 문자로 본다. 1 + 2 = 12...
parseInt() 는 숫자 아닌 거 들어오면 그 이후 싹 버림.
#g.html
---
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function f1(){
const obja = document.querySelector("#a");
const objb = document.querySelector("#b");
const objc = document.querySelector("#c");
let a = obja.value;
let b = objb.value;
console.log(a,b);
// 숫자가 아닌 다른 문자가 들어오면 그 이후를 버림.
let c = parseInt(a)+parseInt(b);
objc.value = c;
}
</script>
</head>
<body>
a <input type="text" id ="a"><br>
b <input type="text" id ="b"><br>
<button onClick="f1()">더하기</button>
result <input type="text" id="c"><br>
</body>
</html>
---
바르고의 다락방