📝 [Section1_Unit2] HTML 기초
html이란...
- 웹 개발에 있어서 구조와 내용을 다루는 언어
- <>로 묶인 태그들로 이루어져 있으며 html 확장자를 사용함
- 트리(tree)구조로 이루어져 있음
가장 기본적인 html의 구조
<!DOCTYPE html> <!--이 문서는 HTML이라고 알려줌-->
<html> <!--HTML 전체의 틀이 되는 시작 태그-->
<head> <!--문서의 메타 데이터를 선언하는 태그-->
<title>xoolog</title> <!--브라우저의 탭에 표시되는 타이틀 태그-->
</head>
<body> <!--문서의 내용을 담는 태그-->
<h1>hello world!</h1> <!--heading. h1부터 h6까지 크기가 다름-->
<div>Content <!--content division. 줄바꿈 됨-->
<span>Content2</span> <!--줄바꿈 안됨-->
</div>
</body>
</html> <!--태그를 끝낼 때는 </~> 형식을 사용-->그 외 자주 사용되는 태그들
- <img> : 사진을 삽입할 때 사용.
- <a> : 링크를 삽입할 때 사용.
- <ul>, <li> : 순서가 없는 리스트(Unordered List)를 만들 때 사용.리스트는 <ul> 태그로 만들고 리스트의 content는 <li> 태그로 만든다.
- <ol> : 순서가 있는 리스트(Ordered List)를 만들 때 사용.
- <input> : 사용자에게 입력을 받을 때 사용. (text, radio, checkbox)
- <textarea> : 사용자에게 줄글을 입력받을 때 사용. (input text와 다르게 줄바꿈이 됨)
- <button> : 버튼을 삽입할 때 사용.
id 와 class
- id : 고유(unique)한 이름을 붙일 때 사용
- class : 반복되는 영역을 유형별로 구분할 때 사용
시멘틱(sementic) 요소
시멘틱 요소란 그 자체에 의미를 가지고 있는 요소를 뜻한다. 요소 스스로 브라우저와 개발자에게 자신이 사용된 의미가 명확하게 전달해 코드 가독성을 높일 수 있다.
form, table, img 같은 시멘틱 요소는 코드 내용을 보지 않아도 바로 사용된 의미를 파악할 수 있지만 div, span 같은 요소는 그렇지 않다.
hello world!