본문 바로가기

IT & TECH/HTML

2. Sublime Text을 이용하여 HTML을 실행해보자!

저희는 1강에서 HTML의 구조와 태그에 대해서 간략히 알아보았습니다. 하지만 여러분들 마음속엔 아직 찝찝한 것이 남아있습니다. 

바로, 1강에서 코드를 실습해보지 못했다는 것이죠. 1강에서 보여드렸던 스크린샷을 기억하시나요?


기억이 나지 않으시는 분은 http://techdaddy.tistory.com/20 <= 클릭해 주세요. ( 하단의 스크린샷 두개를 참고하시면 됩니다.)


오늘 보여드릴 것은 1강의 스크린샷에 나와있는 것 처럼 어떻게 내가 짠 코딩을 웹사이트에 표현할 수 있는지 보여드리려고 합니다. 

가장 먼저 해야될 것은 Sublime Text라는 텍스트 에디터를 다운받는 것입니다. 아래로 따라와 주세요.





<Sublime Text 맥(Mac)에 설치하는 법> 


(서브라임 텍스트를 윈도우에 설치하는 것도 맥에 설치하는 법이랑 거의 동일합니다. 그냥 따라와 주세요)


1. Sublime text 사이트에 접속합시다.  링크 : https://www.sublimetext.com/

    운영체제에 맞게 다운로드 버튼을 클릭하세요. 그러면 아래 화면처럼 다운로드 되는 것이 보일겁니다. 

  다운로드가 완료되면 Sublime Text Build 3... dmg라고 써있는 것을 클릭해 주세요.




2. 맥으로 다운받으시는 분들은 아래처럼 화면이 뜰텐데요. Sublime Text를 드래그하여 Application에 집어 넣읍시다.




3. 바탕화면 -> Finder -> 응용 프로그램 -> Sublime 텍스트를 클릭합니다. 



4. 클릭하면 아래와 같은 화면이 나오는데요. File -> New File을 클릭합니다. 그러면 아래처럼 untitled라는 화면이 뜰 것입니다. 



5. 아래처럼 코딩을 합시다. 귀찮으신 분들은 이 텍스트 파일을 다운받아서 복사 붙여넣기를 하시면 됩니다. 그래도 title 태그, h1 태그 사이에 자신이 넣고 싶은 text를 넣어주시면 됩니다. 저는 my first website를 텍스트로 넣었지만 여러분들은 뭐 "나의 처음 웹사이트 이런식으로 넣으시면 됩니다. 

연습파일.txt

 



6. 위처럼 타이핑을 완료한 후에->Save를 클릭하고, 아래와 같이 practice.html을 입력 후 데스크탑(바탕화면)에다 저장합시다.



7. 그러면 이와같은 파일이 바탕화면에 생성될 것인데요. 클릭해 줍시다.



8. 축하드립니다. 여러분들은 1강에서 본 스크린샷의 화면처럼 스스로 웹사이트를 만들어 내셨습니다. 보시다시피 title 태그 안에 있는 내용인 my first website가 위 제목으로 표시되어 있으며, <body>태그 안에 있는 <h1>태그 내용인 This is my first website이 웹사이트에 표시되는 것을 볼 수 있습니다. 







<HTML을 실행하는 또 다른 방법> 


앞에선 Sublime text를 사용하는 방법에 대하여 알아보았습니다. 그런데 보니깐 조금 귀찮습니다. 파일 저장도 해야되고 파일 클릭도 해야하고 과정이 좀 복잡한 것 같기도 하고요. 

그래서 저는 그것의 대안인 w3schools.com에서 제공하는 Tryit Editor를 사용하려고 합니다. (링크 : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic)

추후에 진행되는 강의는 다 이것으로 진행할 것이기 때문에, 한 번 눈여겨 봐 주시기 바랍니다. 그러면 서브라임 텍스트는 언제 사용하느냐? 나중에 CSS파트로 넘어갈 때에 Sublime text를 사용할 예정입니다.

이것을 사용하면 복잡한 과정이 사라집니다. 단순히 왼쪽에 타입을 하고 see result를 눌러주시면 바로 결과가 오른쪽 창에 표시됩니다. 



수고하셨습니다. 다음 강의에서 뵙겠습니다.





'IT & TECH > HTML' 카테고리의 다른 글

5. HTML의 핵심! 링크에 대해 배워보자  (0) 2016.04.12
4. HTML 리스트 관련 태그  (0) 2016.04.11
3. HTML 텍스트 관련 태그  (1) 2016.04.11
1. HTML 구조  (0) 2016.04.11
티스토리 꾸미기 / 웹사이트 만들기  (2) 2016.04.11