안녕하세요!!
헤헤, 지난주에 이어 돌아온 <웹호스팅 미궁을 만드는 법> 시리즈, 저는 네잎클로버에요!
여러분 보고 싶었습니다...거짓말하지 마세요! 거짓말아니라 정말 보고 싶었어요 ㅠㅠ 지난 주에 시리즈를 시작하면서 '아 이거 그냥 묻히면 어떡하지?' 그런 걱정이 많았는데, 많은 분들께서 관심과 응원을 보내주셔서 정말 기분 좋았어요! 다시 한 번 감사드립니다:D
지난 주에 호스팅 서비스 신청과 기본적인 작업도구를 설치했었죠?
오늘부터는 본격적으로 미궁을 만들 거예요! (와 박수! 짝짝짝짝짝짝)
미궁의 페이지를 이루는 요소는 뭐가 있을까요? 글, 맞아요, 이미지도 있고... 음악도 있고, 배경색도 있고, 하이퍼링크도 있고. 맞아요, 다 맞아요. 미궁의 페이지를 이루는 요소는 이렇게 정말 많아요. 하지만 누군가 제게 가장 기본적인 요소가 무엇이냐고 묻는다면, 저는 글과 이미지를 말할 거예요. BGM이 없는 미궁, 배경색이 단조로운 미궁, 장치가 없는 미궁들은 모두 주변에서 발견하기 쉽지만, 글도 없고 이미지도 없는 미궁은 발견하기도, 상상하기도 어렵잖아요? 그렇기 때문에 이번 시리즈 2주차, 3주차에선 html 문서를 통해 여러분께 아주 기본적인 요소인 글과 이미지를 표현하는 방법에 대해 이야기하기로 기획했습니다:D 일단 오늘은~글을 표현하는 법을 알려드릴 거예요!
#태그
하지만 본격적으로 글에 대해 이야기하기 전에 '태그' 라는 개념을 이해하셔야 해요! 아주 간단하지만, 이번 편 뿐만 아니라 앞으로 이 시리즈에서 계속 나올 용어니까 잘 기억해주세요. 제가 저번 주에 'html 문서에 기본적으로 들어가는 요소'라고 소개한 코드 혹시 기억하시나요! 이거 보면서 태그에 대해 간략히 설명하고 갈게요~
//
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
</body>
</html>
//
위에 보시는 것 중 <!doctype html>을 제외하고, '<' 로 시작해서 '>'로 끝나는 것들이 모두 태그예요! 태그는 'HTML 문서를 이루는 기본단위' 라고 하지만, 우리같은 초보자들이 뭐 정의를 알 필요가 있나요~ 지금은 태그의 기능만 알려드릴게요.
태그의 기능을 쉽게 말하면, '여기서부터 내가 쓰는 것은 ~~야!'라고 컴퓨터에게 알려주는 거예요. 위의 <title> 태그를 볼까요! <title> 태그를 쓰면서 우리는 '여기서부터 내가 쓰는 것은 제목이야!'라고 컴퓨터에게 알려줄 수 있는 거예요. 실제로 clover.dothome.co.kr/test.htm 에 들어가보면
웹페이지의 제목이 저기 적힌대로 '제목'임을 알 수 있어요. 신기하죠? 헤헤 그럼 저 뒤에 있는 </title>이 무슨 역할을 하는지 혹시 유추해보실 수 있겠나요! 초고수... 맞아요, <title>이 '여기서부터 내가 쓰는 것은 제목이야!'라는 뜻이라면, </title>은 '여기까지 내가 쓴 것이 제목이야!'라는 뜻이에요. 이 때, <title>을 여는 태그, </title>을 닫는 태그라고 말해요.
HTML 입문자들께서 가장 실수를 많이 하시는 게 이건데... 문서를 작성하실 때~ 몇몇 태그들을 제외하고, 여는 태그를 쓰셨다면 꼭, 꼭 닫는 태그를 쓰셔야 해요. 안 그러면 오류가 나거든요. 하지만 너무 걱정하지 마세요! Dreamweaver, 혹은 Visual Studio Code는 여는 태그를 쓰면 자동으로 닫는 태그를 작성해줍니다. 뿐만 아니라 코드 완성 후 검토하는 제작자를 위해,
이런 식으로 하나의 태그를 선택하면 해당 태그의 짝꿍 태그를 강조해줘요. 이게 제가 메모장보다는 VS Code, Dreamweaver를 추천하는 이유였어요.
"몇몇 태그를 제외하다뇨? 그럼 닫는 태그를 쓰면 안되는 태그도 있나요? 그런 걸 어떻게 구분하죠!"
네 맞아요, 닫는 태그를 쓰지 않는 태그도 있어요. 위에 보시면 <meta> 태그는 짝이 없죠? 이런 친구들이 바로 닫는 태그를 쓰지 않는 태그, '스스로 닫는 태그'에요. 이 친구들은 일일히 설명하기 힘드니, 나올 때마다 제가 '이 태그는 스스로 닫는 태그예요~'라고 말씀드릴게요! 이제 태그에 대해 아시겠나요? 좋아요! 그럼 이제부터 미궁을 만드는 과정을 보여드리면서 글을 표현하는 태그들을 알려드릴게요~
# <p> 태그 / <pre> 태그
무슨 미궁을 만들거냐! 디스토피아 느낌의 공포 스릴러 미궁을 만들 거예요. 제목은 인턴이고요, 미스터리로 가득찬 회사에 주인공이 인턴으로 입사하면서 겪는 일들을 줄거리로 삼아 스토리를 짰어요. 아시는 분들은 아는 미궁이긴 하지만 이번 기회에 소스코드를 정리할 겸 만드는 과정을 처음부터 보여드리기로 결심했습니다. 오늘은 첫페이지에 스토리(글)을 넣을 거예요.
앗, 이렇게 미궁을 만들기 시작할 때, 해당 미궁 폴더를 아예 만드시는 게 좋아요! 그렇지 않으면 후에 다른 미궁을 만들 때, HTML파일의 제목이 같으면 파일이 덮어쓰이는 불상사가 일어날 수도 있거든요. 미궁제목이 인턴인 만큼, 이 미궁 폴더 이름을 intern으로 정하고 만들게요.
이런 식으로요! 왼쪽을 보시면 intern이라는 폴더가 있죠? 앞으로 저 안에 파일을 저장할 거고, intern이라는 폴더를 통째로 제 호스팅 서비스에 업로드할 거예요. 그러면... clover.dothome.co.kr/intern/html파일제목.htm 이런 주소로 접속하면 미궁 페이지가 뜨겠죠? 여기까지 잘 따라오셨을 거라 믿어요!
휴...이제 진짜 글쓰기해볼게요. ㅋㅋㅋㅋㅋㅋ
HTML에서 글을 쓰기 위해 주로 사용하는 태그는 <p> 태그와 <pre> 태그가 있어요. <p> 태그는 줄바꿈과 2개 이상 붙어있는 띄어쓰기를 인식하지 못하고, <pre> 태그는 글을 쓰는 대로 인식한다는 점이 둘의 차이점이에요. 말로만 들으니 감이 잘 안오시는 분들을 위해 직접 보여드릴게요!
VS코드의 '파일'-'폴더 열기'를 클릭해 미궁 폴더를 열고, 새 파일을 만든 후 위에 제가 HTML 작성 시작할 때마다 복붙하라고 했던 거 입력해주세요.
이렇게요. 여기다가는 <p> 태그를 쓸 거예요. <body>와 </body> 사이에
<p>네잎클로버
의미궁
입니 다!</p>
를 붙여 넣어주세요.
그리고 p.htm이라는 제목으로 저장해주세요. 똑같이 새 파일을 만들어서, 이번엔
<pre>네잎클로버
의미궁
입니 다!</pre>
를 붙여 넣어주세요. 이걸 pre.htm으로 저장해주세요.
여기까지 하셨으면 이제 차이를 볼게요. 미궁 폴더로 들어가셔서, p.htm과 pre.htm을 열어보세요! 차이가 느껴지시나요?
이게 <p> 태그를 쓴 파일이고,
이게 <pre> 태그를 사용한 문서예요. <p> 태그가 줄바꿈과 2개 이상 붙어있는 띄어쓰기를 인식하지 못한다는 것, <pre>태그는 글을 쓰는 대로 인식한다는 것. 이 두 말이 무슨 말인지 감이 오시나요!
저는 개인적으로 <pre> 태그를 사용하는 걸 추천해요. 아무래도 미궁 제작을 할 때, 줄바꿈이나 띄어쓰기를 자주 쓰게 되잖아요? 그럴 때 <p> 태그는 되게 번거롭거든요. 물론 <p> 태그 안에서도 <br>이라는 스스로 닫는 태그를 쓰면 줄바꿈이 되긴 하지만... 역시 번거로워요! 이 시리즈에서는 좀 더 편한 <pre> 태그를 이용해서 글을 쓰도록 할게요.
새 파일을 열어주세요! 마찬가지로 복붙코드를 붙여넣어주시고, 이번엔 제목을 index.htm으로 저장해주세요. 이 HTML 문서가 미궁의 첫 페이지가 될 거예요. 미궁 제목이 인턴이니, <title> 태그 사이에 인턴이라고 쓰고 시작할게요~
앗, 왜 첫 페이지 제목이 index.htm이나고요? index 파일이 곧 웹페이지에 접속했을 때 가장 먼저 보여지는 파일이기 때문이에요. 예를 들어, clover.dothome.co.kr/intern/ 으로 접속하면~ 자동으로 clover.dothome.co.kr/intern/index.htm 을 보여줘요. 아무튼, 이어 나갈게요.
이 상태에서~ <pre> 태그를 사용하고, 스토리를 보기 좋게 채워넣어 볼게요.
코드상으로도 좀 문제가 보여요! <pre> 태그 안에 있는 글들은 모두 하얀 글씨여야 하는데, 중간중간에 좀 이상하죠? 위에서 태그를 설명할 때, <로 시작해서 >로 끝난다고 했잖아요? 네... 그 규칙에 따라 <와 > 사이에 있는 글자들을 HTML 태그라고 인식하는 거로 보이네요! 보통은 저렇게 저장해도 큰 문제는 없긴 하지만... 가끔 가다 의도한 대로 웹페이지가 나오지 않을 수 있어요.
방법이 있어요 그래도!
그런 불상사를 막기 위해서 HTML 특수문자 코드표가 존재한답니다! 헤헤 다 외울 필요는 없고요, 오류가 날 때만 그때그때 복사붙여넣기를 하시면 됩니다. 제 index.htm은... 그대로 저장해도 딱히 오류가 나지 않는 케이스이긴 하지만! 코드의 깔끔함을 위해 <는 <으로, >는 >으로 바꿔줄게요.
이제 코드 상으로는 문제가 없어 보이긴 하는데... 한번 저장하고 열어볼까요.
흐음... 한 눈에 봐도 많이 모자라 보이죠! 사실은 이번 주에 이런 첫 페이지를 만들 생각이었어요.
꽤 거리가 먼 거 같죠 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 여기서 더 얘기하려면 글이 너무 길어지니 슬슬 끊고 다음 시간으로 넘길게요.
다음 주에 얘기를 나눌 이미지 태그는 사실 분량이 적을 거예요. 그 때 폰트 적용, 사이즈, 색 설정을 같이 묶어서 올리든, 아니면 이번 주에 추가 글을 올리든지 해서~ 적어도 텍스트는 4주차로 넘어가기 전에 마무리해보겠습니다 헤헤...
혹시 제 소스코드가 필요하시다면
clover.dothome.co.kr/intern/index.htm
으로 확인해주세요. 매주 이 곳에서 업데이트가 될 거예요.
//
그럼 오늘은 이정도까지 할까요!
본격적으로 태그에 대해 이야기하다보니... 초보자분들을 위해 굳이 알 필요가 없는 것들은 최대한 빼면서 설명하려 했는데, 오히려 이것때문에 이해하기 어려웠을지도 모르겠다는 생각이 드네요. 혹시라도 이해가 되지 않거나 추가적으로 궁금한 부분이 있다면, 언제든지 쪽지나 댓글로 문의주세요. 제 능력이 닿는 선에서 도와드리겠습니다.
부족한 글 읽어주셔서 감사합니다. 다음주에 봐요~
전체미궁