HTML(Hyper Text Markup Language)
: 웹 페이지가 어떻게 구조화 되어 있는지 브라우저가 알 수 있게 하는 마크업 언어- 여는 태그
<p>와 닫는 태그</p>로 구성 - HTML은 공백을 표시하지 않는다.
<p> Hello HTML
!</p>출력: Hello HTML!
- 주석 다는 방법
<!-- <p> 주석 </p>-->시작해볼까?
!DOCTYPE
우선 브라우저가 문서를 해석하는 방법을 정의해주자.
<!DOCTYPE html><html>
HTML 전체를 감싸주자
<!DOCTYPE html>
<html>
...
</html><head>
페이지에 대한 metadata를 적어주자
* 사용자에게는 보이지 않는다!
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"> //인코딩 설정
</head>
...
</html>4.<body>
실제로 사용자에게 보이는 부분을 적어보자
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
</head>
<body>
...
</body>
</html>태그에 대해 알아보자
- 제목:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> - 단락:
<p> - 줄바꿈:
<br> - 목록 (숫자 없음):
<ul> & <li> - 목록 (숫자 있음):
<ol> & <li> - 강조:
<em>,<strong> - 인용:
<blockquote - 첨자:
<sup>(위 첨자),<sub>(아래 첨자) - 연락처:
<address> - 설명:
<dt>(제목),<dd>(상세 설명) - 출처:
<cite> - 약어:
<abbr> - 하이퍼링크:
<a href="링크 주소"> 표시할 텍스트 또는 이미지 </a> - 이메일:
<a mailto: "이메일 주소"> - 같은 문서 내 특정 요소로 이동
:<p id="아이디 이름"> 표시할 텍스트 </p>
<p href="#아이디 이름"> 표시할 텍스트</p> - 이미지:
<img src = "이미지 파일 path" alt="대체 할 텍스트"> - 이미지 크기 조정:
<img src = "이미지 파일 경로" height = "세로 길이" width = "가로 길이"> - 테이블 생성:
<table>(시작),<tr>(행),<td>(셀),<th>(제목 - 가운데 정렬 및 굵게 표시)
