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 안에 

<h1>Hello World</h1>   
     <p>안녕하세요! HTML5</p>


요소를 추가하고 


우측 상단에 번개 표시 를 눌러보자 !

이제 여러가지 바꿔가면서 출력을 해보시면서 테스트를 해보세요 ~


'웹 프론트엔드 > HTML' 카테고리의 다른 글

1. HTML 웹 디자인 학습 사이트 모음  (2) 2018.02.15
웹 디자인 Text 에디터  (0) 2018.02.04

내가 사용해본 애디터 툴은 AtomBrackets  이렇게 두가지 이다.

설치방법은 간단하니 설치하여 두가지 다 사용해보는 것을 추천드립니다.

Atom의 경우 유명한 GIthub , Brackets의 경우 Adobe 둘다 막강하죠 

사실 뭘 쓰나 먼져 접한 툴을 사용할 가능성이 크죠 ㅎㅎ 둘다 너무너무 사용하기 좋기 때문입니다.


설치방법은 

Atom

https://atom.io/



 

아톰 화면


Brackets

 http://brackets.io/




 두가지 다 설치나 사용은 어렵지 않습니다.

다만 개인적인 소견으로는 입문에게는 브라켓은 한글을 지원하기 때문에 

초보차에게 더 편할것 같아요  익숙해지면 아톰도 사용해 보시길 권장해드립니다.


'웹 프론트엔드 > HTML' 카테고리의 다른 글

1. HTML 웹 디자인 학습 사이트 모음  (2) 2018.02.15
1강 HTML5  (0) 2018.02.04

+ Recent posts