HTML5 - 2

4. 스크립트나 링크에 대해 더 이상 Type 속성 안붙여도 됩니다.

아마도 link나 script 태그에 Type 속성을 여전히 추가하고 있을지 모르겠네요.

view plaincopy to clipboardprint?

1. link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
2. script type="text/javascript" src="path/to/script.js">script>

이제 그럴 필요가 없습니다. CSS는 type이 늘 CSS고, HTML에서 스크립트는 늘 Javascript만을 의미하므로, 아래처럼 안써도 된다는 말씀

view plaincopy to clipboardprint?

1. link rel="stylesheet" href="path/to/stylesheet.css" />
2. script src="path/to/script.js">script>

5. 따옴표로 둘러쌀까 말까?

HTML5는 XHTML이 아닙니다. 따라서, 속성들을 반드시 인용부호로 둘러싸야만 하는 건 아닙니다. 물론 원하면 그래도 되긴 하지만.

view plaincopy to clipboardprint?

1. p class=myClass id=someId> Start the reactor.

위처럼 알아서 하면됩니다. 그런데 좀 더 구조적인 문서로 만들거라면 따옴표 사용하라는데에 한표!

6. 컨텐트 수정가능하게 만들기

contenteditable이라는 참 편한 엘리먼트가 생겼습니다. 요놈을 사용하면 엘리먼트내에 문자열을 편집할 수 있게 됩니다. 요건 잘만 사용하면 활용가치가 매우 큽니다. 이를테면 로컬저장소와 함께 to-do list를 제공하는데 쓸 수도 있지요.

view plaincopy to clipboardprint?

1. >

3. html lang="en">
4. head>

5. meta charset="utf-8">
6. title>untitledtitle>

7. head>

8. body>

9. h2> To-Do List h2>
10. ul contenteditable="true">
11. li> Break mechanical cab driver. li>

12. li> Drive to abandoned factory
13. li> Watch video of self li>
14. ul>

15. body>
16. html>

아까 위에 말한대로 따옴표 안써도 되는 것도 잊지마시길

view plaincopy to clipboardprint?

1. ul contenteditable=true>

7. Email Inputs

input 태그에 “email” 타입을 쓰면 알아서 이메일만 입력해줍니다. 즉 브라우저가 스스로 유효성검증해준다는 거죠. 괜히 자바스크립트로 이메일 제대로 넣었는지 검사할 필요가 없습니다.

view plaincopy to clipboardprint?

1. >

3. html lang="en">
4. head>

5. meta charset="utf-8">
6. title>untitledtitle>

7. head>
8. body>

9. form action="" method="get">
10. label for="email">Email:label>
11. input id="email" name="email" type="email" />
13. button type="submit"> Submit Form button>
14. form>

15. body>
16. html>

브라우저에 따라 다르니, 아직 이 속성에 전적으로 의지하진 마세요.

브라우저에 따라 아직은 좀 문제가 있습니다. Opera 같은경우 이 기능이 잘 지원되는데, placeholder (다음에 설명) 같은 속성은 먹히지 않습니다. 결국 아직 전체 브라우저가 다 지원하지는 않으니까, 이 속성 쓰는 것은 아직은 조심하라는 말씀