html의 유용한 기능
이번 글에서는 어느정도 알고있으면 편한
(은근 자주 쓰이는데 익히지 못해 매번 알아보기 귀찮은)
(혹은 이렇게 쓰이는거였군! 싶은)
정보들 위주로 적어보려고합니다. 어디까지나 저의 입장에서 적은 정보들입니다.
<head> 태그
브라우저에게 정보를 주는 부분이 <head> 태그인데요,
• 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들 입력
• 문서에서 사용할 외부 파일들 링크
들을 포함하고 있습니다. 즉, 웹 브라우저에는 보이지 않지만, 웹브라우저가 웹문서를 해석하기위해 필요한 정보들을 입력하는 공간입니다.
보통 <title>태그와 <meta> 태그가 있습니다.
<meta> 태그 : 문자 인코딩 방법 및 문서의 키워드와 요약 정보를 지정
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="html5, 웹표준">
<meta name="description" content="html5를 통해 웹 표준 공부하기">
<meta name="author" content="Kyunghee Ko">
참고로! 태그와 내용을 포함한 전체 문자열 ex) <title>제목</title>
을 HTML의 기본 구성단위, 엘리먼트 (element) 라고 부릅니다!
엘리먼트는 상위 엘리먼트 안에 (하위) 엘리먼트가 계층적으로 포함될 수 있습니다.
텍스트를 묶어주는 태그
<h1>, <br> 등 기본적인 것 외의 것을 적어볼게요.
| 태그 | 용도 | 설명 |
| <hr> | 수평 줄 | 주제가 바뀔 때 분위기 전환으로 사용함 |
| <p> | 텍스트 단락 | 입력한 내용 앞뒤로 빈줄이 생기면서 텍스트 단락이 만들어짐 |
| <blockquote> | 인용문 넣기 | 다른 텍스트보다 안으로 들여 써짐 |
| <pre> | 입력한 그대로 표시 | 소스에 표시한 공백이 그대로 표시됨. 프로그램 소스를 표시할 때 유용 |
꿀팁
<em>
단순히 이탤릭체를 표시할 때는 <i>를 사용하는데요, 흐름상 특정 부분을 강조하고자 이탤릭체를 사용할 때는 <em>을 사용해줍니다.
<mark>
mark 태그로 묶은 부분의 배경색이 노랑색으로 칠해집니다.
<span>과 <div>
비슷하게 나타나는 것 같은데 차이가 있습니다.
<span>은 줄바꿈 없이 줄 안에서 (인라인) 묶는 용도입니다.
언제 이 태그가 쓰일까요? 여러가지가 있겠지만 특정 문구에 변화를 줄때 유용할 듯 싶습니다.
<p>안녕하세요. 저는 <span style="color:blue;">뭉지</span>입니다.</p><div>는 줄 바꿔 (블록)단락으로 묶는 용도입니다.
<dl>, <dt>, <dd>
"제목"과 "설명"이 한 쌍인 설명 목록을 나타낼 때 쓰입니다.
제목을 <dt>로, 설명을 <dd>로 나타내고,
전체를 <dl>로 감싸줍니다.
<dl>
<dt>제목</dt>
<dd>설명1</dd>
<dd>설명2</dd>
<dt>경기도</dt>
<dd>수원시</dd>
<dd>안산시</dd>
<dd>화성시</dd>
</dl>
특수 기호
웹 문서에 특수기호를 입력할 때는 다음 링크를 참고해보시면 좋을듯 해요.
이상 얕은 지식들이었습니다 :-)