WEB1 - html
*이 글은 생활코딩님의 Youtube에 업로드된 강의를 수강하고, 학습한 내용을 정리하기 위해 작성한 글입니다.
<!DOCTYPE html>
<html>
<head>
<title>Security World</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">Security World</a></h1>
<ol>
<li><a href="1.html">Magecart</a></li>
<li><a href="2.html">Pegasus</a></li>
<li><a href="3.html">Darkweb</a></li>
</ol>
<img src="NormalCJ.jpeg" width=50%>
<img src="NarcosCJ.jpeg" width=50%>
</body>
</html>태그(Tag)
기본 구조
<!DOCTYPE html>
<html>
<head>
<title>찬붕이의 개발 블로그</title>
<meta charset="utf-8">
</head>
<body>
- 본 문 -
</body>
</html>1. <!DOCTYPE html>
문서의 타입이 html임을 알려준다.
2. <html> ~ </html>
나머지 웹 페이지 전체 태그를 감싸준다.
3. <head> ~ </head>
HTML 문서의 속성을 지정하기 위한 태그이다. 이 태그 안에 <title>이나 <meta> 태그 등을 넣는다.
- <title> ~ </title>: html의 제목 태그
- <meta>: html의 부가 정보를 선언하는 태그
4. <body> ~ </body>
웹 페이지의 본문을 구성하는 태그이다.
텍스트
1. <h1> ~ </h1>, <h2> ~ </h2>, ... , <h6> ~ </h6>: 제목(heading) 태그이다. 글자 크기에 따라 1~6까지 있다.
<h1>찬붕이의 개발 블로그</h1>
<h2>찬붕이의 개발 블로그</h2>
<h3>찬붕이의 개발 블로그</h3>
<h4>찬붕이의 개발 블로그</h4>
<h5>찬붕이의 개발 블로그</h5>
<h6>찬붕이의 개발 블로그</h6>2. <p> ~ </p>: 문단으로 묶기
*줄을 바꾼것 같아 보이지만 실제로는 한줄로 나옵니다.
<p>
다크웹은 인터넷을 사용하지만 특정 브라우저를 통해서만 접속 가능한 웹으로 익명성을 중요시 하기 때문에 네트워크를
여러번 거쳐 통신합니다. 국가의 검열로 인해 개개인의 이념과 사상을 탄압받는 사람들(인권운동가, 언론인 등)이 이용하기
위해 필요합니다. 하지만 불법적인 일에 익명성을 악용하여 범죄에 활용하기도 합니다.
</p>3. <u> ~ </u>: 아랫줄(underline)
4. <strong> ~ </strong>: 글씨 강조
5. <s> ~ </s>: 취소선
6. <br>: 줄 바꿈
<p>
다크웹은 인터넷을 사용하지만 특정 브라우저를 통해서만 접속 가능한 웹으로 익명성을 중요시 하기 때문에 네트워크를<br>
여러번 거쳐 통신합니다. 국가의 검열로 인해 개개인의 이념과 사상을 탄압받는 사람들(인권운동가, 언론인 등)이 이용하기<br>
위해 필요합니다. 하지만 불법적인 일에 익명성을 악용하여 범죄에 활용하기도 합니다.
</p>목록
1. <ul> ~ </ul>: 순서와 관계 없이 목록을 작성한다.
2. <ol> ~ </ol>: 순서대로 목록을 작성한다. type 설정에 따라 1부터 또는 a부터 등 시작하는 숫자 또는 문자를 설정할 수 있다.
/* 목록 태그는 <ul> 또는 <ol>의 내부에 <li>가 꼭 함께 있어야 한다. 부모와 자식 관계처럼. */
<ol>
<li>파이썬</li>
<li>자바</li>
<li>자바스크립트</li>
</ol>이미지 삽입
<img src="이미지 파일의 경로" alt="이미지에 대한 설명">1. <img>: 이미지를 삽입할 때 사용하는 태그
- src: 이미지 파일의 경로로 http나 https와 같은 url이나 파일의 경로를 입력한다.
- alt: 이미지 파일이 뜨지 않은 경우 설명을 제공하기 위한 용도이다. 웹에서 크롤링할 때 사용된다.
- title: 이미지에 마우스를 갖다대면 뜨는 말풍선에 이미지의 제목을 설정할 수 있다.
- width, height: 이미지의 크기를 설정한다. px이나 % 단위를 사용한다.
하이퍼링크
<a href="https://chaning49.tistory.com/">찬붕이의 개발 블로그</a>1. <a> ~ </a>: 하이퍼링크를 생성하는 태그이다. 보통 href와 함께 사용하고 그 내용은 링크할 페이지이다. 예로는 텍스트, 이미지, url 등이 있다.
github 웹 호스팅
[코드 올리기]
1. github에 가입한 후 왼쪽 상단에 new를 클릭합니다.
2. Repository name에 저장소 이름을 설정한 후 다른 설정은 건들지 말고 맨 아래 Create repository 버튼을 클릭합니다.
3. Quick Setup에 있는 파란 글씨로 된 Uploading an exist file을 클릭합니다.
4. 파일을 드래그해서 추가한 후 Commit changes의 add files via upload 칸에 설명을 간략히 적어주고 맨 아래 Commit changes버튼을 클릭합니다.
[호스팅]
1. ⚙️ Settings로 되어 있는 상단쪽 탭을 클릭합니다.
2. 왼쪽 리스트에 Pages를 클릭합니다.
3. Source라고 되어 있는 부분에 None을 클릭한 후 Main 또는 Master로 바꾼 뒤 Save합니다.
4. 진행상황을 보기 위해 ▶️ Action으로 되어 있는 상단쪽 탭을 클릭합니다.
열심히 쓰긴 했는데, 강의 영상을 보시는게 더 도움될거 같긴 해요 ㅎㅎ;;; 그래서 링크 남겨둡니당 - 링크
다양한 추가 태그를 생성해주는 사이트들
1. 동영상 - Youtube: 유튜브 영상을 추출해주는 태그입니다.(https://www.youtube.com/)
공유 - 퍼가기(embed) 순서로 진행하면 바로 태그를 추출할 수 있습니다.
2. 댓글 - Disqus: 댓글 기능을 사용할 수 있는 태그를 제공하는 사이트입니다. 관리자가 되어 댓글을 관리하고 block할 수도 있습니다.(https://disqus.com/)
가입 후 GET STARTED - I want to install Disqus on my site - 사이트 이름 적기(알아서!)+분류도 아무거나 - 맨 아래에 Universal Code 클릭- 태그 복사
3. 채팅 - twak: 채팅 기능을 추가해주는 태그를 제공합니다. 관리자가 되어 채팅에 답장할 수 있습니다.(https://www.tawk.to/)
가입 후 로그인 - 왼쪽 하단에 ⚙️ 버튼 클릭 - 가운데에 Channels 클릭 - Chat Widget 클릭 - Widget Code에 있는 태그 복사
4. 웹사이트 방문자 분석 - Google Analytics: 웹 사이트를 분석해주는 구글 애널리틱스를 활용하는 방법입니다. (https://analytics.google.com)
가입 후 로그인 - 왼쪽 하단에 ⚙️ 버튼 클릭 - 데이터 스트림 클릭 - '태그하기에 대한 안내' 칸에 포함된 새로운 온페이지 태그 추가 - '전체 사이트 태그(gtag.js) 웹사이트 작성 도구 또는 CMS에서 호스팅하는 사이트를 사용하는 경우 이 태그 사용' 클릭 - 태그 복사