1. HTML 개요
· HTML은 마크업 언어(Markup Language)로 웹 문서를 작성한다.
즉, 태그를 사용해서 문서의 구조등을 기술하는 언어이다.
_ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>처음으로 작성하는 HTML페이지</title>
</head>
<body>
<p>처음으로 작성하는 HTML페이지</p>
</body>· 각각의 HTML 태그는 문서 내에서 다른 내용을 기술한다.
대부분은 닫는 태그까지 세트로 있다.
- < !DOCTYPE> : 현재의 문서를 html문서로 선언.
- < html>, < /html> 태그 : < html>과 < /html>사이에 html문서내용을 기술.
- < head> < /head> 태그 : 사이에 인코딩, 키워드, 뷰포트 등의 문서에 대한 메타데이터제공
- < title>, < /title> 태그 : 문서의 제목 작성.
- < h1>,< /h1> 태그 : heading을 뜻함. 뒤의 번호는 글씨크기에 따라 달라짐.
- < div> , < /div> 태그 : 줄 바꿔주고 div태그가 실행됨. content division을 의미. 화면에서 한 줄을 다 차지함.
- < span>,< /span> 태그 : 줄바꿈 없이 다음 태그가 붙어 실행됨. content 컨테이너. 컨텐츠 크기만큼 공간을 차지함.
- < ul>, < /ul> 태그 : < li>와 한 쌍, 제일 외부의 리스트.
- < li>, < /li>태그: < ul>과 한 쌍. < ul>안쪽의 아이템리스트.
- < input> 태그 : 입력 폼. type에 따라 넣을수있는 값 조정 가능.
- < textbox> 태그: 입력 폼.
- < button> 태그 : 버튼 태그.
... (등등 나머지 태그들은 사용방식과 네이밍이 대부분 연관적이기 때문에 작성 생략)
닫는 태그를 '안써도 되는' 경우(self-closing tag)도 있다.
- < img src=''>< /> : img 삽입가능 태그.
<< < />부분을 < /img>대신 쓰는것이다.
· HTML 태그에는 어느 태그에나 넣어서 사용할 수 있는 글로벌 속성(보편적인 속성,global attribute)이 있다. 주요 속성은 다음과 같다.
- class : 태그에 적용할 스타일의 이름 지정.
ex) < div class="U_cl">
- dir : 내용의 텍스트 방향 지정. 왼쪽 -> 오른쪽(기본값, ltr) / 오른쪽 -> 왼쪽
ex) < p dir="rtl"> : 내용이 오른쪽에서 왼쪽으로 표시됨. 오른쪽 맞춤.< /p>
...
여기서 내가 사용할 개발툴은 흔히들 사용하는 VS CODE이며,
새 개발툴에 적응하는데에 시간이 걸리는건 언제나 재밌으면서도 귀찮다.
간단하게 먼저 내가 작성한 html코드가 웹브라우저로 실행되는 모습을 보여주겠다.
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p>연습Test</p>
</body>
</html>
↓↓
예비개발자