1. 태그의 형태
가. 시작 태그와 종료 태그가 모두 있는 형태
<태그 이름> 쓸 내용 </ 태그 이름 >
나. 종료 태그가 없는 형태
<태그 이름 쓸 내용 >
2. 자주 사용하는 태그
가. h: 제목 태그
나. br, p, div, span: 줄 바꿈(br) , 문단 지정 (p) , 영역 지정 (div) , 범위 지정 (span)
다. link: 현재 문서와 외부 소스를 연결해주는 태그
라. img: 이미지를 나타내는 태그
마. form: 폼(입력 양식)을 만드는 태그
바. button: 버튼을 만드는 태그
사. ol, ul, li : 리스트를 나타내는 태그
2. 가 h 태그
heading의 h, 즉 '제목'이라는 뜻. HTML의 제목을 나타내며 검색 엔진이 h 태그를 기반으로 결과물을 보여주기에 검색 키워드를
h 태그에 넣으면 좋음!
ex) <h1> this is heading 1 </h1>
<h2> this is heading 2</h2>
h 태그는 h1~h6까지 있음! h1에서 h6으로 갈 수록 글자크기가 작아짐! 줄바꿈 따로 할 필요 없음!
2. 나 br, p, div, span 태그
<br/>: break(line break) -> 한 문단에서 줄 바꿈 (enter키 라고 생각)
<p> </p> : paragraph, 문단 나눔-> 줄 바꿈이 두 번 일어남
<div> </div> : division, 영역 나눔-> 줄 바꿈이 한 번 일어남
<span> </span> : 줄 바꿈을 하지 않은 채 글꼴, 색상, 여백 조절 -> 줄 바꿈 일어나지 않음
ex)
<p>
O'er all the hilltops<br/>
Is quiet now, <br />
In all the treetops<br />
Hearest thou<br />
</p>
<p>
Hardly a breath; <br />
The birds are asleep in the trees:<br />
Wait, soon like these<br />
Thou too shalt rest.
</p>
Output:
O'er all the hilltops
Is quiet now,
In all the treetops
Hearest thou
Hardly a breath;
The birds are asleep in the trees:
Wait, soon like these
Thou too shalt rest.
ex)
This is a line of text <div> with some text in a div <div>
and some text after.
Output:
This is a line of text
with some text in a div
and some text after
+) <br/> 과 <div>의 차이가 무엇일까? div는 특정 영역부터 영역까지만 그 사이 enter가 되는 걸까?
<br>: 단순히 텍스트를 줄 바꿀 때 사용
<div>: 웹 페이지 레이아웃을 만들거나 CSS와 JavaScript와 함께 사용해 특정 영역에 대해 스타일링 및 기능을 추가 가능
ex)
This is a line of text <span> with some text in a
span</span> and some text after.
Output:
This is a line of text with some text in a span and some text after.
2. 다 link 태그
link 태그 : 현재 파일이 다른 파일과 연결되어 있는 관계정보 표현하는 데 사용
특히 CSS와 HTML을 연결해주는 기능을 가짐
기본 구조:
<link rel = "속성" href = "파일 경로">
2. 라 img 태그
img 태그: HTML 문서에 이미지 삽입하는 태그. 주요 속성으로 src, alt, width, height 제공
기본 구조:
<img src = "경로" alt = "설명" width = "폭" height = "높이">
ex)
<img src = "mountain.jpg"
alt = "mountain"
width = "500"
height = "200"
/>
2. 마 form 태그
form 태그: 사용자 입력 양식 만들 때 사용
기본 구조:
<form> form 요소 태그 </form>