2021-12-16 FE

ansunny1170·2021년 12월 16일
0

UVC BOOTCAMP.FE

목록 보기
1/3
  • 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)는 좀 다르다?
사용자가 입력한 값을 서버로 전송할때 사용되는 입력폼 형태이다.
namevalue값을 서버에서 받는다.

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

  1. 좋아하는 노래 가사 꾸미기
    div, span, font-size, color등을 사용해서 좋아하는 노래의 각 구절, 단어를 꾸며보자.

  2. 입력폼 만들기
    다음의 항목을 이용해서 입력 폼 만들기

이름: text
아이디: text
비밀번호: password
취미: checkbox (독서, 등산, 낚시)
휴대폰 종류: radio (아이폰, 안드로이드)
거주지: select (17개 시도)
비고: textarea
버튼: button (등록, 취소)

  1. 테이블 작성
    위 입력폼에 의해 수집되었다고 가정하고 결과를 표(table)로 그리기 (5row 이상)

putty 설치





filezilla



MariaDB = MySQL

MySQL개발자가 새로만든 MariaDB 완전 동일하게 사용할 수 있다.
postgres 특징 : Database별로 나눌수 있고 하위로 Schemas가 있다.
스키마들안에(schemas) - public(각각의 스키마) - table 로 이어지며 논리적 구조를 추가할 수 있다.
제대로 사용하려 하면 public이 아닌 새로 명명을 해줘야한다.

mariaDB같은 경우 database별로 table이 있고 더이상 추가가 안된다.

shift + art누르면 세로로 동시 수정 가능

Vue.js 기초

Vue.js 프로젝트

profile
4년차 설비 개발 연구원에서 IT 웹 서비스 개발자로 경력 이전을 준비 중입니다. Node.js/Vue.js를 공부하고 있으며, 백엔드 기반 풀스택 개발자를 목표로 하고 있습니다.

0개의 댓글