|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 01편 : 태그란 무엇인가? |
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 01편 : 태그란 무엇인가?
#1. HTML이란?
HTML처음이니 잠시 몰라도 되는 개념 설명부터.
저희가 보는 (거의) 모든 웹페이지는 기본적으로 HTML이라는 언어에 의해서 만들어져있습니다.
하이퍼 텍스트 마크업 랭귀지(Hyper Text Mark-up Language)라는 건데 아실 필요없구요.
HTML이 만들어진 이유는 웹 환경에서 문서와 문서를 연결하는 툴이 필요했기 때문입니다.
모든 웹이란 것이 거미줄 처럼 연결되어있는데 이를 구현할 기본 개념이죠.
이렇게 연결된 링크를 하이퍼링크(Hyper Link)라고 부릅니다.
예를 들어 저희가 인터넷에서 하는 모든 행위는 어떤 링크를 클릭해서 이동을 하는 것이 기본입니다.
검색어를 입력하고 버튼을 클릭하든, 검색 결과를 눌러서 웹페이지로 이동을 하든, 사이트 내의 메뉴를 누르든,
심지어는 웹브라우져의 즐겨찾기 목록을 클릭하는 것 조차도 이 기본 개념을 이용한 것이죠.
HTML이 할 수 있는 거의 유일한 기능이 이것입니다.
문서와 문서. 즉, 웹페이지와 웹페이지를 연결해주는 기능이죠.
이 기능 외에 HTML이 할 수 있는 것은 '태그'라는 것을 순서대로 써서 문서의 내용을 레고처럼 쌓아올리는 것입니다.
HTML이 할 수 있는 모든 것이 이 두 가지 기능입니다.
#2. HTML 문서를 만들어 보자
그러면 HTML문서를 어떻게 만들까요?
그냥 메모장(notepad) 열고서 파일 저장 할 때 확장자를 html로 붙이면 됩니다.
(예) 파일이름.html
확장자가 뭐냐구요?
파일의 이름은 "파일이름.확장자"의 형태를 갖고 있습니다. 여기서 "." 뒤의 부분이 확장자입니다.
컴퓨터는 이 확장자를 보고서 파일의 종류를 처음 판단합니다.
(그래서 이걸 아무렇게나 막 바꾸면 파일 실행이 안 되죠.)
파일 확장자가 안보인다구요?
윈도우 설정이 컴맹한테는 확장자를 안 보여주게 되어있어서 그렇습니다.
(윈도우XP기준입니다만) 아무 폴더나 클릭해서 여시구요.
위의 메뉴 보시면 '도구'에 '폴더 옵션'이 있으니 클릭하세요.
상단의 '보기'탭을 클릭하시면 아래 내용의 중간보다 좀 더 아래쪽에 '알려진 파일 형식의 확장명 숨기기'가 체크되어있을겁니다.
이걸 체크를 풀어버리시고 확인 누르시면 보일겁니다.
확장자가 htm인 HTML문서는 뭐냐구요? 묻지마시고 그냥 html씁니다.
괜히 편하려고 이상한 짓 하지말고 많이 쓰는 걸로 가요 우리.
참고로 저도 HTML 등의 문서 작업 시에 그냥 메모장 씁니다.
나모나 Editplus 이런 거 다 필요없어요. 괜히 머리만 더 복잡해집니다. 쉽게 갑시다.
만일 HTML파일을 메모장으로 못 여시겠으면 아래와 같이 해보세요.
( HTML파일 우클릭 → 연결 프로그램 → 메모장(혹은 Notepad) )
* 만일 메모장이 목록에 없다면 '연결 프로그램'에서 찾으면 나옵니다.
#3. 태그란 무엇인가?
그럼 이제 태그에 대해서 설명해보겠습니다.
저희가 간혹 보는 <태그이름> 이렇게 써 있는 모양의 것들을 HTML에선 태그라고 부릅니다.
화살표 모양의 괄호<>를 표식으로 해서 특정한 명령들을 받아들이고 실행하는 것이죠.
웹페이지는 이 태그들을 순서대로 나열해서 만듭니다.
어떤 계산이나 원리가 필요한 것도 아니고 그냥 눈에 보이는 순서대로 위에서부터 쌓는 것이죠.
위에 보시는 것 처럼 두 개의 태그를 입력하니까 두 개가 순서대로 보여지는 것을 확인할 수 있습니다.
HTML 태그는 이렇게 순서대로 쓰면 순서대로 나옵니다. 이게 거의 전부입니다.
태그에 대한 기본 개념을 하나만 더 설명하겠습니다.
어떤 태그는 '열고' '닫는' 개념이 있습니다.
예를 들어 <태그이름></태그이름> 이런 구문이 있으면,
<태그이름> ← 이건 태그를 연 것이고
</태그이름> ← 이건 태그를 닫은 것입니다.
열고 닫는 태그는 일반적으로 그 사이에 있는 부분에 영향을 끼칩니다.
예를 들어서 <center>내용</center>라는 태그는
열고 닫는 사이의 내용을 페이지 한 가운데로 정렬 시킵니다. (가로방향)
(예)
<center>가운데 정렬 테스트</center>
| (결과)
가운데 정렬 테스트 |
다른 거 필요없이 태그가 무엇인지랑, 태그를 열고 닫는다는 말이 뭔지만 알면 이번 강의는 OK.
참 쉽죠? 이번 강의 너무 어려우면 댓글 주세요-_-;
|
|
| 강아지랑 송아지도 만들 수 있는 홈페이지 강좌 - 인트로 |
사실 블로그조차 SNS에 위협을 받는 시대인데 손으로 만드는 홈페이지의 시대는 이미 사라졌죠.
하지만 블로그이건 SNS이건 모두 홈페이지와 마찬가지로 사람이 손으로 만든 프로그램이라는 것에는 변함이 없습니다.
저처럼 직접 홈페이지를 만들고서 관리하는 것을 좋아하는 분이 계실 수도 있고,
취미이든 관심이든 한번쯤은 알아보고 싶다는 분이 계실 수도 있고,
무엇보다 모처럼 만든 카테고리의 내용을 적당히 채우기 위해서
앞으로 '강아지랑 송아지도 만들 수 있는 홈페이지' 기획연재를 할까 합니다.
제목처럼 강아지랑 송아지는 물론 고양이도 만들 수 있는 홈페이지 강의이기 때문에
체계적인 어떤 강의를 할 생각은 없습니다. 홈페이지를 만들 때 필요한 최소한의 지식, 하지만 강력한 지식만을. 조금이라도 필요없는건 가차없이 다 빼버린 내용만 올릴 것입니다. 아마 연재가 그리 길지도 않겠죠.
처음 접하시는 분들에겐 그래도 생소한 내용이겠지만,
알고보면 웹프로그래밍의 입문은 정말 쉽습니다. 취미선에서는 말이죠.
저 또한 웹프로그래밍을 정식으로 배운 적은 없는데요 뭐.
혹여 체계적으로 더 공부를 하고 싶으신 분은 책을 사서 공부하시는 것을 추천드립니다.
그리고 웹에도 좋은 사이트가 많이 있습니다. 블로그 같은 강의 올리는 사이트 말구요.
해당 언어의 웹표준에 대한 설명이 들어있는 공식/비공식 사이트가 다 있답니다.
이런 곳에서 찾는 게 가장 정확하죠.
더불어서 질문은 웬만하면 하지마세요. 어차피 저도 취미수준이라 잘 모릅니다.
질문을 하시고 싶으신 분은 PHP스쿨 같은데서 검색하거나 질문하시기 바랍니다.
아무튼 앞으로 잘 부탁드립니다.
|
|
| 사쿠라대전 - 꿈의 다음 편 (夢のつづき) |
사쿠라대전2(サクラ大戦2)~그대여 죽지마오(君、死にたもうことなかれ)~의 엔딩곡인 '夢のつづき(꿈의 다음 편 / Yume no Tsudsuki)'입니다. 개인적으로 사쿠라대전 노래 중에서 가장 좋아하는 곡이자 제국화격단 스토리 라인의 끝인 사쿠라대전2의 엔딩곡이기도 하죠. 이 후에도 여러 사쿠라대전의 게임 외 시리즈의 엔딩곡으로도 쓰인 것 같습니다.
사쿠라대전의 주인공들은 평소에는 극장에서 제국가극단(帝国歌劇団)이란 극단에 소속된 배우로서 살아가다가, 임무가 생기면 군의 비밀조직 제국화격단(帝国華撃団)의 일원으로써 활동합니다. 여기서 제국가극단과 제국화격단은 '테이코쿠카게키단(ていこくかげきだん)'으로 발음이 같습니다. 평소에 배우의 신분으로 살면서 연극을 하기 때문에 관련된 노래도 많지요. 이 곡은 그 중 하나이기도 합니다. (노래를 계속 부르면서 하는 연극의 종류를 뭐라 하는지는 잘 모르겠네요. 뮤지컬?-_-;;)
사쿠라대전은 또한 제가 가장 좋아하는 게임 중의 하나이기도 합니다. 사쿠라대전 때문에 드림캐스트를 샀고, 일본에 있을 떄는 사쿠라대전 전문숍인 태정로망당(太正浪漫堂)에도 계속 다녔죠. 제가 유일하게 한정판을 산 게임이기도 하고 굿즈를 구입한 게임이기도 합니다. 그리고 게임 내 캐릭터에 가장 빠졌던 게임이기도 하죠.
게임사에서도 사실 중요한 획을 그었다고 생각하는데, 어드벤쳐파트의 LIPS(Live & Interactive Picture System)라는 시스템은 비쥬얼노벨류 장르의 대화분기 선택지에 제한 시간, 이펙트, 특정 커맨드의 조작, 시간 경과에 따른 선택지의 변경 등을 도입한 (아마도) 최초의 게임이자 이 보다 더 잘 된 결과물을 지금껏 본 적은 없습니다. 참고로 이 게임의 장르는 비쥬얼 노벨은 아닙니다.
사쿠라대전의 가장 안타까운 점은 5편이 망했다는 것...이 아니라,
한국에서는 거부감이 드는 시대적 배경입니다. 사쿠라대전의 시대적 배경은 태정(太正)이라는 가상의 시대인데 이는 실제로 있었던 일본의 대정(大正) 시대를 모티브로 하고 있습니다. 둘의 발음도 '타이쇼오(たいしょう)'로 같죠. 여기에 대해서는 더 자세한 이야기를 더 할 수도 있지만, 그냥 노래를 소개하는 글이니만큼 기회가 있으면 언젠가 다시 하기로 하죠.
참고로 이 노래는 게임 노래이지만 가사도 매우 좋아합니다.
노래는 언제나 세상을 구하니까요;)
夢のつづき
유메노 츠즈키
꿈의 다음 편
この夢がずっとずっと つづいてほしい
코노 유메가 즈읏토 즈읏토 츠즈이테 호시이
이 꿈이 언제까지나 언제까지나 이어지면 좋겠어
わたしの恋は 輝いているわ
와타시노 코이와 카가야이테이루와
나의 사랑은 반짝이고 있어
ともに過ごしあのとき 胸にたぐりよせて
토모니 스고시 아노토키 무네니타구리요세테
함께 보냈던 그 시간을 가슴 속에 되살리며
歌いましょう さあ歌を あなたの 思い出の歌
우타이마쇼오 사아 우타오 아나타노 오모이데노 우타
노래를 부르자. 자 노래를. 당신의 추억이 있는 노래를
この夢がずっとずっと つづいてほしい
코노 유메가 즈읏토 즈읏토 츠즈이테 호시이
이 꿈이 언제까지나 언제까지나 이어지면 좋겠어
わたしの恋は 輝いているわ
와타시노 코이와 카가야이테 이루와
나의 사랑은 반짝이고 있어
ともに生きた証が 胸に熱くよぎる
토모니 이키타 아카시가 무네니 아츠쿠요기루
함께 살았던 증거가 가슴에 뜨겁게 지나가고 있어
いつまでも いつまでも 大切にしたい
이츠마데모 이츠마데모 타이세츠니 시타이
언제까지라도 언제까지라도 소중하게 간직하고 싶어
それぞれの出会いは 奇跡のようです
소레조레노 데아이와 키세키노요오데스
저마다의 만남은 기적과 같아요
ほんのすこし目を閉じれば
호은노 스코시 메오 토지레바
아주 잠깐 눈을 감으면
永久の夢 やさしく 歌となり こころゆらす
토와노 유메 야사시쿠 우타토나리 코코로유라스
영원한 꿈이 다정하게 노래가 되어 마음을 흔들지
思い出に よりそうふたり
오모이데니 요리소우후타리
추억을 향해 몸을 기대는 두 사람
歌を さあ歌いましょ それが夢のつづき
우타오 사아 우타이마쇼 소레가 유메노 츠즈키
노래를, 자 노래를 불러요. 그것이 꿈의 다음 편
高らかに愛を 歌う喜び
타카라카니 아이오 우타우 요로코비
소리를 높여 사랑을 노래하는 기쁨
歌を さあ歌いましょ それが夢のつづき
우타오 사아 우타이마쇼 소레가 유메노 츠즈키
노래를, 자 노래를 불러요. 그것이 꿈의 다음 편
巡りあい 信じあい 明日を歌お
메구리아이 시은지아이 아시타오 우타오
운명적으로 만나고 서로를 믿으며 내일을 노래해요
この夢がずっとずっと つづいてほしい
코노 유메가 즈읏토 즈읏토 츠즈이테 호시이
이 꿈이 언제까지나 언제까지나 이어지면 좋겠어
わたしの恋は 輝いているわ
와타시노 코이와 카가야이테이루와
나의 사랑은 반짝이고 있어
こよい春の匂いに 咲き乱れる花は
코요이 하루노 니오이니 사키미다레루 하나와
오늘밤 봄의 향기에 만발하는 꽃은
かぐわしく 舞い踊る 素晴らしき世界
카구와시쿠 마이오도루 스바라시키 세카이
향기롭게 춤을 출 거야 멋진 세상이야
それぞれの 出会いは 奇跡のようです
소레조레노 데아이와 키세키노요오데스
저마다의 만남은 기적과 같네요
ほんの すこし目を閉じれば
호은노 스코시 메오 토지레바
아주 잠깐 눈을 감으면
永久の夢 やさしく 歌となり こころゆらす
토와노 유메 야사시쿠 우타토나리 코코로유라스
영원한 꿈이 다정하게 노래가 되어 마음을 흔들지
思い出に よりそうふたり
오모이데니 요리소우 후타리
추억을 향해 몸을 기대는 두 사람
歌を さあ歌いましょ それが夢のつづき
우타오 사아 우타이마쇼 소레가 유메노 츠즈키
노래를, 자 노래를 불러요. 그것이 꿈의 다음 편
高らかに愛を 歌う喜び
타카라카니 아이오 우타우 요로코비
소리를 높여 사랑을 노래하는 기쁨
歌を さあ歌いましょ それが夢のつづき
우타오 사아 우타이마쇼 소레가 유메노 츠즈키
노래를, 자 노래를 불러요. 그것이 꿈의 다음 편
立ち上がれ 肩を抱き 明日を歌お
타치아가레 카타오 다키 아시타오 우타오
일어서요 어깨를 감싸안고 내일을 노래해요
歌を さあ歌いましょ それが夢のつづき
우타오 사아 우타이마쇼 소레가 유메노 츠즈키
노래를, 자 노래를 불러요. 그것이 꿈의 다음 편
高らかに愛を 歌う喜び
타카라카니 아이오 우타우요로코비
소리를 높여 사랑을 노래하는 기쁨
歌を さあ歌いましょ それが夢のつづき
우타오 사아 우타이마쇼 소레가 유메노 츠즈키
노래를, 자 노래를 불러요. 그것이 꿈의 다음 편
立ち上がれ 肩を抱き 明日を歌お
타치아가레 카타오다키 아시타오 우타오
일어서요 어깨를 감싸안고 내일을 노래해요
歌を さあ歌いましょ そして夢のおわり
우타오 사아 우타이마쇼 소시테 유메노 오와리
노래를, 자 노래를 불러요. 그리고 꿈은 끝나죠.
あふれる涙を そっとぬぐって
아후레루 나미다오 소옷토 누구웃테
넘쳐 나오는 눈물을 살짝 훔치고서
歌を さあ歌いましょ だけど夢はつづく
우타오 사아 우타이마쇼 다케도 유메와 츠즈쿠
노래를, 자 노래를 불러요. 하지만 꿈은 계속 돼요
さよならは 言わないの また会えるから
사요나라와 이와나이노 마타 아에루카라
안녕이라고는 말하지 않을 거예요. 다시 만날 수 있으니까요.
ラララ ラララララララ ラララララララララ
LaLaLa LaLaLaLaLaLaLa LaLaLaLaLaLaLaLaLa
ララララララララ ラララララララ
LaLaLaLaLaLaLaLa LaLaLaLaLaLaLa
歌を さあ歌いましょ それが夢のつづき
우타오 사아 우타이마쇼 소레가 유메노 츠즈키
노래를, 자 노래를 불러요. 그것이 꿈의 다음 편
さよならは 言わないの また会えるから
사요나라와 이와나이노 마타 아에루카라
안녕이라고는 말하지 않을 거예요. 다시 만날 수 있으니까요.
春は めぐる いつも うつくしく
하루와 메구루 이츠모 우츠쿠시쿠
봄은 돌아와요. 언제나 아름답게
いつかまた この夢のつづきを
이츠카 마타 코노 유메노 츠즈키오
언젠가 다시 이 꿈의 다음 편을
麗しの 帝国歌劇団
우루와시노 테이코쿠카게키다응
아름답고 사랑스러운 제국가극단
|
|
[PREV] [1] ... [256][257][258][259][260][261][262] ... [359] [NEXT]
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse |
|
|