국비 코딩 Feb02 컴퓨팅 사고 / html 기본 정보, 태그
우유문제 (Too Much Milk)
문제1 자취생 한 사람만 계속 우유를 살 수 있음
해결법 : 번갈아 가며 냉장고 문을 열기
or 공금을 걷어서 우유를 사기
or 한 사람만 발견하더라도 사오는건 번갈아가며 사오기
or 주기 설정해서 우유 사기
한달에 A 5번 B 5번 횟수 정해놓고 우유를 사오면 한 번씩 차감하기, 남는다면 이월하기,
자취를 따로 할 때까지 횟수가 남는다면 한 번당 만원씩 보증금에서 까서 갖기
우유를 한 번 먹을 때 줄어드는 용량을 저장
500ml을 먹을 때마다 우유 사와야하는 의무가 한 번씩 늘어남
우유 1L라면 200ml씩 소분해서 자취생 2명이 번갈아가며 먹는다고 가정
마지막에 다 먹은 사람이
문제2 사러간 도중 또 사러갈 수 있음(parallel Processing Problem 병렬 )
해결법 : 사러갈 때 말하고 가기
----
동전노래방 문제 (Lock Implementation)
원인1 어두워서 안에 사람이 있는지 없는지 안보임
해결법1-1 안에 불을 환하게 킴
해결법1-2 사용중이라면 문 밖에 '사용중'이라는 사인이 뜨게끔 네온판 등을 설치
원인2 아무도 방을 지정해주지 않음
해결법2-1 카운터에 직원을 배치해서 빈방을 안내해줌
해결법2-2 키오스크를 설치해 현재 비어있는 방을 알려줌
원인3 어두워서 안에 있는 사람들이 내 친구들이라고 착각함
해결법3-1 방에 번호를 부여하여 입장한 방의 번호를 항상 기억하게 함(or 종이로 출력해줌, 카톡으로 보내줌)
해결법3-2 처음 입장할 때 비밀번호 설정해서 잠금장치 달아놓기 (친구들끼리 비밀번호 공유)
--> 문제가 어려울지라도 실생활에 접목해서 쉽게 생각해야함!
---
선생님 曰 책으로 공부하는건 추천안함 물론 어렵게쓰는덴 이유가 있음
클라우드 생각할필요없음
가장중요한건 자바 기리? 스프링
프론트엔드:html java script
서버: java(spring)
데이터: my sql
----
2/2
html을 배우는 이유 : 프로젝트 할 때 써먹으려고
html은 프로그래밍 언어보단 문서에 가까움
<head></head>는 머리글이며 <body></body>는 본문
hyper text markup language, Markup 언어이기 때문에 그냥 도장 찍듯 찍어넣는 수준 밖에 되지 않음
-basic tag
<html> html의 시작과 끝을 정의하는 태그
<head> html의 머리말을 정의하는 태그
<body> html의 본문 정의, 화면에 보여지는 부분
<h1>~<h6> 본문에서 head line을 정의하는 태그 (숫자가 작을수록 우선순위가 높음)
<p> 단락 줄 바꿈
<br/> 단순 줄 바꿈
<hr/> 가로줄 그어주는 태그
-formatting tag (본문에서 사용되는 태그)
<abbr> 양자들에 대한 설명툴팁(tooltip)제공 (abbreviation 약어의 약어 ㅋㅋ)
<b> 특정 영역을 볼드처리
<del> 취소선
<i> 이탤릭체
<mark> 마크표시
<q> 쿼터표시 (싱글쿼터: ')(더블쿼터: ")
<sub> 아래첨자(X<sub>2</sub>), 윗첨자(X<sup>2</sup>) -> 아래첨자(X2), 윗첨자(X2)
- i-frame tag
다른 페이지를 불러오는 기능 (다만 해당 사이트가 허용하는 부분만 가능)
<iframe width="" height="" src="" title="" frameborder="" allow="" allowfullscreen></iframe>
가로/세로/주소/제목(선택)/경계선(기본1)/원본 사이트에 대한 기타 옵션들 명시/
유튜브 같은거 전체 크기로 확장하는거 허용해줄건지, 삭제하면 허용안하는거임
- Input tag
서버로 보낼 내용을 입력받을 때 사용
< input type="" name="" value="">
name은 서버에 보낼때 그 값의 이름
value는 그 값
checkbox를 하고 name을 같게 하면 한 checkbox로 인식함
-> <input type="checkbox" name="vehicle" value="Bike"/> Bike
<input type="checkbox" name="vehicle" value="Car"/> Car
<input type="checkbox" name="vehicle" value="Boat"/> Boat
<input type="checkbox" name="vehicle" value="Cycle"/> Cycle
이렇게 되면 체크박스에 저 4개지 항목 보이는거
파일 선택하는 input 태그 : <input type="file" name="img" multiple/>
multiple해주면 파일 여러 개 선택 가능
type 종류 중에 하나인 hidden, 이건 text와 똑같다고 봐주면됨
<textarea name="content"></textarea>
textarea는 다량의 텍스트 작성 하거나 전송할 때
이 datalist tag는 option value="volvo"하는 것과 좀 다름
그리고 datalist는 검색도 가능해서 검색의 폭을 훅훅 줄일 수 있음
<input type="date">
<input type="month">
data랑 month 를 달력에서 선택할 수 있게 하려면 type에서 date와 month를 설정해줘야해
<input type="number">
숫자를 작성할 수 있음 min값과 max값 설정가능, 숫자만 가능
<input type="range">
<meter value="90" min="0" max="100"></meter>
<progress value="50" min="0" max="100"></progress>
- <fieldset></fieldset> tag
박스를 만들어줌
<legend></legend> tag
범례, 라는 뜻으로 박스의 제목을 붙여줌
-<form> tag
input에 보낼 값을 넣었다면 form을 통해 서버로 전송해줌
속성 2가지 (action과 method)
action: 데이터를 전달할 서버의 주소
method: 데이터 전송 방식 (get | post)
get : url에 전송할 정보 나타남, 보안성x, 속도o, 기본값, 전송 길이 제한 o
post : url에 전송할 정보 나타나지 않음, 보안성o, 속도x, 전송 길이 무제한
submit 버튼이 있어야만 전송이 가능
- anchor tag
특정 페이지로 이동시켜준다(link)
<a href="" target="_self">링크이름</a>
target="_self" 현재 창에서 보여준다, 기본값,
target="_parent" 이 주소 어디에 link하지? parent창에 띄워야겠다!
target="_blank" 새 창에서 보여준다 / 아예 자기 창 안에다 띄워버림
-List
ul,ol,dl 에 따라 보여주는 형식이 조금씩 다르다
<ul>
<li> 일반적인 리스트, 항목 앞 아이콘
<ol>
<li> 숫자가 앞에 붙음
<dl>
<dt>항목의 제목
<dd>설명
-table
문서 안에 표 만들 때 사용
<caption> : 제목, 볼드체, 가운데정렬
<colgroup> : 각 항목에 대한 스타일 지정
<col width="400">
</colgroup>
<tr> 행 생성
<td> 열 쪼개기
<colspan> 열이 들어갈 폭을 지정(가로로 늘리는거)
<rowspan> 행이 들어갈 폭을 지정(세로로 늘리는거)
둘 다 그 자리가 비어있어야한다는 조건이 있음(뭔가 있다면 주석처리를 하던, 지우던 해야함)