YJ의 새벽
HTML (텍스트/태그) 본문
******태그모음 사이트
https://www.tcpschool.com/html-tags/ol
- HTML
**HTML ? (HyperText Markup Language ) : 확장자 : .html .htm
--문법 :: <태그이름> //시작태그
< / 태그이름> //종료태그
--주석처리 : <!-- 주석내용 -->
--태그에 따라 시작태그만 있고 종료태그가 없는 태그도 존재한다.
--<imh> , <br> , <hr> 등과같이 종료태그없고 시작태그만 가지는 태그를 ' 빈 태그 '(empty tag) 라고 한다.
html 요소구조
--html 요소(element)는 여러 속성(Attribute)을 가질수 있으며 --> 요소: 태그이름
--속성은 html 요소중 언제나 시작태그 내에서만 정의되며, 속성이름과 속성값으로 표현.
문법 : < 태그이름 속성이름 = "속성값" >
ex : < img src = "quotes.jpg" alt = "이미지가 없어요" >
html <!DOCTYPE>
-- DOC (문서) + TYPE (종류)
-- 의미 : 이 문서(웹페이지)는 html5의 규칙에 따라 만들어진 문서다. 라고 선언
-- html 문서 맨 위에 <!DOCTYPE html> , 종료태그가 없음.
html 기본구조
1. < !DOCTYPE html> : 현재문서가 html5 문서임을 명시
2. < html > : html 문서의 루트(root) 요소를 정의
3. < head > : html 문서의 메타데이터(metadata) 를 정의
메타데이터: html문서에대한 정보, 웹브라우저에 직접적으로 표현되지않음 ( <title> 태그 제외 )
< title > , < style > , < meta > , < link > , < script > , < base > 등등
4. < title > < /title > : html 문서의 제목을 정의. 검색엔진의 제목으로 표시.
< /head >
5. < body > : 웹브라우저를 통해 보이는 내용(content) 부분
body내용
< /body >
< /html >
EX ))) hello.html 예제. ---------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--한글지원-->
<title>My First HTML page</title>
</head>
<body>
안녕하세요 월드! hello world!
</body>
</html>--> 마우스오른쪽클릭 -> Open with Live Server
EX ))) < h > 태그 !! 제목을 웹 브라우저에 사용할 때 사용하는 태그들------------
<!-- <h> 태그로 작성해야만 검색엔진에의해 제대로 검색될 확률을 높인다. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First HTML page</title>
</head>
<body>
<h1>안녕하세요 월드! hello! (h1태그)</h1>
<h2>안녕하세요 월드! hello! (h2태그)</h2>
<h3>안녕하세요 월드! hello! (h3태그)</h3>
<h4>안녕하세요 월드! hello! (h4태그)</h4>
<h5>안녕하세요 월드! hello! (h5태그)</h5>
<h6>안녕하세요 월드! hello! (h6태그)</h6>
</body>
</html>
EX ))) < p > 태그를 이용한 단락 표현----------------------------
<!DOCTYPE html>
<html lang="ko"> <!-- ko : 한글 -->
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>단락태그 p 사용예제</h1>
<p>안녕하세요 반갑습니다</p>
<p>집가고싶어요</p>
<h2>단락태그 p 예제끝</h2>
</body>
</html>
EX ))) 띄어쓰기 와 줄바꿈< br >---------------------------
*** 공백문자 ::
*** 줄바꿈 :: <br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
오늘 하루도 고생했어요~<br><br>꿀잠
자요 우리
</body>
</html>
EX ))) <pre> </pre> 문자열 그대로 표시 ------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre> 오늘 하루도 고생했어요~
꿀잠 자요 우리
</pre>
</body>
</html>
- 서식 태그
EX ))) < b > < /b > 태그 정리
-- < b > 를 사용하면 , 사용자는 알지만 컴퓨터는 인식할수 없다.
-- < b > 를 대체하는 < strong > 사용 권고 .
EX ))) <del> 태그정리 --취소선글자
-- 글자를 관통하는 줄긋기를 해서 취소/삭제 의 느낌을 줄때 사용
-- 거의 사용하지않지만 , 나무위키/백과사전 사이트에서 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre> 오늘 하루도 고생했어요~
<del>꿀잠 자요 우리</del>
</pre>
</body>
</html>
EX ))) <ins> 태그 정리 --아래밑줄
--<del> 태그와 짝을 이룬다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre> 오늘 하루도 고생했어요~
<del>꿀잠 자요 우리</del>
<ins>꿀잠자요우리</ins>
</pre>
</body>
</html>
** < ul > :: unordered list, 순서가 없는 목록, 불릿으로 표현
** < ol > :: ordered list 순서가 있는 목록, 1,2,3.. 숫자로 표현
- 목록태그 < ol > <ul >
EX ))) < ol > 예제
<body>
<ol>
<li>아메리카노</li>
<li>녹차</li>
<li>쟈스민차</li>
</ol>
<ol type="A" start="10">
<li>아메리카노</li>
<li>녹차</li>
<li>쟈스민차</li>
</ol>
</body>
EX ))) < ul > 예제
<body>
<ul>
<li>아메리카노</li>
<li>녹차</li>
<li>쟈스민차
<ul>
<li>아메리카노</li>
<li>녹차</li>
<li>쟈스민차</li>
</ul>
</li>
</ul>
</body>
EX )))) <dl> , <dt> , <dd> 예제
<body>
<dl>
<dt>호박</dt>
<dd>- 박과의 한해살이 덩굴성 채소</dd>
<dt>상추</dt>
<dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>
</body>
- 링크 태그 ★★★★★
EX ))) < a > 태그 +href
<body>
<a href="http://www.tcpschool.com">티씨피스쿨 사이트로 이동!</a>
</body>
EX ))) < a > 태그 + href + 이미지
<body>
<a href="http://homzzang.com">홈짱닷컴 사이트로 이동!</a>
<a href="http://homzzang.com"><img src="https://source.unsplash.com/random"></a>
</body>
*********< a > 정의
-- 하이퍼링크 (다른 웹페이지 문서로 이동) 또는,
앵커 (현재 페이지의 다른 위치로 이동)
href (Hyperlink Reference ) : 연결고리 참조.
-- 필수속성으로 href (이동할 다른웹페이지 주소) 또는
name/id
--방문하지 않은링크 : 밑줄있는 파란글씨
--이미방문한 링크 : 밑줄있는 자줏빛글씨
--클릭하는순간링크 : 밑줄있는 빨간글씨
--<a> 태그에 스타일을 주려면, 되도록 css 사용.
--HTML 4.01 : 하이퍼링크나 앵커로 사용가능
HTML 5 : 반드시 하이퍼링크로 사용
--별도 웹페이지가 없을때 404에러 발생.
< a href="#"> 사용.
** 절대주소
--http(s) 로 시작하는 주소.
-- ex) <a href="https://homzzang.com">홈짱닷컴 </a>
** 상대주소
--현재 문서 파일을 기준으로 표현한 타겟파일의 상대 주소.
--점 (.) 하나만 사용하는경우
ex)) D:\HTML.CSS\webws1\html\hello.html
hello.html 의 계층구조 .
--점(..) 두개 사용하는 경우
ex)) ..\hello.html
현재 hello.html 속해있는 파일을 벗어나서 , html 폴더에 있음.
EX ))) 상대주소 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 같은폴더에있는 특정 html 파일로 이동하기.-->
<!-- html 폴더에있는 hello.html 파일로 이동하기-->
<a href="hello.html">hello 문서로 이동하기</a>
<!-- .. 명령어를 사용하면 현재 폴더에서 한단계상위폴더로 이동-->
<a href="../html2/hello.html">html2 폴더에있는 hello 문서로 이동</a>
</body>
</html>
'WebFront_ > HTML,CSS' 카테고리의 다른 글
| CSS (박스모델) (0) | 2023.02.02 |
|---|---|
| CSS (선택자,스타일(link)) (0) | 2023.02.02 |
| HTML (테이블과 폼 양식) (0) | 2023.02.01 |
| HTML (이미지와 멀티미디어) (0) | 2023.02.01 |
| HTML (Visual Studio Code) (0) | 2023.02.01 |
