Oracle VM VirtualBox 사용하여 CentOS7 linux
WSL로는 불가한 것들이 가능하다.
저기에 DOCKER를 띄우면 개발하기 쉽다.
# init 0
# init 9
# reboot
# shutdown
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"
와 같이 작성해야 입력된다.
//
는 일반적으로 안보이겠지만, Vue.js는 볼 수있는 방법이 있어 조심해야한다.
<a>
태그를 이용해서 링크를 걸 수 있다.
href
속성에 링크 값을 입력 한다.
url
은 절대경로와 상대경로가 있다.
절대경로
: 인터넷 어디에서든 통하는 경로(full주소)
상대경로
: 내 서버에서만 통하는 주소
target
설정에 따라 새창으로 링크를 이동 시킬 수 있다.
../
이런식으로 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 style = " border : 1px solid blue">
대부분 태그는 <dir>, <span>두개로 떡칠이된다.
%
로 설정한 것은 브라우저 화면 크기에 따라 변동 된다.
body는 <body>, h1은 <h1>이다.
해당 태그 안에 효과를 일괄적으로 부여한다.
스타일을 클래스화 하여 편하게 적용 시킬 수 있다.
만약 <body>전역으로 효과를 부여했는데, <body>내부에서 직접적으로 효과를 준다면..?
최종적으로 직접적인 효과를 받게된다.
class는 점(.)으로 표시한다.
html과 부트스트랩(vue.js)는 좀 다르다?
사용자가 입력한 값을 서버로 전송할때 사용되는 입력폼 형태이다.
name
과 value
값을 서버에서 받는다.
가장 일반적인 형태의 입력폼으로써 text를 입력 받을 수 있다.
(<input>태그는 닫는 태그가 없다.)
이름: <input name="name" type="text">
password타입은 입력 값이 ****형태로 보인다.
비밀번호: <input name="password" type="password">
하나만 선택해야 하는 상황에서 사용 된다.
<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
값이 선택한 값이 된다.
여러가지 선택 사항이 있는 경우에 사용 된다.
<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>
드롭다운 버튼의 선택 사항인 경우 사용 한다.
기본적으로 한개만 선택하도록 되어있지만 다중 선택도 가능 하다.
<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>
입력받을 내용이 한줄이 아닌 경우 멀티 라인의 입력을 지원 한다.
<p>리뷰 내용</p>
<textarea name="review" rows="8" cols="50">여기에 리뷰를 작성하세요.</textarea>
버튼은 보통 onClick이벤트와 함께 사용 한다.
<input type="button" onclick="alert('빵!')" value="누르시오">
배운내용을 응용해보았다.
Q&A 혹은 고객센터 문의사항 페이지가 떠오른다. 둥둥
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 (등록, 취소)
MySQL개발자가 새로만든 MariaDB 완전 동일하게 사용할 수 있다.
postgres 특징 : Database별로 나눌수 있고 하위로 Schemas가 있다.
스키마들안에(schemas) - public(각각의 스키마) - table 로 이어지며 논리적 구조를 추가할 수 있다.
제대로 사용하려 하면 public이 아닌 새로 명명을 해줘야한다.
mariaDB같은 경우 database별로 table이 있고 더이상 추가가 안된다.