1. w3schools
https://www.w3schools.com/html/
대중적으로 이용하는 사이트 이다 . 단계별로 기초부터 잘 정리되어있고 예제가 어렵지 않아 영어로 되어있긴하나
어렵지 않습니다.
2. poiemaweb
이론부터 자세하게 설명되어있고 UI/UX가 잘 되어있다 ㅎㅎ
무엇보다 가장 큰 장점은 한글로 되어있다 ㅎㅎ
추가적으로
jsbin
http://jsbin.com/?html,css,output
텍스트 에디터를 설치하여 연습해도 되지만 정말 프로그램 처음 완전 처음 시작하신다면 JSBIN을 추천드립니다.
로그인이 필요없으며 ,우측 상단에 Run with JS 버튼을 누르면 작성된 내용이 바로 출력 되는점이 매력이다.
| 1강 HTML5 (0) | 2018.02.04 |
|---|---|
| 웹 디자인 Text 에디터 (0) | 2018.02.04 |
HTML(HyperText Markup Language)
웹 페이지를 기술하기위한 마크업 언어
html 파일을 만든 후
brackets 의 경우 html:5 를 작성 후 Tab키를 누르면
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> | cs |
이렇게 자동완성이 됩니다.
HTML5의 경우 <!DOCTYPE html>
시작을 해야합니다.
document는 <html> </html> 사이에 작성하며
<head>사이에는 meta 정보들이 들어갑니다.
웹 브라우저에 나타내는 요소들은 <body> 사이에 작성합니다.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>Hello World</h1> <p>안녕하세요! HTML5</p> </body> </html> | cs |
body 안에
요소를 추가하고
우측 상단에 번개 표시 를 눌러보자 !
이제 여러가지 바꿔가면서 출력을 해보시면서 테스트를 해보세요 ~
| 1. HTML 웹 디자인 학습 사이트 모음 (2) | 2018.02.15 |
|---|---|
| 웹 디자인 Text 에디터 (0) | 2018.02.04 |
내가 사용해본 애디터 툴은 Atom과 Brackets 이렇게 두가지 이다.
설치방법은 간단하니 설치하여 두가지 다 사용해보는 것을 추천드립니다.
Atom의 경우 유명한 GIthub , Brackets의 경우 Adobe 둘다 막강하죠
사실 뭘 쓰나 먼져 접한 툴을 사용할 가능성이 크죠 ㅎㅎ 둘다 너무너무 사용하기 좋기 때문입니다.
설치방법은
Atom
https://atom.io/
아톰 화면
Brackets
http://brackets.io/
두가지 다 설치나 사용은 어렵지 않습니다.
다만 개인적인 소견으로는 입문에게는 브라켓은 한글을 지원하기 때문에
초보차에게 더 편할것 같아요 익숙해지면 아톰도 사용해 보시길 권장해드립니다.
| 1. HTML 웹 디자인 학습 사이트 모음 (2) | 2018.02.15 |
|---|---|
| 1강 HTML5 (0) | 2018.02.04 |
