HTML 정리 (태그를 중심으로)

Web_Development_Basics/HTML

Break-Limits 2023. 5. 8. 22:00

본 내용은 생활코딩 홈페이지에 게시된 "WEB1 - HTML & Internet" 의 일부를 요약한 것입니다.

WEB1 - HTML & Internet - 생활코딩

--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여

www.opentutorials.org

<> : 태그

- 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> 웹페이지의 제목을 나타낼때

<head> , <body> ,<html> : 본문에 해당하는 내용은 바디에 , 본문을 규정하는 내용은 <head>에 , <html>은 헤드와 바디를 포함한다.

* VSCODE에서 느낌표(!) 탭 키로 빠르게 html 문서 틀을 만들수있다.

<a > : 글자에 링크를 걸어주고 싶을때 (anchor)

어트리뷰트 [href="" , target="" , title="" .....]

-> 글자를 클릭하면 해당 링크로 이동하며 ,이동시 새탭으로 열린다. 글자에 마우스를 갖다대면 툴팁이 나타난다.

[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 변경사항을 실시간으로 확인할수 있음.