소소한 개발 공부

[HTML] HTML 찍먹해보기1 | a tag, li tag 본문

개발/Web

[HTML] HTML 찍먹해보기1 | a tag, li tag

이내내 2021. 5. 16. 02:04
📝 인프런 [따라하면서 배우는 웹애플리케이션 만들기] - Egoing Lee 를 보고 공부하며 작성한 글입니다.
링크 : 따라하면서 배우는 웹애플리케이션 만들기

 

 

웹을 다룰 때 중요한 언어인 HTML에 대해 알아보기 전에

웹이 동작하는 매커니즘을 살펴본다.

 

1. 웹 브라우저가 웹서버에 웹 페이지를 요청한다.

2. 웹서버가 웹 페이지를 검색해 웹 브라우저에 응답(HTML문서를 반환)한다.

3. 웹 브라우저가 응답 받은 웹 문서를 출력한다.

 

HTML(Hypertext Markup Language)은 이때 웹 페이지를 구성하는 마크업 언어이다.

- Hypertext : 문서와 문서가 링크로 연결되어 있음

- Markup Language : 태그(Tag) 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지

- Tag : "<>내용</>"  형식으로 된 HTML 문서를 구성하는 기본 단위

 

😃 HTML 파일을 만들어보자.

1. 메모장 열기

2. 다른 이름으로 저장

- 파일 경로 : apache의 htdocs가 있는 위치

- 파일 이름 : "ex_html_1.html"

- 파일 형식 : 모든 파일

- 인코딩 : UTF-8

 

혹은

vscode 같은 소스코드 편집기로 생성 및 작성하면 편리하다.

<strong> tag로 싸인 HTML 글자가 다른 글자보다 진하게 쓰여있는 걸 볼 수 있다.

tag 는 시작태그 <>  끝태그 </> 로 사이에 들어가는 내용에 영향을 줄 수 있다.

 

<!DOCTYPE html> : HTML 문서 유형 정의를 위한 선언문. HTML5를 준수하고 있는 코드임을 나타냄.

😃 html tag

태그 안 쪽에 있는 내용이 html 문서임을 알리는 태그

😃 head tag

문서를 설명하는 정보를 감싸고 있는 태그

😃body tag

문서의 본문을 담는 태그

😃 a tag

HTML 에서 링크를 나타내는 태그

 

예시)

<a>HTML</a>

 "HTML" 이라는 컨텐츠가 링크되어 있음을 나타냄

이렇게만 작성하면 어디에 링크되어 있는지 알 수 없음

 

<a href="https://soso-study.tistory.com/">HTML</a>

속성 href : 연결할 주소 지정

HTML 이라는 컨텐츠가 https://soso-study.tistory.com/ 에 링크되어 있음을 나타냄

 

HTML 글자를 클릭했을 때 다른 창에서 링크를 띄우고자 할 때 target 속성을 추가한다.

<a href="https://soso-study.tistory.com/" target="_blank">HTML</a>

속성 target : 링크를 클릭 할 때 창을 어떻게 열지 설정

_blank : 새로운 창에서 링크가 걸린 문서를 연다.

 

HTML 글자 위에 커서를 가져다 댔을 때 그 링크가 어떤 것을 뜻하는 지 도움말을 작성할 때는 title 속성을 추가한다.

<a href="https://soso-study.tistory.com/" target="_blank" title="링크로 이동하기">HTML</a>

속성 title : 해당 링크에 마우스 커서를 올릴 대 도움말을 띄우는 것을 설정한다.

 

결과

 

😃 a tag 속성

href  : 연결할 주소 지정한다.
target  : 링크를 클릭 할 때 창을 어떻게 열지 설정한다.

target 방식
_self : 링크를 클릭한 해당 창에서 연다.
_blank : 링크를 새창으로 연다.
_parent : 링크를 부모 창에서 연다. (부모 창이 없으면 _self 속성으로 처리한다)
_top : 링크를 전체 브라우저 창에서 가장 상위의 창에서 연다. (부모 창이 없으면 _self 속성으로 처리한다)
title  : 해당 링크에 마우스 커서를 올릴 때 도움말 설명을 설정한다.

* 속성은 " "(공백)을 구분자로 처리한다. 따라서 속성을 쓸 때는 공백과 함께 작성한다.

 

😃 li tag 

리스트 list를 만드는 태그

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<li>html</li>
	<li>css</li>
	<li>javascript</li>
</body>
</html>

 

결과

😃 ul tag

unordered list. 순서가 없는 리스트

😃 ol tag

ordered list. 순서 있는 리스트

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<ul>
	<li>html</li>
	<li>css</li>
	<li>javascript</li>
	</ul>
	<ol>
	<li>html</li>
	<li>css</li>
	<li>javascript</li>
	</ol>
</body>
</html>

결과

list   : list의 약자로 목록을 만드는 태그. 보통 ul 혹은 ol 태그 내부에 들어간다.
  ul : 순서 없이 모양으로 목록을 만듦. 속성
type : 1 / a / A / i / l 기본값 1
type : disc / circle / square 기본값 disc
start : ol 의 시작값
reversed : 항목 순서를 거꾸로
  ol : 번호를 매겨 순서가 있는 목록을 만듦.

 

HTML 참고 사이트

https://dev.w3.org/html5/html-author/

 

HTML5 Reference

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whos

dev.w3.org

HTML 태그 사전 사이트

https://opentutorials.org/course/1058

 

HTML 사전 - 생활코딩

본 코스는 HTML의 사용법을 찾아 볼 수 있는 사전 입니다. 본 코스는 리체님의 HTML 5 Tag Dictionary 모듈을 사용하고 있습니다. 좋은 사전을 만들어주신 리체님 감사합니다. ^^

opentutorials.org

 

'개발 > Web' 카테고리의 다른 글

[CSS] CSS 찍먹해보기2 | link 태그 - css 파일 링크하기  (0) 2021.05.25
[CSS] CSS 찍먹해보기1 | style 태그  (0) 2021.05.24
[HTML] HTML 찍먹해보기2 | 웹페이지 만들기  (0) 2021.05.21
[Web] Apache, PHP, MySQL 제어판 - Bitnami Manager  (0) 2021.05.15
[Web] 윈도우에 웹서버 설치하기 Bitnami / 웹문서 만들기  (0) 2021.05.14
'개발/Web' Related Articles more