ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [갠홈/대문] html은 유튜브 업로드 때만 써본 사람의 갠홈 만드는 방법...
      카테고리 없음 2025. 3. 15. 21:52

      갠홈만드는법 이야쉽다(사실 쉽지 않다)

      저는 진짜 html은 2n년간 유튜브 파일 블로그나 네이버 카페에 업로드 할 때 빼고는 써본 적도 없다가(심지어는 그게 html인지도 몰랐어요) 그냥 갑자기 꽂혔단 말이죠...ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
      처음에는 도메인도 사고 했는데 코딩하다가 장렬하게 불태워져서 3개월 쓰고 9개월은 돈을 날렸어요 그나마 닷홈이라 저렴하게 돈을 날렸습니다...
      그렇게 만든 갠홈? 당연히 다 날아갔습니다 하나도 안 남은 거 있죠...ㅜ 뭘 믿고 백업을 안 했는지 그때는 아보카도 에디션이라 뭘 설정하기 쉬웠죠....그나마?

      아무튼 그래도 갠홈에 대해서...다시 욕망이 넘칠 때 나루https://naru.pub/를 알고 나서 너무 좋았는데
      일단 무료임
      전 불태워지면 최소 반년은 쉬어야 하는 사람이에요 나중에 만료 문자 받고 눈물을 흘렸습니다...연장하기엔 또 이럴 것 같아서...
      그치만 무료라고 하니까 좀 더 마음이 가벼웠어요

      파일질라 같은 걸 굳이 설치하지 않아도 됨
      파일질라..........물론 갠홈 만들기 중에서 제일 쉬운게 파일질라임(제 생각임) 오 여기에 파일이 있어요. 오 여기에 파일을 넣을게요. 링크 가져갈게요~
      반면에 당시 제 컴퓨터가 무려 2015년~2024년까지 10년을 조금 못 채우고 죽었는데 아무튼 오래된 컴퓨터였음을 어필하고 싶었습니다
      그런 컴퓨터에 프로그램 설치가 꽤...힘들었는지 자주 잠들려고 해서 겨우겨우 끌고 갔었는데 나루 갠홈은 자체적으로 파일 업로드가 가능하기 때문에 제 컴퓨터가 조금 덜 부담스러워 했어요
      그 사이에 죽어버렸지만...

      아무튼...이런 장점들로 시작을 했는데
      가장 큰 단점이 있었으니...얘는 아보카도 에디션 같은게 없어서요...
      맨 화면에 "안녕, 세상"하나만 있습니다....

      안녕, 세상?만 덩그러니 놓여있는 나루 갠홈...정말 하나부터 열까지 다 내가 해야했음


      네 처음부터 끝까지 제가 해야한다는 소리입니다 솔직히 이때는 조금 포기하고 싶었어요...
      하지만 한 번 하기로 마음먹고 가입도 했는데 안 하기엔 아까우니까 열심히 해봤습니다

      제가 만든 사용법은 정말 야매입니다
      전문가의 이야기 아님 그냥 제가 정말 야매로 시작한 것들을 적어보았습니다. 기초 그런 거 없습니다 왜냐면 제가 그런 거는...아직 설명을 잘 못하기 때문에;;;그치만 원래 일단 하면서 익히는 거예요

      1. 대문

      저는 아보카도 쓸 때 대문이 그렇게 좋더라구요?? 그래서 만들었습니다 home 파일 하나 더 파서 그 쪽으로 연결될 수 있도록

      일단 index.html은 가장 기본 페이지예요 다른 사람들은 어찌하셨을 지 모르겠지만 저는 그냥 갹 메뉴에 해당하는 각각의 파일을 하나씩 만들었어요.

      만약에 제가 이히힛.com이라는 홈페이지를 만들었다고 해봅시다, 파일을 어떻게 찾아가나요? > "이히힛.com/파일명" 이렇게 입력하면 됩니다 근데 인덱스는 신기한게 굳위 뒤에 /index.html을 붙이지 않더라도 그리로 가더라구요 아무튼 편했다는 이야기

       

      저의 계획은, 뭔가 힌트 같은 글을 남겨 두고, 이미지를 클릭하면 home.html이라는 파일로 연결되게 만들고 싶었어요 그러면 필요한 것은

      힌트 글, 이미지 with 링크 겠죠?

       

      자 이제 본격적으로 코딩을 해볼게요

      head랑 body가 있는데 

      head : 몸이 있어도, 뭔가 행동하려면 머리가 필요하죠 그런 느낌이에요 대충 내가 이런 걸 지시하고 싶은뎅...을 거의 다 포함하고 있고 꾸밈 요소들은 다 여기에 들어간다고 보면 됩니당

      body :  지시를 했으니 움직여야죠 실제로 글자나, 이미지 같은 요소들이 여기에 들어가요

       

      head부터 하나하나 볼게요

      사실 홈.꾸는 레고입니다. 레고 조각부터 만들어 가는. 아무튼 레고를 하려면 레고 조각, 블럭을 만들어야 해요. 그리고 코딩이라는 친구는 하나부터 열까지 설명해 줘야 하나를 할 수 있는 친구기 때문에 "그래서 블럭이 어떻게 생겻어? 모 하는 놈이야? 어? 설명 안 해줘? 그러면 내 맘대로 한다? 데헷" 을 방지 하기 위해서 <style>을 달아줄 거예요 일종에 "이 블럭은 이렇게 생겼고, 이런 놈이다"인 거예요

      <style>
.block{
}
</style>

      이렇게 하면 블럭이 하나 생겨요 이름은 꼭 블럭을 안 써도 돼여 뭐 그냥 happy 이렇게 지어도 상관 없습니다 불러오는 것만 잘하면 됨물론 저렇게 한다고 아무것도 드러나지 않아요 왜냐면 이건 그냥 생각만 한 것과 다름이 없기 때문이에요 움직이려면 바디를 작성해야 합니다 일단 "대충 코딩 힘드러요"를 적어볼게요

      <!DOCTYPE html>
<html lang="ko">
      <meta charset="UTF-8" />
<head>
  <style>  .block{
  margin:0px ;
    }
  </style>
</head>
<body>
<div class="block">
코딩 힘드러요
</div>
</body>
</html>

       

      으앜 헷갈려옄!!! 할 거예요 당연합니다 4줄에서 갑자기 15줄이 되었기 때문에

      일단 하나씩 설명해 줄게요

      먼저, 이 친구들은요 지문과 구문을 구분할 줄 몰라요 우리도 동화 같은 거 보면

       

      산에서 토끼가 친구를 만났어요

      "안녕! 친구야!"

      "안녕! 친구야!"

       

      이렇게 되어 있잖아요?? 따옴표 덕분에 저 두 대사가 서로 다른 사람의 이야기라는 걸 알 수 있어요 같은 말인데두요 <> 이 친구들은 바로 "" 역할이에요 만약에 우리가 따옴표 없이 말한다면

       

      산에서 토끼가 친구를 만났어요

      안녕! 친구야

      안녕! 친구야

       

      이런 느낌이랄까 같은 애가 두 번 말했는지, 각자 말했는지 우리는 대략적으로 이 느낌을 구분해도 컴퓨터는 구분하지 못 한답니다. 얘 사전에 대략은 없어요. 그래서 필요한겁니다 나루의 장점은 이 괄호들이 닫혔는지, 안 닫혔는지 알려주니까 못 찾으면 어카지?? 걱정 안 해도 됩니다

       

      ; 이거 넘 중요해요

      저거는 어떤 느낌이냐면

       

      산에서토끼가친구를만났어요안녕친구야안녕친구야

       

      같은 느낌이랄까 사람마다 글 작성법이 다르잖아요?? 공백을 많이 두는 사람이 있는 가 하면 한 덩어리로 표현 하는 것을 좋아하는 사람도 있고 아무튼 그래서 얘는 혼란에 빠져요 어...얘가 이게...뭐지...하면서요 그래서

       

      산에서 토끼가 친구를 만났어요;

      안녕! 친구야;

      안녕! 친구야;

       

      같은 느낌으로 해줘야 아 얘가 저걸 따로따로 말하고 있구나 하고 알아요

       

      <!DOCTYPE html> : 이 친구는 끝부분을 보면 알겠지만 html 파일이다 라고 하는 녀석입니다

      <html lang="ko">
            <meta charset="UTF-8" /> : 말했죠? 코딩이란 것은 하나부터 열까지 알려줘야 하나를 하는 놈이라구요. 이제부터 한국어로 말한다, 를 표현해 줍니다

       

      요약하면 ""나 html인데, 한국말 좀 쓸게?"" 저거 특히 한국어 표시해 주는 거 있죠 저거 안 달면

      이렇게 떠요 안 그러면 컴퓨터가 '에? 나니? 와카라나이...' 됩니다.

       

      <div>는 '나 지금 이 얘기 하고 있잖아'의 '이 얘기'라고 생각해 주시면 되는데 이 얘기를 또 구체적으로 알려줘야 하기 때문에 class를 붙여줘요 <div class="블럭명"></div> 이렇게 사용합니다

       

      저는 공백을 좋아해서 그런가 코드 설명이 좀 길어 보이네요 코드를 다시 가져올게요 

      <!DOCTYPE html>
<html lang="ko">
      <meta charset="UTF-8" />
<head>
  <style>  .block{
  margin:0px ;
    }
  </style>
</head>
<body>
<div class="block">
코딩 힘드러요
</div>
</body>
</html>

      이게 안녕, 세상?과 다르진 않죠...

      아무튼 결과가 잘 나왔어요 깨지지도 않았고, 원하는 문구가 나왔으니까요 근데 솔직히 저거 홈.꾸를 위해서는 저렇게 위에 착 달라붙으면 안 되겠죠 이제부터 블럭에 이것저것 넣어볼건데

      우리는 이제부터 마당이 딸린 단독주택을 지을 거예요. 그러면 몇 가지 요소가 필요하죠? 마당은 얼마나? 집은 몇평? 집은 파란 지붕으로 할까, 빨간 지붕으로 할까? 이런 것들이요

      margin > 마당은 얼마나?에 해당합니다. 마당-마진 이렇게 외우니까 저는 좋더라구요

      padding >  땅을 샀고, 마당을 정했으면, 집을 두어야 하죠? 마당에 울타리를 친다고 하면 이 울타리에서 얼마나 떨어질까를 패딩이 결정합니다.

      width&height > 집은 몇평?에 해당합니다 이름에서 알 수 있듯이 width 폭, height 높이 입니다. 근데 저는 갠적으로 높이는 별로 안 썼던 것 같아요

      background : 얘가 본격적으로 지붕이며, 벽을 꾸며줘요. background-image, background-color, background-size 등등으로 이름에서 볼 수 있듯이 각각 배경 이미지, 배경색, 배경 크기예요

       

      얘네는 어디에 넣을까요? 이거 이렇게 해라, 저렇게 할거다 지시 사항이니까 <head></head>사이에 있는 블럭 {} 에 넣어줍니다

      그러면 예시 코드를 보여줄게요

      <!DOCTYPE html>
<html lang="ko">
      <meta charset="UTF-8" />
<head>
  <style>  .block{
  margin: 30px;
  padding:10px;
  width:40px;
  height: 50px;
  background-color:yellow;
    }
  </style>
</head>
<body>
<div class="block">
코딩 힘드러요
</div>
</body>
</html>

      이 상태가 맘에 안들면 width 조절하시면 됩니당

      여기서 다행인 점은 백그라운드 컬러에 색상코드표 넣어줘도 반영이 됩니다 섬세한 작업 쌉가능

       

      그러면 이제 힌트 글자는 성공이 되었습니다. 이미지를 넣어야 겠네요 이미지를 부르는 코드는 아래와 같아요

      <img src="이미지 링크">

       

      얘는 닫을 필요도 없어요 이미지. 해도 이미지. 하고 알아들을 수 있기 때문에 지금까지 중에 제일 쉽죠?? 이미지 링크는 파일을 직접 등록해 주시면 링크를 받을 수 있어요

      그치만 용량 문제도 있으니 저작권 프리 사이트에서 [우클릭+이미지 주소 복사] 통해서 얻을 수 있어요 저도 그렇게 많이 채웠어요 움짤도 가능, 방법은 동일해요

       

      이미지 불러오는 건 사실 뭘 꾸미고 자시고할 게 없기 때문에 바로 <body>로 불러옵시다

      <!DOCTYPE html>
<html lang="ko">
      <meta charset="UTF-8" />
<head>
  <style>  .block{
  margin: 30px;
  padding:10px;
  width:40px;
  height: 50px;
  background-color:yellow;
    }
  </style>
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2012/05/02/22/40/food-46573_640.png">
<div class="block">
코딩 힘드러요
</div>
</body>
</html>

      만약에 그림을 밑에 두고 싶다고 하면 코드 위치를 </div> 아래로 두면 됩니당

      <!DOCTYPE html>
<html lang="ko">
      <meta charset="UTF-8" />
<head>
  <style>  .block{
  margin: 30px;
  padding:10px;
  width:40px;
  height: 50px;
  background-color:yellow;
    }
  </style>
</head>
<body>
<div class="block">
코딩 힘드러요
</div>
<img src="https://cdn.pixabay.com/photo/2012/05/02/22/40/food-46573_640.png">
</body>
</html>

      <div></div> 사이에 넣는 것도 당근 가능

       

      대신에 이 방법으로는 제 원래 계획이었던 링크 거는 건 불가능해요...이렇게 불합리한 코드가...싶지만 대신에 정말 저렇게 세워두고만 싶을 때는 오히려 간편해서 좋아요

      이제 진짜 진짜 링크를 걸어봅시다 그 전에 home.html 파일을 만들어 주세요! 그러면 링크가 대충 사이트아이디.naru.pub/home.html이 대문 열고 들어갔을 때 보이는 파일이 되겠습니다

      <a href="https://saltystar.naru.pub/home.html">
<img src="https://cdn.pixabay.com/photo/2012/05/02/22/40/food-46573_640.png">
</a>

      어떤 그림이냐면...<a href="파일 주소"></a>라는 놈들이 이미지를 양 옆에 끼고 "야 친한 척 해...링크인 척 하라고"

      하는 거예요 이거 이미지 대신 텍스트 넣어도 반영이 됩니다~

      a라는 놈이 뭐하는 놈인지는 다음 포스트에 할게요 생각보다 길어져서...;;

       

      일단 최종 반영한 코드는

      <!DOCTYPE html>
<html lang="ko">
      <meta charset="UTF-8" />
<head>
  <style>  .block{
  margin: 30px;
  padding:10px;
  width:40px;
  height: 50px;
  background-color:yellow;
    }
  </style>
</head>
<body>
<div class="block">
코딩 힘드러요
</div>
<a href="https://saltystar.naru.pub/home.html">
<img src="https://cdn.pixabay.com/photo/2012/05/02/22/40/food-46573_640.png">
</a>
</html>

       

      이렇게 되겠습니다 과연 어떻게 반영되었을까요?

       

       

      이렇게 되었습니다! 영상 업로드에 자꾸 실패해서 gif로 올렸는데 잘 보일지 모르겠네요;;

       

      일단 여기까지 대문 만들기 완성입니다 폰트를 바꾸고 싶거나 배열을 바꾸고 싶거나 등등 이런 거는 다음 포스트부터 업로드될 예정~~~

      모르는 거 있으면 트위터@nacl_commu로 말씀해 주세요 여기 댓글을 못 볼 가능성이 높아요

    Designed by Tistory.

    티스토리툴바