HTML 기본 문법
안녕하세요 열코입니다.
이번 시간에는 HTML 기본 문법에 대해 알아보겠습니다.
먼저 HTML은 HyperText Markup Language의 약자로 웹페이지를 구성하는 마크업 언어입니다.
자바 스크립트와 CSS 등을 같이 사용하여 본문과 외관의 배치를 정의할 수 있습니다.
현재 HTML은 5버전까지 출시되었습니다.
HTML은 기본적으로 요소로 구성 되어 있습니다.
요소는 시작 태그와 종료 태그의 쌍으로 구성 되어 있으며,
태그는 <>(꺾쇠 괄호)로 둘러싸인 키워드입니다.
아래는 태그의 가장 기본적인 형태입니다.
<head>
<title>제목</title>
</head>
다른 언어들과 같이 HTML에서도 주석을 사용할 수 있습니다.
주석은 코드를 이해하는데 도움을 주며, 웹 페이지에는 표시되지 않습니다.
아래는 주석 사용 방법입니다.
<!-- 설명... -->
이와 같이 주석은 <!-- 로 시작해서 --> 로 끝나며, 사이에 설명을 적어놓으면 됩니다.
아래는 주요 HTML 요소들입니다.
<br> : 줄 바꾸기
<p> : 단락 바꾸기
<hr> : 가로줄
<center> ... </center> : 가운데 정렬
<font> ... </font> : 폰트 변경
<ul><li> ... <li> ... </ul> : 순서없는 목록(동그라미)
<ol><li> ... <li> ... </ol> : 순서있는 목록(숫자)
<table> ... </table> : 표 만들기
<tr> ... </tr> : 행
<td> ... </td> : 열
또한 HTML은 하이퍼텍스트를 지원합니다.
하이퍼텍스트(Hypertext)란 쉽게 말해 링크(Link)입니다. (하이퍼링크)
보통 블로그에 글을 써서 링크를 걸거나, 웹사이트에서 링크를 걸면 파란색으로 글씨가 바뀌고 밑줄이 그입니다.
요거 < 이게 바로 하이퍼텍스트입니다.
HTML에서는 a태그를 사용하여 하이퍼텍스트를 사용할 수 있습니다.
<a> ... </a> 이런식으로 사용합니다.
a태그의 속성은 다음과 같습니다.
href : hypertext reference의 약자입니다. 연결할 주소(절대 주소 또는 상대 주소)를 지정합니다.
예 : <a href="https://yeolco.tistory.com">열코의 프로그래밍 일기</a>
target : 지정된 href 주소를 보여줄 때 넣어줄 설정입니다.
- target = "_self" : 현재 브라우저에서 링크를 연결합니다.
- target = "_blank" : 새 창에서 링크를 연결합니다.
- target = "_top" : 현재 브라우저의 가장 위쪽으로 스크롤합니다.
(위로가기 버튼에 가장 많이 쓰이며, top 속성을 주었을 때 href는 사용 불가능합니다.)
title : 마우스를 링크위에 올려두면 나오는 설명입니다.
예 : <a href="https://yeolco.tistory.com" title="누르면 이동합니다.">열코의 프로그래밍 일기</a>
id : href 속성으로 링크가 아닌 현재 페이지에서 이동할 때 사용합니다.(#링크 사용)
예 : <a href="#here">이동</a>
<a id ="here">여기</a>
다음은 li 사용법입니다.
li는 list의 약자로 목록을 만들 때 <li> 태그를 사용합니다.
ul또는 ol을 사용하여 목록을 만들 수 있으며 ul은 순서가 없는 목록, ol은 순서가 있는 목록입니다.
아래와 같이 사용 할 수 있습니다.
<html>
<body>
<ol>
<li>a
<li>b
<li>c
</ol>
<ul>
<li>가
<li>나
<li>다
</ul>
</body>
</html>
위 코드의 실행 결과 아래 사진과 같습니다.
순서가 있는 ol 태그의 경우 숫자로 순서가 매겨지며, 순서가 없는 ul 태그의 경우 검은 동그라미로 마킹됩니다.
이번시간에는 HTML의 기본 문법에 대해서만 알아보았습니다.
다음시간에 더 심층적인 문법에 대해 알아보겠습니다.
이상 ''에 대해 알아보았습니다.
질문 또는 오타나 잘못된 정보가 있는 경우 댓글로 달아주세요!
공감♡ 버튼을 눌러주시면 더욱 유용하고 좋은 포스팅으로 찾아 뵙겠습니다.
'HTML, CSS, JS' 카테고리의 다른 글
| 자바스크립트 스크롤 멈춤 이벤트 (0) | 2019.04.07 |
|---|---|
| JavaScript String substring() Method : 자바스크립트 문자열 자르기 (0) | 2019.03.25 |
| css로 텍스트 ... 처리하기 - 고정, 가변 길이 element (0) | 2019.03.25 |
| Javascript에서 $ 기호는 뭘까? (1) | 2019.03.24 |
| [프론트엔드 개발자] ECMAScript란? (0) | 2019.03.20 |
| HTML div 태그 사용법 (0) | 2018.11.13 |
| HTML에 CSS 적용하기 (0) | 2018.10.03 |
| Atom Editor 설치 (0) | 2018.10.01 |
