1. html에 대한 설명을 html문법으로 작성
<!DOCTYPE html>
<head>*제목 변경해주는 title 태그<br>
->제목 WEB1-html로 변경
<title>WEB1-html</title>
<p>*한국어 안깨지 utf-8로 열기<br>
-> meta charset = "utf-8"
<meta charset="utf-8"></p>
<p>*본문은 body태그로, 본문을 설명하는 태그는 head태그로 묶기</p>
</head>
<h1><a href="index.html">WEB</a></h1>
<body>
<li><a href = "1.html">1.HTML</a></li>
<li><a href = "2.html"> 2.CSS</a></li>
<li><a href = "3.html">3.JavaScript</a></li>
<h2>HTML</h2>
<p>html에 대한 내용</p>
<p><태그>
1. 태그 : html의 문법을 설명하는 도구</p>
<p>2. 태그의 예시
1) <strong>strong : 진하게 표시</strong><br>
2) <u>u : 밑줄</u><br>
3) <strong><u>중첩 가능</u></strong></p><br>
<p>3. 태그에 대한 설명
- 위의 그림에서 strong이라는 것을 HTML에서는 문법적으로 태그라고 부른다. 앞에 있는 태그를 열리는 태그
뒤에 있는 태그를 닫히는 태그라고 구분해서 부르기도 합니다. 닫히는 태그는 태그명 앞에 /를 붙인다.
<strong><u>'중첩가능'</u> 하다. </strong> 처럼 태그는 중첩해서 사용 가능</p>
<p><h1>*h1 태그</h1>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6></p></li>
* 띄어쓰기 태그<br>
1) br : 줄바꿈<br>
- 닫는 괄호 필요 없음<br>
<p>2) p : 단락 만들기 태그 </p>
<p>*img 태그 <br>
<img src = "coding.jpg" width = "450">
</p>
<p>*태그의 속성(attribute)<br>
ex) width = "450", src = "coding.jpg"<br>
-> 순서에 상관 없이 사용가능 </p>
<p>*parent태그와 child 태그<br>
-> 부모 태그로 자식 태그를 감쌈<br>
-> ex) li와 ul을 서로 부모자식 관계
</P>
<p>*목차를 나타내는 li태그 <br>
<li>목차1</li>
<li>목차2</li>
<li>목차3</li></p>
<p>*연관된 li태그끼리 이어주는 역할을 하는 ul태그
<ul><li>목차1</li>
<li>목차2</li>
<li>목차3</li>
</ul>
<ul>
<li>다른 내용1</li>
<li>다른 내용2</li>
<li>다른 내용3</li>
</ul></p>
*자동 넘버링 해주는 ol (ordered list) 태그
<ol>
<li>목차1</li>
<li>목차2</li>
<li>목차3</li>
</ol>
<p>링크 걸어주는 a태그
-> a href = '#' /a<br>
<a href="https://haena.tistory.com/">해나의 블로그 바로가기 같은창</a><br><br>
새 창으로 열어주고 싶다면<br>
-> target = "_blank"<br>
<a href="https://haena.tistory.com/" target = "_blank">해나의 블로그 바로가기 다른 창 </a><br><br>
열기전에 정보를 툴팁으로 띄워주고 싶다면<br>
-> title = "haena's tistory : IT blog"<br>
<a href="https://haena.tistory.com/" target = "_blank" title = "haena's tistory : IT blog">해나의 블로그 바로가기 다른 창 + 툴팁 </a><br><br>
</p>
</body>
2. 실행 화면
*제목 변경해주는 title 태그
->제목 WEB1-html로 변경
*한국어 안깨지 utf-8로 열기
-> meta charset = "utf-8"
*본문은 body태그로, 본문을 설명하는 태그는 head태그로 묶기
WEB
HTML
html에 대한 내용
<태그> 1. 태그 : html의 문법을 설명하는 도구
2. 태그의 예시
1) strong : 진하게 표시
2) u : 밑줄
3) 중첩 가능
3. 태그에 대한 설명 - 위의 그림에서 strong이라는 것을 HTML에서는 문법적으로 태그라고 부른다. 앞에 있는 태그를 열리는 태그 뒤에 있는 태그를 닫히는 태그라고 구분해서 부르기도 합니다. 닫히는 태그는 태그명 앞에 /를 붙인다. '중첩가능' 하다. 처럼 태그는 중첩해서 사용 가능
*h1 태그
h1
h2
h3
h4
h5
h6
* 띄어쓰기 태그1) br : 줄바꿈
- 닫는 괄호 필요 없음
2) p : 단락 만들기 태그
*img 태그
*태그의 속성(attribute)
ex) width = "450", src = "coding.jpg"
-> 순서에 상관 없이 사용가능
*parent태그와 child 태그
-> 부모 태그로 자식 태그를 감쌈
-> ex) li와 ul을 서로 부모자식 관계
*목차를 나타내는 li태그
*연관된 li태그끼리 이어주는 역할을 하는 ul태그
- 목차1
- 목차2
- 목차3
- 다른 내용1
- 다른 내용2
- 다른 내용3
- 목차1
- 목차2
- 목차3
링크 걸어주는 a태그
-> a href = '#' /a
해나의 블로그 바로가기 같은창
새 창으로 열어주고 싶다면
-> target = "_blank"
해나의 블로그 바로가기 다른 창
열기전에 정보를 툴팁으로 띄워주고 싶다면
-> title = "haena's tistory : IT blog"
해나의 블로그 바로가기 다른 창 + 툴팁
'WEB' 카테고리의 다른 글
| [WEB] Javascript 문법 - (3)alert, prompt, confirm (0) | 2022.01.18 |
|---|---|
| [WEB] Javascript 문법 - (2)자료형 (0) | 2022.01.18 |
| [WEB] Javascript 문법 - (1)변수 (0) | 2022.01.18 |
| [WEB] - 웹서버 운영하기 (Web Server for Chrome) (0) | 2022.01.18 |
| [WEB] - 웹 서버 호스팅 (github pages) (0) | 2022.01.18 |
