- vi 편집기 검색해서 자습하기.
WSL공부하지 말것?!
Oracle VM VirtualBox 사용하여 CentOS7 linux
WSL로는 불가한 것들이 가능하다.
저기에 DOCKER를 띄우면 개발하기 쉽다.
# init 0
# init 9
# reboot
# shutdown- stackedit.io 에서 Markdown으로 변경 가능하다. markdown으로 편집가능하고 수정가능하고 google drive와 연동해서 편집이 가능하다.
html 수업
html은 수업자료가 따로 있으니 그 자료를 보기로 한다.
html 실습.md실행
브라우저에서 우클릭 + v => 코드보기 가능
개발자모드(F12)의 Elements의 코드와 좀 다를 수 있다.
<html> ~ </html>
<head> ~ </head> : 문서의 메타 정보가 들어간다.
<title> ~ </title>
<body> ~ </body>
<meta>란?
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials"> //설명
<meta name="keywords" content="HTML, CSS, JavaScript"> //키워드
<meta name="author" content="John Doe"> //작성자 위 3가지는 기획자의 scope이다. 검색 엔진에 걸린다.
//검색엔진을 거부하는 코드를 짤 수도 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
style이라는 속성은 객체형식으로 "font-size : 50px"와 같이 작성해야 입력된다.
html 주석처리는 외부에서 볼 수 있다.
//는 일반적으로 안보이겠지만, Vue.js는 볼 수있는 방법이 있어 조심해야한다.
<a>태그를 이용해서 링크를 걸 수 있다.
href속성에 링크 값을 입력 한다.
url은 절대경로와 상대경로가 있다.
절대경로: 인터넷 어디에서든 통하는 경로(full주소)
상대경로: 내 서버에서만 통하는 주소
target설정에 따라 새창으로 링크를 이동 시킬 수 있다.
- 내 컴퓨터 안의 경로설정도 가능하고, pdf파일등 실행도 가능하다.
../이런식으로 database가 해킹이 가능하기 때문에
브라우저에서../식으로 접근하지 못하게 코딩해줘야 한다.
<p>
기본태그:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
</p>
<p>
새창에서 열기: <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools.com!</a>
</p>
표안에 표 가능
<div> 컨테이너
<div> 기능으로 해당 태크 사이에 전체 속성설정이 가능하다.(차곡차곡 쌓는다?)
-
div아래에 div를 쌓을 수 있고,
-
div옆에 div를 놓을 수는 없다.
사실 특수 기능을 사용하면 옆에 놓을 수 있다. -
div 안에 div를 넣을 수 있다.
외우자
\<div style = " border : 1px solid blue">
<br> 실사용 금지
<span> 인라인 컨테이너
대부분 태그는 <dir>, <span>두개로 떡칠이된다.
style
margin, padding
동시에 적용할 때는 시계방향이다.
color name, RGB(빛의 삼원색), CMYK(색의 삼원색)
HEX(16진수)
size
%로 설정한 것은 브라우저 화면 크기에 따라 변동 된다.
style .class
body는 <body>, h1은 <h1>이다.
해당 태그 안에 효과를 일괄적으로 부여한다.
스타일을 클래스화 하여 편하게 적용 시킬 수 있다.
만약 <body>전역으로 효과를 부여했는데, <body>내부에서 직접적으로 효과를 준다면..?
최종적으로 직접적인 효과를 받게된다.
class는 점(.)으로 표시한다.
스타일 우선순위 (!important)
Form(Input Form)가장 중요.
html과 부트스트랩(vue.js)는 좀 다르다?
사용자가 입력한 값을 서버로 전송할때 사용되는 입력폼 형태이다.
name과 value값을 서버에서 받는다.
text
가장 일반적인 형태의 입력폼으로써 text를 입력 받을 수 있다.
(<input>태그는 닫는 태그가 없다.)
이름: <input name="name" type="text">password
password타입은 입력 값이 ****형태로 보인다.
비밀번호: <input name="password" type="password">radio
하나만 선택해야 하는 상황에서 사용 된다.
<p>당신의 취향은? </p>
<div>
<input type="radio" name="minstyle" value="yes">민초파
<input type="radio" name="minstyle" value="no">반민초파
</div>
<div>
<input type="radio" name="tangstyle" value="verybad">찍먹파
<input type="radio" name="tangstyle" value="so good">부먹파
</div>
name값이 동일한것 끼리 묶인다.
value값이 선택한 값이 된다.
checkbox
여러가지 선택 사항이 있는 경우에 사용 된다.
<p>과일 뭐 사올까?</p>
<input type="checkbox" name="fruit" value="apple">사과<br>
<input type="checkbox" name="fruit" value="orange">오렌지<br>
<input type="checkbox" name="fruit" value="grape">포도<br>
<input type="checkbox" name="fruit" value="grapefruit">자몽<br>
select
드롭다운 버튼의 선택 사항인 경우 사용 한다.
기본적으로 한개만 선택하도록 되어있지만 다중 선택도 가능 하다.
<p>자동차를 고르시오</p>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
textarea
입력받을 내용이 한줄이 아닌 경우 멀티 라인의 입력을 지원 한다.
<p>리뷰 내용</p>
<textarea name="review" rows="8" cols="50">여기에 리뷰를 작성하세요.</textarea>button
버튼은 보통 onClick이벤트와 함께 사용 한다.
<input type="button" onclick="alert('빵!')" value="누르시오">배운내용을 응용해보았다.
Q&A 혹은 고객센터 문의사항 페이지가 떠오른다. 둥둥
iframe
iframe를 이용하면 웹페이지 화면에 작은 창을 내어서 다른 페이지나 다른 사이트의 내용을 볼 수 있다.
<iframe src="https://news.v.daum.net/v/20211214210932915" height="500" width="600" title="Iframe Example"></iframe>border를 없애면 외부 사이트의 내용인지 우리 사이트의 내용인지 알기 어렵다.
코드분석
자 이제 html코드를 “볼” 수 있다.
모르는 태그나 속성들이 나오면 계속 공부 하도록 하자.
참고 (수 많은 태그들을 볼 수 있다.)
(참조 : https://www.w3schools.com/tags/default.asp)
연습문제
아래 이름으로 제출
김예찬html연습문제1.html
김예찬_html연습문제2.html
김예찬_html연습문제_3.html
-
좋아하는 노래 가사 꾸미기
div, span, font-size, color등을 사용해서 좋아하는 노래의 각 구절, 단어를 꾸며보자. -
입력폼 만들기
다음의 항목을 이용해서 입력 폼 만들기
이름: text
아이디: text
비밀번호: password
취미: checkbox (독서, 등산, 낚시)
휴대폰 종류: radio (아이폰, 안드로이드)
거주지: select (17개 시도)
비고: textarea
버튼: button (등록, 취소)
- 테이블 작성
위 입력폼에 의해 수집되었다고 가정하고 결과를 표(table)로 그리기 (5row 이상)
putty 설치
filezilla
MariaDB = MySQL
MySQL개발자가 새로만든 MariaDB 완전 동일하게 사용할 수 있다.
postgres 특징 : Database별로 나눌수 있고 하위로 Schemas가 있다.
스키마들안에(schemas) - public(각각의 스키마) - table 로 이어지며 논리적 구조를 추가할 수 있다.
제대로 사용하려 하면 public이 아닌 새로 명명을 해줘야한다.
mariaDB같은 경우 database별로 table이 있고 더이상 추가가 안된다.
shift + art누르면 세로로 동시 수정 가능
Vue.js 기초
Vue.js 프로젝트
