HTML과 CSS의 개념

HTML

• HTML은 뼈대로, 구역과 텍스트를 나타내는 코드
• HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담음
• head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
• 코딩할때 "consolas" 영문 O와 숫자 0 구분이 되므로 글꼴 많이 씀

CSS

• CSS는 꾸미기로, 잡은 구역을 꾸며주는 것

HTML body안에 들어가는 대표적인 요소

body
구역을 나누는 태그들

<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<pre>
사용자가 
입력한 그대로 
출력
</pre>
<ul>
    <li> bullet point!1 </li>
    <li> bullet point!2 </li>
</ul>

body
구역 내 콘텐츠 태그들

<h1>제목을 나타내는 태그이며, 페이지마다 하나씩 꼭 써줘야 구글 검색이 잘 됨</h1>
<h2>소제목</h2>
<h3>비중은 작지만 각자의 역할이 있음</h3>
<hr>줄을 그어줌</hr>
<br> : 다음 단락으로 넘기기
a(하이퍼링크) : <a href="http://naver.com/"> text </a>
img : <img src="https://www.~" />
input(입력 요소) : <input type="text" />
button : <button> 버튼 이름</button>
textarea(여러 줄의 긴 문장을 입력) : <textarea>text</textarea>
* span : 글자를 꾸밀때 여러가지로 사용
<span style="color:red">글자</span>
<span id=sp1>text</span> // 스타일에서는 "#sp1 {}"로 작성해야 함
<span class=sp1>text</span> // 스타일에서는 .#sp1 {}"로 작성해야 함

* 구글 지도 넣기
구글맵에서 검색 → 넣을 지도 클릭 후 공유 → 지도 퍼가기 → HTML코드 복사 후 바디 안에 붙여넣기 하면 됨

웹 페이지 주소

http://123.0.0.1:12345/test.html

http : protocol(규약) // HTTP, https, file, ftp, telnet, mailto, new 등
123 : 자기자신 로컬 PC
123.0.0.1 : 서버주소 // 웹 페이지를 가진 컴퓨터의 인터넷 주소, IP 주소
12345 : TCP/IP(포트번호) // 서버가 브라우저로부터 접속을 기다리는 TCP/IP 포트 번호, 프로토콜마다 다르며, HTTP의 경우 80, telnet은 23
test.html : URL // 웹 페이지의 HTML 파일 이름
경로명은 포트번호와 URL 사이에 생성되며 웹 서버 내 웹 페이지 파일의 폴더 경로를 나타냄