개념을 알게 된다는 것은 체크박스가 늘어난다는 것
HTML
- HTML TAG 순위
- 웹페이지 만드는 코드
- 커서 여러개 : ctrl누르고 마우스 클릭
1. TAG
- br vs p
- p : 단락 표현(정보로 더 가치↑)
- br : 그냥 줄바꿈
- img
<img src="이미지url 또는 해당 html파일과 같은 위치에 있는 이미지"><img src="" width=""> width로 이미지 크기 조정
- li의 부모
- ul : 숫자no, 점 리스트
- ol : 숫자 리스트
- html, head, body
- html : 최상위태그
- head : 본문 설명 (title, meta ...)
- body : 본문
- a
- a href="링크"
- target="_blank" (새창에서 열기)
- title="html5 speicificaion" (링크 설명 - 툴팁)
2. 원시웹
- 인터넷이 도로라면 웹은 도로 위를 달리는 자동차 한 대
- 인터넷이 운영체제라면 웹은 운영체제 위에서 동작하는 하나의 앱
- 1960년 인터넷 탄생
- 1990년 웹 시작 (웹 고향 = 스위스)
- 웹 창시자 : 팀 버너스 리
- 세계 최초의 웹사이트
3. 서버와 클라이언트
- 요청하는 컴퓨터를 클라이언트 컴퓨터
- 응답하는 컴퓨터를 서버 컴퓨터
- 직접 웹서버 설치
- 웹서버 제공업체 이용
4. 웹호스팅 github
- 오른쪽 상단 + 클릭 후 새 저장소
- 저장소 이름 설정 후 만들기
- 올리고자 하는 파일 모두 선택 후 추가
3-1. 파일이 수정 되었을 경우에는 파일 추가 > 파일 올리기 - 설정 > 페이지 > main 클릭 후 save
4-1. 진행과정 실시간으로 보려면 창 하나 새로 띄워서 Action 에서 보기 - page 다시 들어가면 링크 생성 완료 되어 있음
5. 웹서버 운영하기
- web server for Chrome 검색
- CHOOSE FORDER 클릭 후 사용할 폴더 선택
- 위 버튼으로 Web Server: STERTED
- 아래 Web Server URL 나옴 (127.0.0.1 : 나 자신을 뜻함)
- 다른 컴퓨터에서도 보이게 하는 방법
- 두 개의 컴퓨터 같은 인터넷에 연결
- 웹서버 끄기
- Accessible on local network 체크 (같은 네트워크끼리 통신 할 수 있게 해주는 옵션)
- 아래 뜨는 새로운 ip주소를 같은 네트워크에 있는 다른 컴퓨터로 접속
동영상 삽입
- youtube 영상 하단 공유하기
1-1. naver 영상 상단 ... 클릭 후 공유하기
1-2. kakaoTV 영상 상단 화상표 클릭 후 소스퍼가기 - 퍼가기
- iframe 코드 복사
- p태그, div태그 등으로 감싸고 붙혀넣기
댓글 기능 추가
- 직접 구현은 백엔드 기술로 가능
- DISQUS 서비스 사용 (LIVERe라는 서비스도 있음)
- setting > Add Disqus To Site > 하단 get started
- i want to install disqus on my site 클릭
- 웹사이트 이름 설정 > 카테고리 설정 > 하단 create site
- select plane > basic
- Universal Code (사용하는 서비스 있다면 그것을 체크)
- 소스 복사
- p태그, div태그 등으로 감싸고 붙혀넣기
채팅 기능 추가
- tawk 서비스 사용
- 왼쪽 하단 톱니바퀴
- 채팅 위젯 > 소스 복사
