-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (108 loc) · 6.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<html>
<head>
<title>생활코딩 - WEB</title>
<meta charset="utf-8">
</head>
<body>
<h1>hello world - <u>06/25</u>/23 - <a href="web.html" target="_blank" title="world wide web specification">web</a>1-12</h1>
우클릭 -> 페이지 소스 클릭 -> web page의 html 코드 확인 가능
<p>
<br><strong>H1</strong> - heading 즉, 제목을 나타내는 tag
<br>웹 생성에 사용되는 tag의 수를 분석한 결과 대부분의 웹에서 20-25개의 tag가 사용됨
<br>br - 줄바꿈을 나타내는 tag -> h1처럼 쌍으로 사용할 필요가 없음
</p>
<p>
p는 문단을 나누는 paragraph tag
</p>
<p>
<strong>img - 이미지를 넣는 tag</strong> -> img src(source의 줄임말)="이미지 주소" width="이미지 크기"의 형태로 사용 -> src, width와 같은 부분을 속성(attribute)라고 하며 순서는 상관이 없음
<br> unsplash.com - 저작권 필요 없이 이미지를 사용할 수 있는 사이트
</p>
<p>
tag에는 부모tag와 자식tag가 존재 - 두 관계가 바뀌기도 하지만, 항상 같이 쓰이는 tag들도 존재 -> li와 ul<br>
ul이 부모tag / li가 자식tag
<br>목차를 만들 때 사용하는 tag - li<br>
ul은 여러 li를 문단 나누듯이 나눌 수 있음
<br>ul은 각 li의 숫자를 내가 직접 적어야함 / ol은 자동으로 li에 숫자 부여 -> ul = unordered list / ol = ordered list
<ul>
<li><a href="1.html" target="_blank" title="html specification">1. HTML</a></li>
<LI><a href="2.css.html" target="_blank" title="css specification">2. CSS</a></LI>
<LI><a href="3.JavaScript.html" target="_blank" title="JavaScript specification">3. JavaScript</a></LI>
</ul>
<ol>
<li>생활코딩</li>
<li>코딩도장</li>
</ol>
</p>
<h1><u>06/26</u>/23 - web13-18
</h1>
<p>
title - 파일의 제목을 나타냄
<br><strong>meta charset</strong> - 우리가 작성한 파일은 오른쪽 하단을 보면 UTF-8로 저장됨을 알 수 있음 -> 한글을 썼을 때 글씨가 깨지면 meta charset="UTF-8"을 입력 -> 글씨가 안 깨짐
<br><strong>head는 파일의 제목을 나타내는 tag</strong> -> title, meta charset과 같은 tag들은 head라는 tag로 묶어야함<br>
본문은 body라는 tag로 묶음
<br>body/head tag를 감싸는 태그가 존재 - <a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification"> <strong>html</strong> </a> -> 이 문서가 html이라는 것을 나타내기 위해 html tag 위에는 !doctype html을 추가<br>
<strong>a - 링크를 거는 tag</strong> -> html specification이라고 치면 W3C라는 사이트가 나옴 -> 이 사이트의 주소를 복사한 다음, 내 html 파일에서 링크를 걸고 싶은 문장에 a href="주소"와 같은 식으로 작성하면 해당 사이트로 가는 링크 생성 <br>
a href에서 a는 anchor, h는 hypertext, ref는 reference 의미<br>
링크가 새 탭으로 열리게 하고 싶으면 target="_blank" 입력<br>
클릭하기 전에 링크가 무엇인지 알려주고 싶으면 title="툴팁으로 알려주고 싶은 내용"입력하면 툴팁 생성
</p>
<p>
<strong>web hosting = cloud</strong> - 대표적인 것이 github <br>
</p>
<h1><u>06/28</u>/23 - web19
</h1>
<p>
<strong>web server</strong> - 대표적인 것이 live server -> 실시간으로 웹이 갱신됨<br>
http://127.0.0.1:5500/index.html를 해부해보면<br>
http - hyper text transfer Protocol <br>
127.0.0.1 - internet protocol address -> 내 컴퓨터를 나타내는 주소 - 개발할 때 많이 사용하는 ip 주소 <br>
5500 - port - 여러개의 서버가 존재할 때 각각의 서버가 port 번호를 가짐
</p>
<p>
<input type="checkbox"> - 제대로 작동하는지 확인하기 위해 2번의 테스트 필요 <br>
<input type="checkbox"> - 2개는 4번의 테스트 필요<br>
<input type="checkbox"> - 3개는 8번의 테스트 필요 <br>
<strong>CSS</strong> - 웹사이트를 예쁘게 하기 위해 필요 <br>
<strong>javascript</strong> - 사용자와 상호작용하는 웹사이트를 만들기 위해 필요 <br>
<strong>JSP/PHP/Node.js</strong> - back end(하나의 파일을 고치면 여러 웹사이트들이 수정되는 기술)을 사용하기 위해 필요 셋 중에 하나 배우면 됨 <br>
동영상을 넣기 위해 iframe이라는 코드 사용 - <iframe width="200" height="100" 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; web-share" allowfullscreen></iframe> <br>
<strong>disqus/livere</strong> - 웹페이지에 댓글창을 만들기 위해 사용 <br>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://web1-olx6zspyka.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript><br>
<strong>tawk</strong> - 웹페이지에 채팅창 생성 <br>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/649bcb70cc26a871b02516de/1h4095c50';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
<br> <strong>analytics.google.com</strong> - 내 웹페이지에 대한 이용자들의 활동 통계 확인 가능
</p>
</body>
</html>