SOCO
html [기본틀]과 [tag] _ 21.05.28 정리 본문
이제 시작한지 4일차라 용어를 잘 모르지만, 그래도 지금까지 배운 내용을 정리해보려고 한다.
스케치북으로 정리하고 있지만, 이렇게 남겨두어야 찾아보기도 편할 것 같고
혹시나 나와 같은 의문을 가진 분이 계시면 '도움이 되지 않을까'하는 마음으로...!
파이팅!
1. html 기본 틀
html을 쓰려면 반드시 써야하는 기본틀(?)이 있다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> ~~~ </title>
</head>
<body>
<h1>~~~</h1>
</body>
</html>
우선 이렇게 배우고 시작하는 것 같다.
2. 여러 tag
tag를 쓸 때는 범위를 설정하는 게 중요하다. 즉, <>열고 </> 닫는 것이 중요하다. 아직 내가 배운 것 중에 닫는 게 없는 tag는 <br>, <img src=" "> <input type="checkbox">정도인 것 같다! 이거 말고는 다 잘 닫아야한다!
1) 글씨를 굵게
<strong>~~~</strong>
2)밑줄
<u>~~~</u>
3)줄바꿈
~~~~~~<br>~~~~~~
4)문단설정
<p>
~~~~~~~~~~~~~
~~~~~~~
</p>
*문단설정과 줄바꿈의 차이가 있다면, 문단설정의 경우 문단 자체를 하나로 묶어주는 역할을 한다. -> CSS를 활용하면 문단 간 간격도 조정할 수 있다.
5)이미지 삽입
<img src="~~~~.jpg">
*image source -> img src
6)list
(1)unordered -> 기호로 list
<ul>
<li>~~~~</li>
<li>~~~~</li>
</ul>
(2)ordered -> 숫자로 list
<ol>
<li>~~~~~</li>
<li>~~~~~</li>
</ol>
7)표
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
| a | b |
| c | d |
tr은 행을 열고 닫는 것, td는 그 행 안에서 열을 열고 닫는 것 정도로 생각하면 될 것 같다.
<table>이라고만 하면 선이 없는 표가 되는데,<table border="1">이라고 하면 선이 생긴다.
8)링크설정
<a href="~~~~~">링크걸기</a>
<a href="~~~.html">링크걸기</a>
인터넷 주소로 링크를 걸 땐 그냥 복붙하면 되고, 다른 페이지로 링크를 걸 땐 해당 페이지의 파일명.html을 쓰면 된다.
*href -> hyper text reference를 의미한다
9)체크박스
<input type="checkbox">
그런데 해당 태그는 자동으로 줄바꿈이 되지는 않는다(아무래도 inline element 인건가...?) 그래서 줄바꿈을 하고 싶을 땐 위에 있는 <br>태그를 사용한다.(공부를 더 열심히 해서 새로운 방법을 알게 되면 업데이트 하겠습니다.)
<input type ="checkbox"> ~~~~<br>
<input type ="checkbox"> ~~~~<br>
10)배경색
<!doctype html>
<html>
<head>
</head>
<body bgcolor="pink"> or <body bgcolor="#~~~">
</body>
</html>
html에서 지원하는 색이 정말 다양하다.
11)동영상 삽입
<iframe>~~~~</iframe>
유튜브에 있는 동영상을 삽입하려면 , 우선 해당 동영상에서 [공유] -> [퍼가기]를 누른다. 그러면 창이 하나 뜨는데
<iframe width="560" height="315" src="https://www.youtube.com/embed/7T7r_oSp0SE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
이렇게 생긴 주소를 복사하면 된다.
*해당 주소는 생활코딩님의 html 동영상 삽입 강의입니다.
12)댓글기능
댓글기능은 html만으로는 불가능하고, 백엔드를 할 수 있어야한다고 한다.다만...! 다른 사람들이 만들어 놓은 코드를 가져올 수 있다.
생활코딩님께서 추천해주신 방법은 다음과 같다
disqus라는 사이트에 들어가서 로그인 -> 우측 상단 [Admin] 클릭 -> 좌측 상단 [your site]클릭 -> [new]클릭 -> name과 category 설정 후 [create site] 클릭 -> 스크롤을 내리고 Basic의 [Subscribe Now]클릭 -> 스크롤을 내려서 [~~~Universal Code]클릭 -> 이때 나오는 코드를 복붙
중요한 건, 웹서버를 통하지 않으면 댓글기능이 추가되었는지를 확인할 수 없다.
따라서 주소를 "127.0.0.1/파일명.html"로 바꾸면 댓글기능이 추가되는 것을 확인할 수 있다!
13)채팅기능
takw.to에 들어가서 로그인 -> 좌측 하단 administration(환경설정아이콘) 클릭 -> chat widget 클릭 -> 코드복붙
채팅기능 역시 웹서버를 통하지 않으면 추가되었는지를 확인할 수 없다.
따라서 주소를 "127.0.0.1/파일명.html"로 바꾸면 댓글기능이 추가되는 것을 확인할 수 있다!
코드블럭으로 작성했었는데, 오류가 계속 뜨네요... 구글링으로 찾아보고 있는데 아직 지식이 부족해서 잘 모르겠습니다 하하
더 찾아보고 다음엔 꼭! 코드블럭으로 작성해볼게요!