위코드 사전스터디를 진행하며, 공부했던 흔적을 나름 정리해보려고 합니다.
HTML강의는 본격적인 내용인 4강부터 시작해보도록 하겠습니다.🔥🔥
📌 4. 코딩과 HTML
세상에는 다양한 종류의 코드가 있다.(Java, Javascript, Python, Php...)
그 중에서 웹페이지를 만드는 코드가 바로 HTML!
HTML은 배우기 정말 쉽지만, 정말 중요하다라는 특징이 있다.
📌5. HTML코딩과 실습환경 준비!
실습 프로그램은 Visual Studio Code를 사용했습니다.
WEB이라는 폴더안에 1.html이라는 파일을 만들었다.
웹페이지의 확장자가 .html이며, 현재 1이라는 이름의 웹페이지를 만드는 중이다.
웹페이지를 만들고, hello, web!이라는 코드를 입력하여 웹페이지를 열어보는 것까지 성공!
📌6. 기본문법 태그
실습의 내용은 현재 거주하고 있는 인천광역시에 대해서 다뤄보도록 합니다.
'대문과 같은 곳' 을 강조해서 진하게 표시하고 싶다면 어떻게 할까??
- strong태그로 진하게 표시하고 u태그로 밑줄을 그었다.
- 앞에 있는<> -> 열리는 태그
- 뒤에 있는</> -> 닫히는 태그
📌7. 혁명적인 변화
이제 무엇을 모르는지 알았으니 궁금한 건 검색해보자!
h 태그는 제목을 나타내고, 숫자가 높을수록 크기가 줄어드는구나!
h1 태그를 이용하여 제목을 표시했다!
태그를 다 외울 수도없고 필요도 없다. 이제 무엇을 모르는지 알았으니,
구글을 이용하도록 하자👍
📌9. 줄바꿈 : br vs p
글이 시각적으로 답답하여 줄바꿈 태그를 찾아보았다.
br태그 = 단순 줄바꿈.
p태그 = 단락을 나누는 줄바꿈.
p태그를 사용하여 단락을 나눴다.
단락의 간격은 CSS로 정교하게 조절할 수 있기때문에,
의미에 맞는 태그를 사용하는 것이 중요하다👍👍
- 제목을 h1태그를 사용하는 것과 폰트조정기능을 사용하여 제목을 입력 하였을 때
-> 두 제목은 보기에 똑같겠지만, 검색엔진에 검색했을 때 h1태그로 입력한 글이 당연히 앞순위에 나오게 된다!
📌11. 최후의 문법 속성 & img
- img -> 이미지를 웹페이지에 포함할 때 사용하는 코드.
src="~", width"~" -> 이런것들을 속성(attribute)이라고 한다.
좌우 위치는 상관이 없으며, 태그가 태그의 이름만으로는 정보가 부족할 때 속성을 사용하여 더 많은 의미를 부여한다.
📌12. 부모자식과 목록
li태그는 어디서부터 어디까지가 연관된 항목인지 그룹핑을 하기위한
부모태그인 ul(unordered list) 태그가 필요하다.
ol(ordered list) 태그는 자동으로 항목에 넘버링이 된다.
(항목이 일억개면 일일이 칠수 없고, 중간에 새로운 숫자를 넣으면 다 바꿔야하니까!😂)
📌13. 문서의 구조와 슈퍼스타들
-
title -> 웹페이지의 제목을 사용자에게 명시적으로 알려준다. 검색엔진은 책의 표지로 인식하기 때문에 안쓰면 손해!
-
meta charset~ -> 문서가 utf-8방식으로 저장되어있다는 것을 브라우저에게 말해줌
-
body -> 본문을 묶는다.
-
head -> 본문을 설명하는 태그
-
html -> 고위직태그를 감싸는 단 하나의 태그
-
!doctype html -> 이문서는 html이라는 것을 알려줌!
📌14. HTML 태그의 제왕
- a href="링크 주소~~" -> 링크 연결하기
- target "_blank" -> 새창에서 링크 열기
- title"~~" -> 마우스를 올렸을 때 대략적인 링크의 설명 표시.
📌 15. 웹사이트 완성
각 항목에 맞는 내용으로 링크를 걸어서 웹사이트를 완성했다.
(굉장히 허접..😅)
📌16. 원시웹
Internet이라는 전체 안에 WEB이라는 부분이 존재한다!
강인한 핵 공격에도 견딜 수 있는 강인한 통신 시스템의 필요성 대두!
수많은 통신 장치들이 분산해서 전화국과 같은 역할을 하기 때문에 점중에 하나가 사라져도 나머지 점들이 그 역할을 수행할 수 있는 통신시스템이 바로..
그렇게 1990년 팀 버너스 리가 완성한 웹을 만나 대중적으로 쓰이게 되며 폭발적인 성장을 이루었다고 한다...
📌17. 인터넷을 여는 열쇠: 서버와 클라이언트
📌18. 웹호스팅 & github page
github에 가입하여 my-first-web-site라는 저장소(repository)를 생성했다.
그리고 여태 만든 html파일들을 업로드했다.
파일을 눌러 주소를 공유하면 코드자체를 공유하고 다른 사람과 토론도 가능!👍
또한 github은 이코드를 이용해서 웹사이트를 운영할 수 있게 해준다.
settings - 좌측에 Pages에서 가능!
허접한 나만의 웹사이트 완성!
수정본이 있다면 저장소 메인화면에서 Add file - Uplord file로 추가!
📌WEB1 부록 - 코드의 힘 : 동영상 삽입하기
유튜브에서 공유 - 퍼가기를 눌렀을 때 나오는 소스코드 화면!
이것을 그대로 내 웹페이지 코드에 추가해주면..
동영상이 추가되었다!👍👍
📌WEB1 부록 - 코드의 힘 : 댓글 기능 추가
-
Disqus사이트에 들어간다.
-
위 버튼을 누르고 정보 입력
-
Create site를 누른 후 site를 생성
-
밑으로 좀만 내려서 위 버튼 클릭!
-
Universal Code 클릭
- 나오는 코드를 전체 복사해서 내 코드에 붙여넣기
완성🔥🔥
📌WEB1 부록 - 코드의 힘 : 채팅 기능 추가
tawk홈페이지 접속 - 계정을 생성함
- 좌측 톱니바퀴 - Chat Widget
- 코드 전체복사 후 내 코드에 붙여넣기
완성!🔥🔥
채팅이 오면 tawk 관리자모드에는 알림이 전화벨로 온다😀😀
📌WEB1 부록 : 코드의 힘 : 웹사이트 방문자 분석기
구글 애널리틱스를 사용하며, 웹페이지를 만들 시 분석기 사용해서 데이터는 👍무조건👍 쌓아놔야 한다는데..
이 기능은 나중에 필요할 때 다시 한번 보는거로 함...🌝🌝
생활코딩 WEB1 html & Internet
끝!
