HTML – 웹사이트 만들기

이번시간에는 좀 더 실전적인 예제를 살펴볼겁니다 생각하기에 따라서는 우리가 아직 할 게 많이 있죠 그런데 여러가지 태그들이 있습니다 140개 정도의 태그가 현재까지 있는데 태그를 다 살펴보는 거는 쉽지도 않은 일일 뿐더러 별로 의미가 없습니다

여러분들이 지금까지 배운 것들, 가장 중요한 것을 우리가 다 배웠고, 바로 그런 것들을 이용해서, 최소한의 지식을 통해서 우리가 뭔가 의미 있는 것들을 해보는 것이 제가 보기엔 더 중요해요 그래서 지금해 볼 것은 이런걸 만들어 볼거예요 보시는것 처럼 이렇게 생긴 웹페이지 인데 여기 있는 항목들을 클릭하면 그 항목에 대한 링크로 이동을 하고 여기 있는 html 부분을 클릭하면 보시는 것처럼 첫 번째 페이지로 이동을 하는 그래서 여기있는 각각의 링크들이 서로 상호 작용하면서 이렇게 움직일 수 있는 완결된 웹사이트 하나 만들어 보자는 거죠 그래서 첫 번째 페이지는 여기있는 html을 클릭했을때 나오는 페이지인데 이 페이지의 이름은 보시는 것처럼 indexhtml 입니다 그리고 첫번째 링크를 클릭하면 1html 이 나오고 두번째는 2html 세번째는 3html 네번째는 4

html 이 나와서 어디로든지 이동할 수 있는 동선을 구성해 보자는 거에요 그러면 우리가 이걸 만들기 위해 필요한 파일은 총 다섯 개의 파일이 필요할 겁니다 그럼 지금부터 한번 해보죠 우선 chtml에 있는 내용을 그대로 재활용 하겠습니다 chtml을 다른이름으로 저장을 할게요 그리고 파일의 이름은 index

html이라고 하겠습니다 이건 대문 페이지예요 모든 파일로 해서 저장 이제 indexhtml 파일을 만들었으니까 한번 열어보시죠 이렇게 열렸죠? 자 그리고 우리가 뭐~ 1html / 2html / 3html 이런거 만들기 전에 우선 링크를 먼저 마련해 놓는게 좋습니다 왜냐하면 여기있는 각각의 링크들 여기에 걸리게 될 링크들은 각각의 페이지마다 똑같이 들어갈 내용이기 때문에 여러분이 파일을 먼저 만들고 링크를 추가하면 중복되는 작업이 생겨요

그런데 링크를 다 완성한 다음에 그걸 복제하면 더욱 효율적으로 일을 할 수 있다는 거예요 한번 해보죠 우선 여기있는 html은 이 부분이죠 이걸 클릭했을 때는 indexhtml이 나와야하니까 여기는 이렇게 indexhtml에 링크를 걸었습니다 그리고 기술소개라는 것을 클릭했을때는 1html이 나오면 돼요 물론 아직 우리는 1

html을 가지고 있진 않지만 링크부터 만든다고 문제 될 건 없습니다 그럼 보시는 것처럼 기술소개는 1htm이죠 물론 클릭해도 파일이 없기 때문에 해당 웹페이지를 찾을 수 없다는 메시지가 뜨겠죠 그 다음에 밑에 있는 기본 문법은 2html 3html 복사 붙여넣기를 이용하시면 조금 수월하죠 자 이렇게해서 각각의 링크를 일단 완성했어요 자 그럼 이제 indexhtml만 있으니까 1

html / 2html / 3html 이걸 이제 만들어야겠죠 자, 그럼 여기있는 indexhtml을 제가 다른 이름으로 저장하기를 해서 1 html 이라는 파일로 만들었습니다

그럼 이제 기술소개라는걸 클릭하면 보시는 것처럼 1html 페이지로 가죠 물론 내용의 변화는 없습니다 왜? 내용을 수정 안했으니까요 여기있는 내용을 수정해 봅시다 1html은 기술소개니까 이렇게 기술소개라고 하고 본문은 html은 아무거나 입력하세요 'html은 Hyper Text Markup 약자로 약자로서 웹페이지를 만드는 언어입니다' 라고 이렇게 하고 여기서 리로드를 해보면 보시는 것처럼 이렇게 되죠 그럼 이제 여기 있는 제목을 클릭하면 indexhtml로 갈테고 기술소개를 클릭하면 이제 기술소개에 대한 페이지로 이동을 하겠죠 그럼 여기서 1html을 다시 2

html로 복사한 다음에 여기있는 내용을 2html에 해당되는 기본문법으로 바꾸는거죠 내용은 아무거나 하시면 되죠 그 다음에 3html 그리고 하이퍼텍스트와 속성이라고 하고 텍스트와 속성 a 를 사용합니다 대충쓰는거죠

여러분 실습에 너무 집착하지마세요 4html 그리고 4

html은 본문이 리스트와 태그의 중첩 리스트는 li를 쓰고 ul 이나 ol로 감싸서 사용합니다 그렇게하면 우리가 모든 웹페이지를 다 완성했기 때문에 보시는것 처럼 이렇게 순환하는 웹페이지를 또 웹 사이트를 만들 수가 있는 것이죠 지금까지 제가 소개해드린 내용들이 html에서 가장 중요한 내용들은 다 다룬겁니다 나머지것들은 제가 생각하기에 훨씬 더 어려운데 훨씬 덜 중요한 것들이예요 그래서 여러분들은 제일 중요한 것들을 살펴봤다는 거예요 자 그럼 이제 우리 예전에 제가 수업 시작 할 때 여러분들한테 뭐를 말씀드렸었냐면 웹 페이지에서 오른쪽 클릭해서 소스보기를 한번 해보라고 말씀드린 적 있었죠 이렇게하면 나오는 것들 바로 여기있는 html 코드가 바로 이 웹 페이지에 해당되는 html 코드 였잖아요 자 그런데 여기서 제가 얘기하고 싶었던 건 뭐였냐면 여기는 코드를 이제 여러분들이 상당히 많은 부분 해석할 수 있게 되었다는 겁니다 위에있는 DOCTYPE 뭔지 아시겠죠 그리고 이 문서도 정말 html로 시작하네요 여러분들 네이버나 구글이나 여러분들 자주가는 사이트들 아무데나 들어가서 소스 보기를 해서 꼭 살펴보세요 그리고 정말로 head라는 태그로 시작하고 있네요 그리고 이렇게 생긴 태그들이 있는데 쭉 내려가보면 우리가 모르는 것도 상당히 많아요 여기 있는 것도 다 모르겠죠 쭉 내려가보면 여기 있는 태그 하나만 살펴볼까요? 여기 보시면 버튼이라는 태그가 있네요

여기 제가 선택한 이거, 이게 뭔진 여러분들이 잘 모르실 겁니다 하지만 무얼 알 수 있냐면 얘가 태그라는 사실은 이미 알고 있어요 그렇죠? 그렇다면 여러분이 이 태그라는 사실을 알고 있으면 뭘 할 수 있냐면, 검색할 수 있습니다 또는 질문할 수 있어요 어떻게? 예를 들면 검색을 이렇게하는 거죠 구글 같은 검색엔진에서 우리가 지금 원하는 것은 버튼이라고 하는 태그잖아요? 근데 그냥 버튼이라고 하면 이 세상의 수 많은 버튼이 있을거 아니예요 그럼 여기에 html 이라고 쓰는거죠

그리고 조금 더 정확하게 하기위해서 태그라고 하면 이렇게 검색어를 입력하고 엔터를 치면 엄청나게 많은 html버튼 태그라는 문자가 들어있는 웹페이지를 검색엔진이 순식간에 검색해줍니다 자 그럼 그 중에서 아무거나 제일 먼저 나온 걸 클릭해서 들어가 보면 보시는 것처럼 html 버튼 태그에 대한 설명이 나오네요 그럼 여러분들이 이걸 보시고 여기 있는 Try it yourself 같은 걸 보면 이렇게 clik me라고 돼 있는 부분이 보이네요 무슨 뜻이겠어요 바로 여기있는 버튼이라는 태그가 여기 오른쪽에 있는 버튼을 만들어주는 역할을 하는 태그라는 뜻인 거죠 즉 여러분이 여기 있는 모든 태그를 미주알고주알 기본적으로 다 암기하고 있지 않다고 하더라도 어떠한 것이 태그라는 사실을 알면 또는 어떠한 것이 속성이라는 것을 알면 여러분은 검색할 수 있습니다 또 누군가에게 html의 버튼이라는 태그는 무엇인가요 타입이라는 속성이 submit으로 되어 있으면 어떤 의미를 갖는 건가요 라는 질문을 할 수 있다는 것이죠 제가 생각하기에는 하나하나의 태그를 여러분들이 익히는 것 못지않게 질문하는 법 검색하는 법 이런 것들을 알아가는 것이 훨씬 더 중요할 수 있습니다 왜냐, 지식이라는 것은 계속 바뀌니까요 그 지식을 습득하는 방법만이 사실은 중요한 것이겠죠 자 이렇게 해서 우리가 지금까지 html의 문법, 구조 그리고 하이퍼텍스트를 통해서 완결성이 있는 웹사이트를 만드는 방법까지 살 봤고요 다음 시간부터는 주요한 html의 태그들을 살펴보도록 하겠습니다