본 내용은 생활코딩 홈페이지에 게시된 "WEB1 - HTML & Internet" 의 일부를 요약한 것입니다.
https://www.opentutorials.org/course/3084
WEB1 - HTML & Internet - 생활코딩
--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여
www.opentutorials.org
태그(tag)
<> : 태그
- HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here... </tagname>
- 다양한 태그가 있으며, 일반적으로 시작태그와 종료태그 사이에 내용을 넣으면 된다.
<strong> : 글자를 진하게
<u> : 밑줄 나타낼때(underline)
<br> :줄바꿈할때 (line-break)
<p>: 단락 구분할때 (paragraph)
<img src="sample.jpg" width="100%"> : 이미지 삽입하고 싶을때
*어트리뷰트[scr , width]는 순서 상관없음.
부모태그 자식태그
<li>: 목록으로 나타내고 싶을때 (list)
<ul> : 특정 목록을 순서표기없이 그룹화 (unorderd list)
<ol>: 특정 목록을 순서표기하여 그룹화 (orderd list)
<title> 웹페이지의 제목을 나타낼때
<meta charset="utf-8"> : 본문의 문자 인코딩 방식을 나타낼때 , 한글쓸때 인코딩 안해주면 깨짐.
<head> , <body> ,<html> : 본문에 해당하는 내용은 바디에 , 본문을 규정하는 내용은 <head>에 , <html>은 헤드와 바디를 포함한다.
* VSCODE에서 느낌표(!) 탭 키로 빠르게 html 문서 틀을 만들수있다.
<a > : 글자에 링크를 걸어주고 싶을때 (anchor)
어트리뷰트 [href="" , target="" , title="" .....]
<a href="https://www.lipsum.com/" target="_blank" title="lorem ipsum 설명">
-> 글자를 클릭하면 해당 링크로 이동하며 ,이동시 새탭으로 열린다. 글자에 마우스를 갖다대면 툴팁이 나타난다.
활용
[1] 웹페이지에서 각각의 글을 클릭했을때 서로 다른 페이지로 이동
- <a href =""> 활용한다.
- 이동하는 페이지에 맞는 html 파일을 각각 만들어준다.
[2] 웹페이지를 다른 클라이언트에 공유
- VSCODE 에서 "live server" ,"ip address"익스텐션 설치
- "live server" 는 실시간 서버를 클라이언트에게 제공해준다. (VSCODE 우측 하단에 go live 클릭)
- "ip address" 는 현재 서버의 주소를 알수있게 해준다. 예) http:127.0.0.1:5500
* "live server" 익스텐션 사용하면 html 변경사항을 실시간으로 확인할수 있음.
