💻 HTML & Internet
(2021.09.04) 첫 웹 공부 시작!
생활코딩의 HTML & Internet 강의 내용을 총 정리했습니다.
1. 검색 팁
에디터 검색 : "HTML Editor"
최신 에디터 검색 : "best HTML Editor 2021"
- 이 수업에서는 "ATOM" 에디터를 사용합니다.
2. 웹 페이지 열기
-
다른 사람의 컴퓨터에 저장되어 있는 웹 페이지를 읽고 싶을 때
: 주소창에 웹 주소를 입력하면 된다. -
웹 브라우저와 같은 컴퓨터에 있는 파일을 읽을 때
: 윈도우 단축키로 파일 열기
파일 열기 단축키 : Ctrl+O
3. 태그
3.1 태그(TAG)란?
HTML 문서의 구조와 형태를 표현하는 명령어로서, 웹 브라우저에게 어떻게 문서를 출력할 것인가에 대해 명령합니다.
앞에 있는 태그를 열리는 태그, 뒤에 있는 태그를 닫히는 태그라고 합니다. 닫히는 태그는 앞의 것과 구분하기 위해 /(slash)를 붙입니다.
모르는 태그가 나올 때,
검색어 "HTML 태그명 tag"로 검색합니다.
- 검색을 해서 예제를 먼저 보고 나서 직접 코드를 구현하고,
어떤 기능을 하는지 예상해본 후에 Definition을 읽어서 확장시키는 것이 좋습니다.
3.2 주요 태그 모음
🖤 폰트 색상 바꾸기
<font color="색상">바꿀글자</font>- CSS에서 더 좋은 코드를 배웁니다.
이 태그는 알아만 둡시다.
🖤 주석 처리 태그
<!-- 주석 -->🖤 글자 진하게 만들기
<strong>문장</strong>🖤 글자에 밑줄 치기
<u>밑줄을치고싶은문장</u>🖤 제목(크기 조절)
<h1>문장</h1>⌨️ 코드 작성
<h1>HTML</h1>
<strong>첫 번째</strong> 웹 만들기!! <U>파이팅</u>!</br>
2021.09.05 (일) 오전 2:02👉🏻 결과
https://images.velog.io/images/cse_pebb/post/1461e1c2-00d8-493c-aa40-f48a365babb9/image.png
🖤 한 줄 바꾸기
<br>🖤 한 단락 바꾸기
<p>단락</p>- 단점 : 여백이 정해져 있어서 시각적으로 자유도가 떨어집니다.
그렇지만 CSS에서 태그와 태그 사이의 여백을 나타내주는 코드가 있어서 해결이 가능합니다. 해당 코드는 아래와 같습니다.
</p><p style="margin-top:40px">
//단락의 위쪽에 40px만큼의 여백 생성- 앞 단락의 닫히는 태그와 뒷 단락의 열리는 태그 사이에서, 열리는 태그에 작성합니다.
⌨️ 코드 작성
<h1><결실과 장미></h1>
<h3>에드가 게스트</h3>
<p>크건 작건간에,<br>
꽃들이 여기저기 피어 있는<br>
아름다운 정원을 갖고자 하는 이는<br>
허리를 굽혀서 땅을 파야만 한다.<br></p>
<p>소망만으로 얻을 수 있는 것은<br>
이 세상에서 극히 적은 까닭에<br>
우리가 원하는 가치있는 것은 무엇이건<br>
일함으로써 얻어야 한다.<br></p>
<p>당신이 어떤 것을 추구하는가 하는 것은<br>
문제가 아니다.<br>
그것의 비밀이 여기 쉬고 있기에<br>
당신은 끊임없이 흙을 파야 한다.<br>
결실이나 장미를 얻기 위해선.<br></p>
력하세요👉🏻 결과
https://images.velog.io/images/cse_pebb/post/eda7aa74-6888-4cfa-aa5c-ee6f5bc18f65/image.png
🖤 이미지를 웹페이지에 포함시키기
<!--
위, 아래는 같은 코드입니다.
width로 이미지의 너비 조절 가능
-->
<img src="이미지파일명.jpg" width="몇%">
<img width="몇%" src="이미지파일명.jpg">- 이미지를 현재 진행하고 있는 프로젝트의 폴더에 저장하고,
ATOM에서 오른쪽 버튼을 눌러 rename하면 이미지 파일명을 좀 더 짧고 쉽게 작성할 수 있습니다. - src = source
- unsplash 사이트 링크 - 저작권 없는 무료 이미지 다운로드 가능
⌨️ 코드 작성
<h1><결실과 장미></h1>
<img src="rose.jpg" width="10%">
<h3>에드가 게스트</h3>
<p>크건 작건간에,<br>
꽃들이 여기저기 피어 있는<br>
아름다운 정원을 갖고자 하는 이는<br>
허리를 굽혀서 땅을 파야만 한다.<br></p>
<p>소망만으로 얻을 수 있는 것은<br>
이 세상에서 극히 적은 까닭에<br>
우리가 원하는 가치있는 것은 무엇이건<br>
일함으로써 얻어야 한다.<br></p>
<p>당신이 어떤 것을 추구하는가 하는 것은<br>
문제가 아니다.<br>
그것의 비밀이 여기 쉬고 있기에<br>
당신은 끊임없이 흙을 파야 한다.<br>
결실이나 장미를 얻기 위해선.<br></p>
력하세요👉🏻 결과
https://images.velog.io/images/cse_pebb/post/5debdece-71ac-4564-a096-c6aa2a8a1e87/image.png
🖤 목록 태그와 목록들을 묶어주는 ul과 ol 태그
태그가 서로 포함관계일 때,
포함하는 태그를 parent, 포함되는 태그를 child 라고 합니다.
목록 태그인 li 태그
<li>목록1</li>
<li>목록2</li>
...- li = list
li 태그의 부모 태그인 ul 태그
li 항목이 어디서부터 어디까지 연관된 항목인지 경계를 구분해줍니다. 각 목록 앞에 동그라미가 붙습니다.
<ul>li항목각각에</ul>- ul = Unordered List
- li 태그는 반드시 부모 태그인 ul 태그를 가지고 있습니다.
⌨️ 코드 작성
<ul>
<li>1. HTML<br></li>
<li>2. CSS<br></li>
<li>3. JavaScript<br></li><br>
</ul>
<ul>
<li>egoing</li>
<li>k8805</li>
<li>youbin</li>
</ul>
<h1><결실과 장미></h1>
<h3>에드가 게스트</h3>
<img src = "coding.jpg" width="10%">
<p>크건 작건간에,<br>
꽃들이 여기저기 피어 있는<br>
아름다운 정원을 갖고자 하는 이는<br>
허리를 굽혀서 땅을 파야만 한다.<br></p>
<p>소망만으로 얻을 수 있는 것은<br>
이 세상에서 극히 적은 까닭에<br>
우리가 원하는 가치있는 것은 무엇이건<br>
일함으로써 얻어야 한다.<br></p>
<p>당신이 어떤 것을 추구하는가 하는 것은<br>
문제가 아니다.<br>
그것의 비밀이 여기 쉬고 있기에<br>
당신은 끊임없이 흙을 파야 한다.<br>
결실이나 장미를 얻기 위해선.<br></p>👉🏻 결과
https://images.velog.io/images/cse_pebb/post/be82224b-444f-48b2-8ecc-fc802fc8b6a8/image.png
li의 태그의 부모 태그인 ol 태그
ul 태그와 같아 보이지만, ul 태그와는 달리 자동으로 숫자를 넘버링 해주는 태그입니다. ul 태그와는 달리 앞에 동그라미가 붙어있지 않습니다.
<ol>li항목</ol>- ol = Ordered List
⌨️ 코드 작성
<ol>
<li>HTML<br></li>
<li>CSS<br></li>
<li>JavaScript<br></li><br>
</ol>
<ol>
<li>egoing</li>
<li>k8805</li>
<li>youbin</li>
</ol>
<h1><결실과 장미></h1>
<h3>에드가 게스트</h3>
<img src = "coding.jpg" width="10%">
<p>크건 작건간에,<br>
꽃들이 여기저기 피어 있는<br>
아름다운 정원을 갖고자 하는 이는<br>
허리를 굽혀서 땅을 파야만 한다.<br></p>
<p>소망만으로 얻을 수 있는 것은<br>
이 세상에서 극히 적은 까닭에<br>
우리가 원하는 가치있는 것은 무엇이건<br>
일함으로써 얻어야 한다.<br></p>
<p>당신이 어떤 것을 추구하는가 하는 것은<br>
문제가 아니다.<br>
그것의 비밀이 여기 쉬고 있기에<br>
당신은 끊임없이 흙을 파야 한다.<br>
결실이나 장미를 얻기 위해선.<br></p>
👉🏻 결과
https://images.velog.io/images/cse_pebb/post/de9658a2-0877-4b17-a036-0f5595d85cbc/image.png
🖤 웹 페이지의 제목을 사용자에게 알려줄 수 있는 태그
책 표지와 같은 느낌입니다. 웹에 접속했을 때 탭에 뜨는 웹 페이지 제목을 말합니다.
<title>제목</title>🖤 웹 브라우저에게 UTF-8로 열도록 해주는 태그
특히 한글이 깨지지 않도록 해줍니다.
<meta charset="utf-8">🖤 본문과 본문 설명 부분을 구분해주는 태그
위에서 설명한 title이나 meta와 같은 코드들은 본문을 설명해주고, 본문과는 별개입니다.
본문을 설명해주는 부분과 본문을 나누어야 할 필요성이 있습니다.
따라서 본문을 설명하는 부분과 본문을 표시해주는 태그를 사용해주어야 합니다.
<head>본문설명부분</head>
<body>본문</body>
🖤 head, body를 포함한 전체 코드 모두를 감싸는 태그
⌨️ 코드 작성
<!doctype html>
<html>전체코드</html><!doctype html>
<html>
<head>
<title>WEB1 - html</title>
<meta charset="utf-8">
</head>
<body>
<ol>
<li>HTML<br></li>
<li>CSS<br></li>
<li>JavaScript<br></li><br>
</ol>
<ol>
<li>egoing</li>
<li>k8805</li>
<li>youbin</li>
</ol>
<h1><결실과 장미></h1>
<h3>에드가 게스트</h3>
<img src = "coding.jpg" width="10%">
<p>크건 작건간에,<br>
꽃들이 여기저기 피어 있는<br>
아름다운 정원을 갖고자 하는 이는<br>
허리를 굽혀서 땅을 파야만 한다.<br></p>
<p>소망만으로 얻을 수 있는 것은<br>
이 세상에서 극히 적은 까닭에<br>
우리가 원하는 가치있는 것은 무엇이건<br>
일함으로써 얻어야 한다.<br></p>
<p>당신이 어떤 것을 추구하는가 하는 것은<br>
문제가 아니다.<br>
그것의 비밀이 여기 쉬고 있기에<br>
당신은 끊임없이 흙을 파야 한다.<br>
결실이나 장미를 얻기 위해선.<br></p>
</body>
</html>
🖤 링크를 달아주는 태그
<!--해당 창에서 열림-->
<a href="링크주소">링크를걸고싶은문장</a>
<!--새 탭에서 열림-->
<a href="링크주소" target="_blank">링크를걸고싶은문장</a>
<!--마우스를 올려놨을 때 어떤 링크인지 알려주고 싶을 때-->
<a href="링크주소" title="설명">링크를걸고싶은문장</a>- a : anchor
- h : hyperlink
- ref : reference
⌨️ 코드 작성
<!doctype html>
<html>
<head>
<title>WEB1 - html</title>
<meta charset="utf-8">
</head>
<body>
<ol>
<li>HTML<br></li>
<li>CSS<br></li>
<li>JavaScript<br></li><br>
</ol>
<ol>
<li>egoing</li>
<li>k8805</li>
<li>youbin</li>
</ol>
<a href="https://www.w3.org/TR/html52/" title="html5.2 specification">링크를 넣어보자</a>
<h1><결실과 장미></h1>
<h3>에드가 게스트</h3>
<img src = "coding.jpg" width="10%">
<p>크건 작건간에,<br>
꽃들이 여기저기 피어 있는<br>
아름다운 정원을 갖고자 하는 이는<br>
허리를 굽혀서 땅을 파야만 한다.<br></p>
<p>소망만으로 얻을 수 있는 것은<br>
이 세상에서 극히 적은 까닭에<br>
우리가 원하는 가치있는 것은 무엇이건<br>
일함으로써 얻어야 한다.<br></p>
<p>당신이 어떤 것을 추구하는가 하는 것은<br>
문제가 아니다.<br>
그것의 비밀이 여기 쉬고 있기에<br>
당신은 끊임없이 흙을 파야 한다.<br>
결실이나 장미를 얻기 위해선.<br></p>
</body>
</html>
👉🏻 결과
https://images.velog.io/images/cse_pebb/post/cb77002b-33f6-41f4-adad-4b977655e2fd/image.png
🖤 html 기본 틀
<!doctype html>
<html>
<head>
<meta charset = utf-8">
<title></title>
</head>
<body>
</body>
</html>4. 실습
여러 개의 html 파일을 만들고, 목록을 클릭하면 해당되는 html 파일에 접속할 수 있도록 해주는 코드를 작성합니다.
⌨️ 코드 작성
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTM</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>The World Wide Web (WWW), commonly known as the Web, is an information system
where documents and other web resources are identified by Uniform Resource Locators,
which may be interlinked by hyperlinks, and are accessible over the Internet.
The resources of the Web are transferred via the Hypertext Transfer Protocol (HTTP),
may be accessed by users by a software application called a web browser,
and are published by a software application called a web server.
The World Wide Web is not synonymous with the Internet, which pre-dated the Web
in some form by over two decades and upon which technologies the Web is built.</p>
</body>
</html>👉🏻 결과
업로드 필요..
5. 서버와 클라이언트, 웹 호스팅
요청하는 컴퓨터 : client(클라이언트)
응답하는 컴퓨터 : server(서버)
인터넷이 연결되어있는 각 컴퓨터를 host라고 하고,
웹 서버를 운영하기 위한 컴퓨터, 즉 host를 빌려주는 업체를 web hosting 업체라고 합니다.
web hosting을 해주는 가장 유명한 업체는 github입니다.
github는 홈페이지를 운영할 수 있는 웹 서버를 제공해줍니다.
- github 외의 웹 호스팅 사용시 검색어 : (free) static web hosting
github 외의 추천 서비스
- https://www.bitballoon.com/
- https://neocities.org/
- Amazon S3
- Google Cloud Storage
- Azure Blob
프론트엔드와 백엔드
front end(프론트엔드) : HTML, CSS, JavaScript
back end(백엔드) : JSP, PHP, Node.js
6. 부록
🖤 체크박스 만들기
<input type="checkbox">🖤 동영상 링크 삽입
<iframe>링크등의내용</iframe>강의 영상 부록 부분은 추후에 다시 공부
아래 미완성 내용. 수정 필요
댓글 기능
댓글을 추가할 수 있는 서비스 링크
자세한 방법은 블로크 링크 참고
방문자와의 채팅 기능
채팅 기능 제공 서비스 링크
