정보를 위한 태그
1. Basic Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
모든 HTML 문서들은 문서의 형식을 선언하는 <!DOCTYPE html>로 시작해야한다.
html 문서는 <html>로 시작해서 </html>로 끝나야 한다.
<head>: html 페이지에 대한 정보를 담는다.
<title>: tab에 정보를 나타낸다.
<body>: 보여지는 content들을 나타낸다.
visual studio code 에디터를 사용하는 경우 html 파일 작성 화면에서 !를 쓰고 엔터를 치면 기본 구조가 자동으로 나온다 ! (꿀팁 ㅎㅎ)
※ html에서 주석 처리는 <!-- 주석 -->으로 나타낸다.
<!-- -->ctrl + / 를 치면 자동으로 주석처리된다.
2. 제목 태그 (headings)
중요한 내용은 제목태그를 사용한다.
<h1> title1 </h1>
<h2> title2 </h2>
<h3> title3 </h3>
<h4> title4 </h4>
<h5> title5 </h5>
<h6> title6 </h6>
3. 문단 (paragraph)
<p>
contents
</p>
4. 링크태그
링크태그를 이용하면 다른 페이지로 이동이 가능하다.
<a href="https://webos-supporters.tistory.com/"> webOS Supporters Blog</a>href 속성을 이용하여 연결될 링크를 적는다.
5. 리스트 태그
<li>: list item
<ul>,<ol>태그 내부에 포함된다.
5-1 unordered list <ul>
<ul>태그는 순서가 없는 목록을 만들 때 사용된다. 내부에 <li>를 사용하여
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JAVA</li>
<li>JSP</li>
</ul>
5-2 ordered list <ol>
<ol>태그는 순서 있는 목록을 만들기 위해 사용된다.
<ol>언어
<li>파이썬</li>
<li>자바</li>
<li>C언어</li>
</ol>
<ol>에는 type, start, reserved와 같은 속성을 사용할 수 있다.
속성들은 아래 더보기를 눌러서 참고하면 된다.
| 속성 | 내용 | 속성값 |
| type | 목록에 사용될 마커를 정함 | 1 : 숫자, 기본값 a : 영어 소문자 A : 영어 대문자 i : 로마 숫자 소문자 I : 로마 숫자 대문자 |
| start | 시작 목록의 순번을 정함 | 숫자로 순번을 지정 |
| reserver | 역순으로 항목 표시 |
6. 이미지 태그
img는 문서에 이미지를 삽입하는 태그다.
<img src = "image.jpg">src를 사용하여 이미지 경로를 지정한다.
추가로 alt(이미지를 표시할 수 없을 때 출력 내용), width(가로 크기), height(세로 크기), loading(이미지 로딩 방식)과 같은 속성들이 있다.
꾸미기를 위한 태그
꾸미기 태그는 글의 정보는 없이 글의 모양을 바꾸거나 밑줄을 긋는 등의 꾸미는 역할을 수행한다.
웹페이지의 디자인적인 부분은 대부분 HTML의 자체 태그보다는 CSS를 이용한다.
7. div / span
오로지 디자인만을 위한 아무 의미가 없는 태그로 div와 span가 있다.
<div> div </div>
<span> span </span>
div는 block level element로, 그 줄에 해당하는 화면 전체를 쓰지만,
span은 inline element로, 자기 자신의 크기만큼을 가진다.
CSS를 이용해 웹페이지를 디자인할 때 자신이 원하는 디자인에 따라 div와 span중 무엇을 써야할지 결정하면 된다.
그 외에도 html의 자체 태그로 글의 정보를 담지는 않으면서, 각각의 기능을 수행하는 꾸미기 태그가 있다.
8. 줄바꿈 태그 <br>
줄바꿈 태그(<br>)는 닫히는 태그가 없다. 앞선 설명의 <p>태그와는 다르게 태그 안에 들어오는 내용에 대한 정보는 담지 않으면서, 오로지 줄바꿈만을 수행한다.
이 문장 밑에 <br>
다른 문장
9. 강조 태그 <strong>
이건 별로 안 강조하고 싶은데
<strong> 이건 강조하고 싶다 </strong>
10. 밑줄 태그 <u>
<u> 여기에 밑줄 쳐줘 </u>
추가 기능
댓글 기능: disqus
채팅 기능: tawk
방문자 추적 기능: google analytics
생활코딩 동영상 강의를 기반으로 작성된 글입니다.
추가 기능은 생활코딩 사이트에서 참고할 수 있습니다!
'Study > web기술' 카테고리의 다른 글
| CSS cheat sheet (0) | 2021.05.15 |
|---|---|
| JavaScript cheat sheet (0) | 2021.05.13 |