조코딩의 웹사이트 만들기 링크
조코딩의 코딩 기초와 웹 프로그래밍
프론트엔드 3가지
html은 뼈대잡기
css는 꾸미기(ex.제목은 초록색)
javascript는 로직처리 (ex.아이디 미입력 표시)
html, css는 마크업 언어(프로그래밍 언어가 아님) -> 로직 작성할 수 없음
html 기본 문법
<h1>제목입니다</h1>
-> header 제일 큰거, 사이에 내용을 넣기
제목이 클수록 작아짐
Vscode의 확장 탭에서 live server를 설치하고 맨 밑의 go live를 클릭하면 실시간으로 코드결과를 볼 수 있음.(웹에서 새로고침 해줘야함)
<h1 class='title'>제목입니다.</h1>
속성 입력
<input/> ->
닫는창없고, 스스로 닫는 태그 / 네모 박스 생겨서 입력받는 곳
<input value="값입니다."/>
네모 박스 안에 '값입니다' 들어감
! (or html5) 치면 기본 형태 만들어짐
meta는 속성 값
<meta charset="UTF-8"> 한글보기
밖은 부모태그, 안에 있는건 자식태그
<html>은 최상위 부모이다
head는 안보이는 곳, meta태그
body는 화면에 보이는 것
<title>내 웹사이트입니다</title> -> 위에 뜨는 이름
<html lang="en"> -> 영어, 한글로하려면 ko
구글에 html free template 검색해서 오픈소스 template 찾기
찾을 때, 라이센스 주의하기!
MIT License를 사용(저작권에 큰 문제가 없다). 저작권 고지를 꼼꼼히 읽기
Download해서 압축 풀고, index.html을 들어가면 웹사이트 들어갈 수 있음
Vscode에서 폴더 열고 수정하기
뉴스 기사의 html보는 법
기사를 하나 들어가서 우클릭으로 검사(F12)를 들어간 후, 왼쪽 위의 마우스처럼 생긴걸 클릭하면
해당 코드에 대한 기사내용이 어딘지 확인할 수 있음
-> 다른 기사들을 조작할 수 있다
Deploy
Deploy -> 호스팅, 도메인 설정하기
지금은 내 폴더에만 있으므로, 다른 사람들이 들어올 수가 없다
공개 방법
-
내 컴퓨터 서버로 공개하기 -> 누구나 와서 내 index.html을 받아갈 수 있게 하는 방법, 내 컴퓨터가 서버가 되어서 호스팅 가능
단점 : 내 컴퓨터, 인터넷을 항상 켜놔야 한다. -
외부 서버 빌리기
디플로이 -> 외부 24시간 돌아가는 서버에 보관하면 가져갈 수 있게 해주는 것
이런 서버를 운영하는 곳 : 클라우드 서버 -> aws, Microsoft, Google Cloud(유료), netlify(무료) 등 -
무료인 netlify 써보기
netlify
sign up으로 회원가입 후, sites 메뉴 클릭해서 index.html 파일이 있는 상위폴더를 끌어놓으면 업로드되고 주소가 생성된다.
ex) 시범 링크
url이 이상하니, 바꾸고 싶을 땐,
site settings를 들어가서, change site name으로 이름을 바꿀 수 있음
vscode를 수정해도 실시간 업데이트가 안되는 이유
외부 서버에 올려놓은 것이기 때문에, 우리 컴퓨터에서만 수정한다고 바뀌지 않으니, 다시 올려줘야 함 (내 컴퓨터에서 봤을 땐, 바뀐다)
(+ html을 받아와서 고친다고 해도, 중앙 서버의 html에서는 반영이 안됨)
위에서 해본 기사 조작도, 내 컴퓨터에서만 바꾸고, 중앙 서버에 반영이 안되기 때문에
수정방법
netlify에서 내가 만든 lsahomepage에 들어가서 deploys를 들어가면 Deploys한 내역들이 나온다. 밑에다가 다시 수정한 폴더를 드래그해준다.
밑의 production deploys 에 수정한 시간이 표시된다. Published가 뜨면 반영 완료된 것
기사의 사진, 이미지 올리는 방법
내 브라우저에 있는 이미지를 가져다 쓰게 되면, 보안에 위험이 있으므로 가져올 수 없다
이미지도 이미지 주소가 있다. 그래서 이미지를 어딘가에 올리고, 가져다 쓰면 사용가능
velog에 이미지를 등록하고 거기서 오른쪽 클릭으로 이미지 주소를 복사하여 html에 사용하면, 사용가능하다
동영상, gif도 가능
(+@)
html 연습하기
생활코딩 -> html 수업
