HTML의 기본 요소
- 1.문서의 헤드
- 2.문서에 그림
- 3. 문서의 리스트(목차)
- 4. 테이블
- 5. 링크
(순서는 무관)
문서에 글을 나타내기 위해서는 <body>...</body>태그 안에 표시하면 됩니다.
단락(paragraph)을 나타내기 위해서는 <body>태그안에 <p>...</p>로 사용하면 됩니다.
강제로 줄을 바꾸고 싶다면 <br>=break 을 사용하면 됩니다.
만약 위에 문법들이 불편하다면 프로그래머가 직접 작성한 그대로 보여주는 <pre>...</pre>태그를 이용합시다.
헤드는 웹 페이지의 머리입니다.(기사) 기본적으로 <h>...</h>으로 표시하며 종류는 <h1>~<h6>까지 총 6개의 태그가 있습니다.
xml이나 html이나 주석을 사용하는 방식은 <!--...--> 입니다. 절대 //가 아닙니다.
글씨의 모양을 바꾸고 싶다면 아래의 태그들을 사용하시면 됩니다.
- <b>....</b> :볼드체
- <i>...</i>: 이테리체
- <strong>...</strong>: 강하게 강조 표시
- <em>...</em> 텍스트 강조
- <code>...</code> : 코드임을 표시
- <sup>...<sup>: 위첨자
- <sub>...<sub>: 아래첨자
<hr>은 줄입니다. 이 태그는 자주사용 합니다. 아래와 같은 줄이 생기게 됩니다. 구분하기 편하겠죠.
특수문자가 사용하고 싶으시다면 아래 태그를 사용하세요.
- < : <
- > : >
- " : "
- & : &
리스트는 항목들을 말 그대로 목차처럼 나타내는데 사용합니다. 이는 웹사이트의 메뉴나 사이드 메뉴들을 표시할 때 자주 사용합니다.
번호가 있는 리스트는 <ol>
번호가 없는 리스트는 <ul>
<ul>
<li>...</li>
<li>...</li>
</ul>
의 형식으로 사용 합니다.
그리고 항목들의 설명을 할 때는
ex) 이정찬
- 컴퓨터공학과
이러한 형태로 나타내기 위해서는 <dl>태그를 사용합니다. <dt>는 항목 설명할 대상 <dd>는 설명부분 입니다.
<dl>
<dt>이정찬</dt>
<dd>-컴퓨터공학과</dd>
</dl>
의 형식으로 사용 합니다.
그리고 흔히 클릭을 할 경우 다른 사이트로 이동을 하고 싶으시다면 <a>태그를 이용하시면 됩니다.
<a>태그의 속성은 <a href="url">정보</a> 의 형식입니다. href는 경로입니다. 하이퍼 링크
그리고 링크를 눌렀을 때 새로운 창으로 뛰울지 아니면 현재 창에서 띄울지는 아래 target 속성의 태그를 사용합니다.
- <a href="" target="_blank ">: 새로운 창
- <a href="" target="_self">: 현재 창
css로 디자인을 할때 편하게 아이디를 각 태그마다 지정할 수 있습니다. 이것은 매우 중요합니다.
<a id="section">~~</a> 로 할 경우 id는 section입니다. 디자인 할 때 이요소를 꾸미고 싶다면 이 아이디를 참조하시면 됩니다.
아이디 참조 법은 뒤에서 알려드릴게요.
사진을 넣고싶다면 <img> 태그를 사용합니다.
<img src="~~~.jpg" width ="" height="">의 형태입니다.
- src에는 이미지파일
- width와 height은 너비와 높이 설정입니다.
- alt속성은 이미지가 표시 되지 못할 경우에 대한 설명입니다. 흔이 이미지에 x표시가 뜨고 옆에 글씨가있죠 그것입니다. ㅎ
- border 속성은 경계선입니다.
테이블을 표현하기 위해서는 <table>...</table>로 감싸주고 행은 <tr>...</tr> 열은 <td>..</td>로 표시합니다.
<table border="1">
<tr>
<td>홍길동</td>
<td>99</td>
</tr>
<tr>
<td>김철수</td>
<td>98</td>
</tr>
</table>
의 형식으로 쓰입니다. 위의 결과는 아래 사진과 같습니다.
<th> 태그는 (열의 제목입니다.)
테이블에 제목을 삽입하고 싶으시다면 <caption>...</caption>을 사용 합니다.
이것으로 간단한 html 요소에 대해 설명 드렸습니다. 감사합니다.
'웹 > HTML과 CSS' 카테고리의 다른 글
| CSS 본격 들어가기(2) (0) | 2018.08.17 |
|---|---|
| CSS 본격 들어가기(1) (0) | 2018.08.13 |
| HTML 본격 들어가기(2) (0) | 2018.08.11 |
| CSS란? (0) | 2018.08.04 |
| HTML이란? (0) | 2018.08.03 |
