<html 구성요소>
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
</body>
</html>
<html>태그 안에 자식
태그의 관계(css가기전에 제대로 알기)
-선조 : 기존 태그의 한단계 이상 상위태그들을 의미한다(부모도 선조에 포함)
-부모: 기준 태그의 한 단계 상위 태그를 의미한다. (부모는 꼭 한 개)
-자식 : 기준 태그의 한단계 하위태그들을 의미한다. head , body ( 자식은 여러개 일수 있음)
-손자 : 기준 태그의 한 단계 이상(한 단계도 포함) 하위 태그들을 의미한다.
-형제 : 기준 태그와 동일한 부모를 가지고, 보다 후행(뒷자리)되는 모든 태그들을 의미한다.
-인접형제 : 기준 태그와 동일한 부모를 가지고. 바로 뒤에 후행하는 태그들을 의미한다.
속성(html태그는 속성attribute를 가질수 있다)
생김새 : <태그 속성 = "값"> , <human age="25">
html언어에서 속성 값으로 작성하는 모든 값은 문자열임에 유의 -> 값에 " " 를 붙이다는 뜻
inline는 본인이 필요한공간만 사용을 해서 줄 바꿈 안함 = a
block은 내용이 작든 크든 한줄을 본인만 사용함 = div, p
태그 종류
a (anchor)현제 페이지에서 다른 페이지로 이동할 수 있는 링크를 만들기위해 사용
스스로 닫는 태그 아님 <a></a>
- 속성 : href :이동 할 수 있는 경로
-targer : 이동할 방식
- _blank : 새로운 탭에서 이동
- self : 현재텝에서 이동
현재 창 말고 새로운 창으로 구글로 이동해라
<a href = "gogle주소" _targer="_blank" >
  -> 강제로 공백 넣기
b (bold)텍스트를 굵게 만든다
- - 해당 태그가 가지는 내용이 문맥상 중요하다는 의미를 가지고 있지만,이러한 경우 주로 strong, em 태그를 사용하는 것이 좋다(b사용 권장 안 함)
- - 구시대에는 단순히 글씨를 굵게 하기 위해 사용했지만 현대 프론트에는 단순히 글씨를 굴게하기 위한 용도로의 사용을 권하지 않는다. 대신 css의 front-weight : bold 속성을 사용해야함.
Strong
- 텍스트를 굵게 만든다는 점에서 b태그와 비슷함.
- 스스로 닫는 태그 x
- 문서 내에서의 중요한 문자이나 단어를 포함하고자 할 때 사용한다. 단, 문서, 문단의 제목이나 문단 전체를 포함하여서는 안된다.
cite (cite)태그는 글씨를 기울인다 . 사용빈도 거의 없음 em.i가 주로 쓰임
- 스스로 닫는 태그 x
- 출판물, 영화 등의 저작물이나 출처 제목 등을 나타내기 위해 사용한다.
em ( emphasize) 태그는 글씨를 기울인다. = strong 과 동급
- 스스로 닫는 태그 x
- 문서 내에서 중요한 문장이나 단어를 포함하고자 할 때 사용한다. 단, 문서,문단의 제목이나 문단 전체를 포함하여서는 안 된다.
i (italic) 태그는 글씨를 기울인다. 기울임체
- 스스로 닫는 태그 x
- 본문의 주된 언어와 다른 언어를 담기 위해 사용한다. ( 다른들은 언어인데 강조하고 싶은건 영어다 하면 영어에 사용)
- 단순히 글씨를 기울이기 위해 사용하여서는 안되며. 이를 이해서는 css의 font-style : italic 속성을 사용하여야 한다
ex) 아르키메데스가 <i> Eureka </i> 라고 말했어요
br (break) 태그는 개행을 위해 사용한다
- 스스로 닫는 태그 ㅇ
- 문단을 나누거나, 레이아웃(디자인) 목적으로 사용하여서는 안 된다. ※ 이럴땐 p 태그 사용
p(paragrapt) 태그는 문단 하나를 담기 위해 사용한다. = block 태그
- 스스로 닫는 태그 x
img(image)태그는 말 그대로 이미지를 삽입하기 위해 사용한다
- 스스로 닫는 태그 ㅇ
- 속성 - alt, src
- scr : 표시할 이미지의 주소, 경로, 혹은 64진법 문자열 데이터이다.
- alt : 명시한 이미지를 표시할 수 없을 때 대신 (alternative)하여 표시할 텍스트(사진이 아니라 글자임)이다. 시각장애인의 접근성을 크게 향상시킨다.
<a href="https://www.naver.com/" target="_blank">
<img alt="" src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMTRfMTIw%2FMDAxNDc5MDU0NTMzMTgy.ae6z9IXW8iiS4MjmDwaGN0fnwzbJ4HYo7b
EmkW-g8uYg.OGe7FZKLPcQq_gXAPIuxY121H80Y4L5kbN654d_UhCkg.JPEG.evahill%2F003.jpg&type=a340">
</a>
h1~h6 (heading) 태그는 이를 포함하는 컨테이너 태그(문단을 나눠주는 p,div 태그 같은거 )의 제목이나 간략 한 주제를 나타내기 위해 사용한다
- 스스로 닫는 태그 x
- 숫자가 작을수록 (1에 가까울수록) 의미가 큰 태그이다.
- 단,h1 태그는 문서의 제목과 같아야 하고, 문서에 단 하나만 존재해야 한다. <title></title> 태그와 같은 내용이어야 하게 권장
li (list item) 태그는 목록 테스(ol,ul)의 항목 하나를가지 위한 태그이다.
- 스스로 닫는 태그x
- 부모로 ol 혹은 ul을 가진다
ol (Ordered List)태그는 순서와 관련이 있는, 서로 관련된 항목을 가지기 위한 목록 태그이다.
- 스스로 닫는 태그 x
- 자식으로 li 태그를 가진다
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
ul(Unordered List)태그는 순서와 관련이 없는, 서로 관련된 항목을 가지기 위한 목록 태그이다. 웹사이트 메뉴 만들 때 사용
- 스스로 닫는 태그x
- 자식으로 li 태그를 가진다
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
sub(subscript)태그는 아래 첨자를 위해 사용하는 태그이다
- 스스로 닫는 태그x
<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
출력: 물의 화학식은 H₂O입니다.
sup(superscript) 태그는 위 첨자를 위해 사용하는 태그이다
- 스스로 닫는 태그 x
<p>이 수학식은 x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>입니다.</p>
<p>각주 예: 본 문서 참조<sup>1</sup>.</p>
이 수학식은 x² + y² = z²입니다.
각주 예: 본 문서 참조¹.
실습 중 알게 된 것
문서 내용 중 태그가 아니라 태그를 문자 형태 그대로 출력하고 싶을 때 - > <div> 코드로 인식이 아닌 문자 형태로
출력하고 싶을때 < 내용 >
<div>
<h1>Hello World!라고만 써도(<!DOCTYPE> 선언문 누락, <html> 선언 태그 누락,물론 '어느 정도'까지만이다. <div> 태그 등 중요한 태그에서 오타
가 난다면 사이트 레이아웃이 홀랑 깨져버리기도 한다.
출력
<h1>Hello World!라고만 써도(<!DOCTYPE> 선언문 누락, <html> 선언 태그 누락,물론 '어느 정도'까지만이다. <div> 태그 등 중요한 태그에서 오타가 난다면 사이트 레이아웃이 홀랑 깨져버리기도 한다.
줄 바꾸기, 문단 나누기 사용을 위해 <br>이 아닌 <p> 태그를 사용했음.
아래 실습내용 html 나무위키 구현
HTML
웹사이트 의 모습을 기술하기 위한 마크업 언어 . 프로그래밍 언어 가 아니라 마크업 정보를 표현하는 마크업 언어
namu.wiki
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>페이지 제목</title>
</head>
<body>
<ol>
<li><a href="#1"> 개요</a></li>
<li><a href="#2"> 특징</a></li>
<li><a href="#3"> 태그</a> </li>
<li>버전</li>
<li>HTML 문서 저장 방법</li>
<li>여담</li>
<li>외부 링크</li>
</ol>
<h2 id = "#1">1. 개요</h2>
<p><a href="#" target = "_blank">웹사이트</a>의 모습을 기술하기 위한 <a href="" target ="_blank">마크업 언어</a></p>
<p><a href="#" target = "_blank">프로그래밍 언어</a>가 아니라 마크업 정보를 표현하는 <a href = "#" target = _blank">마크업</a> 언어로<sup>[1]</sup> 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다. 보면 알겠지만 애초에
이름 HTML의 ML<sup>[2]</sup>이 마크업 언어라는 뜻이다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.</p>
<p>최초 제안자는 <a href="#" target ="_blank">CERN</a>의 물리학자 <a href ="#" target = "_blank">티머시 J. 버너스리</a>이다.<a href="#" target ="_blank">URL</a> , <a href="#" target="_blank">HTTP</a>,<a href="#" target = "_blank"><strong>WWW</strong></a>의 전신인 Enquire 등도 그가 세트로 개발하고 제안했다. TCP/IP 통신규
약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불린다.</p>
<p><a href="#" target="_blank">나무위키</a>에서는 아래와 같이 내용을 집어넣어 HTML을 적용시킬 수 있지만 도움말은 권장하지 않는 문법이고, 지원 종료 가능성이 있는 문법이므로 나무
위키에서는 HTML 태그를 사용하지 않는 것을 추천한다.</p>
<h2 id = "#2">2. 특징</h2>
<p>HTML은 문법 오류에 관대한 편이다.<sup><a href="#3" target="_self"></a> [3]</sup><sup>[4]</sup> 그래서 닫는 태그를 누락한다든가<sup>[5]</sup> 태그에 오타가 난다든가 하는 오류가 발생해도 어느 정도는 씹어먹고 작동할 수 있다.
물론 '어느 정도'까지만이다. <div> 태그 등 중요한 태그에서 오타가 난다면 사이트 레이아웃이 홀랑 깨져버리기도 한다.
위에 있는 <a href="#" target="_blank"> HTML5 </a>표준 형식 <strong>HTML</strong>이 아니더라도, 그냥<h1>Hello World!라고만 써도(<!DOCTYPE> 선언문 누락, <html> 선언 태그 누락,물론 '어느 정도'까지만이다. <div> 태그 등 중요한 태그에서 오타가 난다면 사이트 레이아웃이 홀랑 깨져버리기도 한다.
물론 '어느 정도'까지만이다. <div> 태그 등 중요한 태그에서 오타가 난다면 사이트 레이아웃이 홀랑 깨져버리기도 한다.
물론 '어느 정도'까지만이다. <div> 태그 등 중요한 태그에서 오타가 난다면 사이트 레이아웃이 홀랑 깨져버리기도 한다.
<head>, <body> 태그 누락, 닫는 태그 </h1> 누락) 어지간해서는 의도한 바대로 출력이 된다.
물론 디버그 모드<sup>[6]</sup>로 보면 이 부분이 잘못되었다고 에러가 떠 있을 것이다. HTML 최상단의 물론 '어느 정도'까지만이다. <div> 태그 등 중요한 태그에서 오타가 난다면 사이트 레이아웃이 홀랑 깨져버리기도 한다.
<!DOCTYPE><sup>[7]</sup> 선언이 누락될 경우에는 이야기가 많이 달라지는데,
이 경우 브라우저는 해당 HTML 문서를 호환성 모드(Quirks mode)<sup>[8]</sup>로 해석하여 렌더링한다.</p>
</body>
</html>
※ 구현 해보고 싶은 것
목차에
- 개요를 클릭하면 해당 내용이 적혀있는 본문 1. 개요로 이동하게 하는 부분
- 테이블 만들기
'FRONT-END > HTML' 카테고리의 다른 글
| [HTML]0915 수업 3일차(button,textarea,header,footer 등) (0) | 2025.09.15 |
|---|---|
| [HTML]0912 수업 2일차(table,form,label.input,select - option,optgroup) (0) | 2025.09.12 |