오늘부터 나도 웹개발자 - 1
화면을 만들어보자 (Html로 Hello World 찍어보기)
자 우선 웹 개발이란 무엇인가에 대한 정리는 추후에 하기로 하고
일단 화면을 만들어 봅시다..
우선은 어떤 사이트를 개발할지에 대한 기획이 매우 중요합니다
그런 거 기획하다간 진도가 안나가니 추후 생각해보고
일단 웹 화면을 무작정 만들고 살을 붙여가는 걸로 하겠습니다
먼저 텍스트 편집기를 켜세요
물론..여러 텍스트 편집기 프로그램이 있지만
오늘 여기에서 나오는 수준은 굉장히 초보 수준이라
윈도우에 내장 프로그램 메모장을 켜셔도 됩니다
화면을 만들때 제일 먼저 배우는 게 HTML일 겁니다
일단 이거 해보기 전이나 해본 후에 깊은 걸 알고 싶다면 여길 방문하세요
https://www.w3schools.com/html/default.asp
웹 초창기때부터 길라잡이가 되었던 w3 스쿨 튜토리얼의 끝판왕입니다
웹 개발을 하기로 시작했다면 영어로 표시되는 걸 두려워하지 마세요
나중에 본격적인 개발을 하다 검색해보면 영어가 기본적으로 나오는데 영어를 못해도 프로그래밍을 하다 보면 대충 이해는 가는 수준이 되니까 벌써 겁내지 않아도 됩니다
가끔 프로그래밍 배우고 싶다고 얘기하는 분들이
html까지 프로그래밍 해봤다고 그러세요
html은 하이퍼 텍스트 마크업 랭귀지여서 언어라고 말한다면 할 말 없지만
html은 그냥 웹의 계층적인 링크를 위한 것이지 개발 언어라고 말할 순 없으니
이제 오늘부터 어디가서 html 배웠다고 프로그래밍 해봤다고 하는 소리는 하지 않는 걸로..
html 구조는 크게 이렇게 정의 됩니다.
html 파일 정의 <html></html>
헤드 <head> </head> 보통 스크립트 같은 게 들어가요.
몸통 <body> </body> 실제 html 이 삽입되는 구간이죠
html이 좋은게
<head>를 썼는데 </head>를 이렇게 닫지 않았다고 에러가 나진 않아요.
xml은 에러가 나거든요.
그러니 늘상 열었으면 닫는다는 생각을 명심하도록 합시다
<html>
<head>
</head>
<body>
</body>
</html>
저렇게 메모장에 쓴 다음 그냥 저장합니다
저장할때 index.html이라고 파일명을 줘요
프로그래밍의 처음 페이지는 다 index.확장자거든요
가끔은 default.확장자도 있어요
아무튼 저렇게 코드를 저장하고 웹 브라우저(익스플로러나 크롬,사파리 등)으로 여시면
아마도 하얀 페이지가 뜰 겁니다
자..이제 html 파일을 만들어봤고 처음으로 Hello World를 찍을 거에요
모든 개발 언어에서 처음 테스트로 찍을땐 Hello World가 국룰 넘은 전세계룰이거든요
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
저렇게 쓰고 다시 저장 후 실행하면 아까 하얀 화면에 Hello World가 보일 겁니다
그럼 끝.
참 쉽죠
Html로 Hello World 찍어보기
https://www.youtube.com/watch?v=swjeArUYh14
유투브 예제는 아직은 별 것도 없지만,
앞으로.. 이 브런치에 삽입할 실행 화면을 위해 영상 편집을 배울 예정입니다
과연...ㅎㅎ 저도 뭔가 발전이 있겠죠?
기대되네요
