[구디아카데미]
- 글자 관련 태그들은 모두 body 태그 안에서 작성해야한다!
✅ hn 태그
- 제목을 입력할 때 사용하는 태그로 폰트의 크기가 서로 다름
- 숫자가 작아질수록 글짜 크기가 커짐
<body>
<h1>문자열 태그에 대해 알아보자</h1>
<h2>h 태그 사용하기</h2>
<p>
페이지에서 제목부분을 작성할 때 사용하는 태그
</p>
<h1>h1태그입니다.</h1>
<h2>h2태그입니다.</h2>
<h3>h3태그입니다.</h3>
<h4>h4태그입니다.</h4>
<h5>h5태그입니다.</h5>
<h6>h6태그입니다.</h6>
</body>✅ br 태그
- 문장 줄 바꾸기 태그
✅ hr 태그
- 페이지에 가로로 밑줄을 만들어 줄 때 사용
✅ strong 과 b 태그
- 문장에서 문자를 강조하여 굵게 표시할 경우 사용
✅ mark 태그
- 배경 부분을 노란색으로 하여 형광펜 표시가 된 듯하게 출력
✅ u 태그
- 밑줄(수평 줄) 긋는 태그
✅ s 태그
- 취소선 긋는 태그
✅ em, i 태그
- 문자에 기울임을 주는 태그
✅ small 태그
- 원 문자보다 작은 글씨로 표시하며 부가 정보 표현 시 자주 사용
첨자
✅ sup 태그
- 태그로 감싼 내용만 위 첨자로 되는 태그
✅ sub 태그
- 태그로 감싼 내용만 아래 첨자로 되는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>문자열 태그에 대해 알아보자</h1>
<h2>h 태그 사용하기</h2>
<p>
페이지에서 제목부분을 작성할 때 사용하는 태그
</p>
<h1>h1태그입니다.</h1>
<h2>h2태그입니다.</h2>
<h3>h3태그입니다.</h3>
<h4>h4태그입니다.</h4>
<h5>h5태그입니다.</h5>
<h6>h6태그입니다.</h6>
<h2>수평으로 선을 표시해보자</h2>
<hr/> <!-- / 생략 가능 -->
<h3 align="center">속보!! 반장님이 반장님이............................</h3>
<hr>
<h2>일반적인 문구를 작성할 때 사용하는 태그</h2>
<p>
p태그를 사용함.
</p>
<p>일반적인 문구를 사용해서 출력하기</p>
<p>개행후 다음라인에 출력이됨</p>
<h2>띄어쓰기 출력하기</h2>
<p>
안녕하세요 유병승입니다. 하하
</p>
<h2>개행처리하기</h2>
<p>br태그를 이용해서 개행을 처리함</p>
<p>
안녕하세요<br>
저는 유병승입니다.<br> <!-- / 생략 가능 -->
java강사입니다.<br>
</p>
<h2>문자를 강조해주는 태그들</h2>
<p>
strong : 태그문자를 굵게 표시해주는 태그 * 강하게 처리 <br>
b : 태그문을 굵게 표시해주는 태그 <br>
mark : 태그문자에 형광색을 표시를 해주는 태그 <br>
u : 태그문자에 밑줄을 표시해주는 태그<br>
s : 태그문자에 삭선(삭제선)을 표시해주는 태그<br>
i : 태그문자를 기울려 표시해주는 태그<br>
em: 태그문자를 기울려 표시해주는 태그<br>
* css에서 적용을 함
</p>
<p>
html은 <b>너무너무 재미있다</b>. 쓰는대로 즉시보이고<br> <s>생각없이</s> 사용가능하네 <strong>속이 후련한다</strong>.<br>
<mark>하지만 <i>중요</i>하니까 잘 들어야합니다.</mark><br> <em>오늘 수업화이팅.!!!</em><br>
</p>
<h4>태그안에 다른태그를 사용하는것도 가능하다 -> 부모/자식간의 관계가 된다.</h4>
<h4>인용문구 태그로 표시하기</h4>
<p>
<blockquote>git은 merge지</blockquote>-최인호-<br>
<q>늦었다고 생각할때가 진짜 늦었다</q>-김중근-
</p>
<h4>문자를 꾸며주는 태그</h4>
<p>
한국은 <small>KOR</small> 술을 <sup>정말</sup> 좋아하는
나라입니다.<br>
당신의 키는 180.5<sub>cm</sub>입니다.<br>
</p>
<p>
javascript함수선언은
<code>function(){}</code>로 작성한다.<br>
브라우저의 개발자도구를 실행하려면 <kbd>F12</kbd>를 누른다<br>
<abbr title="World Wide Web">www</abbr>는 월드와이드웹이다.
<cite>http://www.w3schools.com</cite>를 이용해서 html공부하면 좋아요<br>
</p>
<h3>html페이지에 작성대로 출력하기</h3>
<pre>
안녕 html 너 너무 좋다.. 그냥 태그쓰면 나오는구나
호호호호 너무 신났어.. 오늘 금요일고...
불금을 즐겨야지 하하하!!
</pre>
<h3>태그의 속성</h3>
<p>
공통속성 : html의 모든 태그에 작성하는것 id, class, style
개별속성 : 특정태그에서 사용하는 속성 type, src
</p>
<h4 class="test1" >공통속성</h4>
<p>
id : 페이지내에서 유일한 값을 설정하는것, 태그를 지칭할때 사용하는 속성 (속성 중복되면 안됨!) [하지만 중복했다고 오류가나지 않음]
class : 페이지내에서 태그들을 한개 그룹으로 묶을 때 지칭하는 속성 (중복허용함)
style : 태그에 css속성을 설정할 수 있게 하는 속성. css를 적용
</p>
<p id="test">나는 p id가 test야</p>
<h3 id="test">나는 h1 id가 test야</h3>
<h4 class="test1">클래스가 test1인 h4</h4>
<p class="test1">클래스가 test1인 p</p>
<p>
안녕 나를 <mark class="test1">클릭</mark>해봐
</p>
<style>
.test1{
background-color: aquamarine;
}
#test{
background-color: red;
color: yellow;
}
</style>
<script>
document.getElementById("test").addEventListener("click",e=>{alert("클릭함");});
document.querySelectorAll(".test1").forEach(e=>{
e.addEventListener("click",()=>alert("test1클릭"));
})
</script>
<h3><mark><strong>속성을 설정할 때는 속성값은 반드시 ""이나 ''으로 표시해준다.</strong></mark></h3>
<p style='font-size:20px; font-weight: bolder;'>스타일을 style속성으로 적용할 수도 있다.</p>
</body>
</html>
우측 상단 햇님모양 클릭하셔서 무조건 야간모드로 봐주세요!!