소소한 개발 공부
[HTML] HTML 찍먹해보기1 | a tag, li tag 본문
📝 인프런 [따라하면서 배우는 웹애플리케이션 만들기] - 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/
HTML 태그 사전 사이트
https://opentutorials.org/course/1058
'개발 > 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 |