기본적인 Rule
<!DOCTYPE html>
<html>
<head>
<title>
Home - My First website.
</title>
</head>
<body>
<h1>
Hello!
</h1>
</body>
</html>- 웹페이지에 보이는것은 body 안에 있어야 한다.
- head에 있는 내용은 보이지 않아야 한다.
- 위의 구조를 기본적으로 따른다.
More Tags(head)
사이트의 부가적인 정보들을 나타내주는 태그
<!DOCTYPE html>
<html lang="kr">
<head>
<link rel="shortcut icon" href="icon link"
<title>
Home - My First website.
</title>
<meta charset = 'utf-8'/>
<meta name='description' content="hihihi">
</head>
<body>
<h1>
Hello!
</h1>
</body>
</html>Meta tag
웹사이트에 대해 설명해주는 tag
name = 'description'은 구글에 검색했을때 나오는 웹페이지에 대한 설명
기타 등등 수많은 태그가 있으니 궁금한 것, 필요한 것이 있으면 mdn에서 찾아서 보자.
Form tag
<form>
<label for='profile'>Profile Photo</label>
<input id='profile' type="file" accept=".pdf"/>
<label for="website">Website</label>
<input id = 'website'' required placeholder = 'Name' type="url"/>
<label for="e-mail">email</label>
<input id = 'e-mail'' required placeholder = 'Name' type="email"/>
<input type="submit" value="Create Account"/>
</form>File, 입력값, 색상 등 다양한 값을 설정, 혹은 받게 해주는 tag.
회원가입 창에서 대표적으로 사용될 tag이다.
- label tag는 input과 for-id로 연결하며 input을 설명해주는 내용이다.
id
id는 대표적인 attribute로 하나만 있어야 하고 대다수의 태그에 사용할 수 있다.
semantic tags
div
박스 tag. 한 줄에 오는 것들을 줄 구분해주기 위해 자주 사용.
어떤 값을 가지지는 않지만 기능은 하는 태그!
header, main, footer
div와 같은 기능을 하는 tag들.
기능은 같지만 tag의 이름만 보더라도 안의 내용을 유추해낼 수 있기 때문에 사용.(더 효율적으로 개발 할 수 있게 해줍니당)
span
짧은 텍스트를 위한 tag
p
paragraph를 위한 tag(span보다 긴 텍스트)
마찬가지로 span과 p도 의미가 tag만으로 의미를 유추할 수 있는 tag로 대체할 수 있다면 대체하는 것이 좋다.
갈팡질팡 공부하는 중입니다