웹사이트 만들기 질문 많습니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

웹사이트 만들기 질문 많습니다.

ChatGPT로 10분만에 웹사이트 만들기 v0

1주차

지*민

・

추천

・

조회수

답변 완료

안녕하세요. 제가 미술을 하는 학생이라 웹사이트가 필요했는데 덕분에 웹사이트를 잘 만들었네요. 몇년동안 만들고 싶었어서 진짜 도움많이됐어요. gpt한테 물어보며 열심히 만들었습니다. 정말 감사해요. 이 광고가 인스타에 뜨자마자 12번째였나?로 빠르게 들었는데 완강한뒤에 나중에 제대로 만들어야지하고 이제서야 만들기를 시도했습니다.

다만 만들다가 질문이 몇가지 있습니다. 질문이 정말 많은데 제가 좀 배우는거에 열정적이라 제대로 파고 싶어서 많아졌습니다.. 답변 미리 감사드립니다. 너무 도움됐어서 다른강의도 들으려구요!

먼저 https://heminji.github.io/h/ 이게 만든 사이트구요.

github에 이미지파일들을 업로드하려했더니 100mb이하의 파일만 가능하다고.. 8장정도 올렸는데 그이상 못올린다고 잘렸습니다. 작가 포트폴리오 사이트인만큼 이미지 파일 화질이 좋아야해서 고화질로 업로드한건데 이경우에는 무조건 구글드라이브같은 외부호스팅에 업로드하여(이건 gpt가 알려줬습니다) 쓸 수 밖에 없나요? 드라이브는 항상 용량도 제한되있을뿐더러 바로바로 컴퓨터 바탕화면에서 업로드 하고 싶었거든요ㅠ
이미지가 많아서 sparta gpt파일안에 작품사진 하부파일을 한번 더 만들어서 코드에 ./작품사진/dsc_0044이런식으로 이미지 경로를 입력했는데 막상 github에 업로드할때는 폴더자체를 올리지 못하고 이미지파일 하나하나 올려야해서 다시 ./작품사진/ 이글씨를 빼야 되더군요.. 폴더안에 이미지들만 정리해 올려놓고 거기서 빼서 쓸 순 없나요?
만약 만들고싶은 사이트가 두개이면 어떤식으로 폴더이름을 저장하나요? index.html과 index2.html두개를 만들었더니 뒤에거는 불가능하더라구요. 여러개 폴더를 모두 index.html로만 저장할 수 있나요? 그리고 저장후에 들어가는 사이트이름은 heminji.github.io/h/이거 하나밖에 도메인이 불가능할까요? 커스텀도메인은 돈내야한다고 해서 무료로 들어갈수 있는 이름이 저런식으로 여러개였으면 좋겠어서요..
블로그 꾸미기나 일반 중고나라 웹사이트처럼 이미 코딩된 페이지에 그냥 이미지 업로드하기 쉽게하는 방법은 없나요? 새 사진을 올려야할때마다 이미지를 코드에 입력하고 코딩을 어렵게한다음 깃헙에도 붙여넣기 해야하는건지 궁금합니다.
gpt가 코드를 잘못알려줘서 붙여넣기했다가 ctrl s 를 누르고나서 실제페이지본다음 이게아닌데 하고 ctrl z 를 눌렀지만 이미 저장해서인지 뒤로가기가 된건지 어느 코드가 바뀐건지 안보여서 왼쪽목록에있는 1분전에 저장된 페이지 불러오기를 눌렀는데요. 현재 코딩과 이전코딩이 같이뜨면서 서로 어디가 바뀐건지 비교해주는데 이전코딩에 마저 코딩을 해도 아까 했던 현재코딩이 옆에 계속 떠있고 파일 제목도 예전코딩:(수정시각)-현재코딩// 현재코딩파일이름 이런식으로 두개가 뜨면서 두개가 동시에 저장되는건지 마저 예전코딩에 작업을 해도 그게 원래파일에 뒤덮혀 저장되는건지 잘 모르겠습니다. 예전코딩에 이어서 작업하고 현재코딩을 버리고싶으면 어떻게 저장하나요?
바탕화면의 sparta gpt파일 이름을 websss라고 바꿨더니 코딩이 사라져버리더라구요.. 그냥 파일이름을 바꾸고 싶었을뿐인데 그런식으로 바꾸면 코딩내용도 다 날아가나요? 없어져서 다시 처음부터 했습니다ㅠㅠ
르탄이의 중고마켓처럼 가로열이 3개 이미지가 꽉차고 핸드폰버전에서도 자유자재로 크기가 바뀌게 하고 싶은데, 르탄이 중고마켓의 틀을 가져다 써도 자꾸 제거는 새로로 나와서 왜그러냐 물어봤는데 이미 3열이 적용된 코딩이라면서 이미지 비율이 커서 그런거일수 있다길래 .img-fluid {max-width: 80%;를 30%로 바꿔봤는데도 계속 병렬적으로 나와요.. 이미지가 작아져도 병렬구조입니다. 어떻게 가로로 배치되게 할 수 있을까요? <div class="col-md-4 mb-4">이거 쓰면 가로로 된다길래 했는데도 안되네요..
제가 전체적인 형식은 https://www.madisondonnelly.com/ 나 https://osvaldlandmark.com/ 여기나 https://haggi.info/ 같은 x=3열 y=n개 이런식으로 마음대로 그림크기에 맞춰 오토메틱으로 꽉차있는 화면을 만들고 싶은데요. 어느부분을 고쳐야하는지 모르겠습니다. gpt에게 여러번 물어봤는데 다 적용해봐도 그대로여서요.. 뭐가 문제인지 모르겠네요ㅠ자동으로 이미지크기에 따라 배열되는 코드가 /* CSS 코드 */ .container { display: flex; flex-wrap: wrap; }라길래 넣어봤는데 바뀌는게 없습니다..
https://mikepicos.cargo.site/ 이 사이트에 그림을 누르면 전체화면이 어두워지면서 전체 화면비율 맞춤그림이 하나 나오길래 이런식으로 해보고 싶었는데 gpt에게 물어보니 javascript를 이용한 모달창을 만들면된다길래, gpt가 만들어준 코드를 복붙했습니다. 그런데 바뀐게 없길래 이미지가 한개있고 클릭하면 하나 더 나와야하는거니 모달창에 이미지경로를 하나 더 써야하나싶어 물어보니 모달코드 밑에 또 쓰라해서 썼더니 그냥 클릭하기도 전에 같은이미지만 두개가 병렬적으로 나와있고 클릭하면 나오는 건 실현이 안되네요ㅜㅜ 이미지경로를 두번써야하는거 맞나요? <div class="container">

</a>

<h5 class="card-title">Spsringbrunnen</h5>

</div>

이런식으로 openModal을 쓰고 위쪽 <style>부분에 /* 모달 스타일 */ .modal {

display: none;

position: fixed;

z-index: 1;

padding-top: 100px;

left: 0;

top: 0;

width: 100%;

height: 100%;

overflow: auto;

background-color: rgba(0, 0, 0, 0.8);

).modal-content {

margin: auto;

display: block;

width: 80%;

max-width: 700px; ...어둡게 하기 등등 여러코드를 넣어줬는데 이미지경로를 어디에 넣어야 이게 실현이 되는지 모르겠습니다. 바뀐점이 없더라구요..한번 봐주시겠습니까?ㅜㅜ

10.이밑에는 전체 코드인데요. 르탄이 중고마켓코드랑 이것저것 섞이다보니 쓸데없는 겹치는 부분이 많이 생긴거같은데 어디를 지워야할지 몰라서 냅뒀습니다. 기능을 많이 추가해놔서 content쓰는 부분만 어디인지 정확하게 알면 넣기만 하면 실현되는 걸까요? 그부분을 gpt에게 물어봤는데 해당부분에 이미지를 넣어도 실현이 잘 안되더라구요..

11.예를 들어 https://www.madisondonnelly.com/ 이 사이트의 Head 부분이 세로로 병렬적으로 돼있는건 어떻게 따라했는데 글씨 스타일이나 디자인이 안바뀌더라구요.. 이부분은 어딜 고쳐야할까요?

질문이 많이 깁니다ㅠㅠㅠ 너무 많이 해서 죄송합니당... 감사합니다!!!!!

<!doctype html>

<head>

<title>Hemin Ji</title>

<style>

/* CSS 코드 */

.container {

display: flex;

flex-wrap: wrap;

}

.img-fluid {

max-width: 50%;

height: auto;

border-radius: 0px;

margin: 10px;

box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.5);

}

/* 모달 스타일 */

.modal {

display: none;

position: fixed;

z-index: 1;

padding-top: 100px;

left: 0;

top: 0;

width: 100%;

height: 100%;

overflow: auto;

background-color: rgba(0, 0, 0, 0.8);

}

.modal-content {

margin: auto;

display: block;

width: 80%;

max-width: 700px;

}

.modal-content img {

margin: auto;

display: block;

width: 100%;

max-width: 700px;

}

/* 모달 닫기 버튼 스타일 */

.close {

position: absolute;

top: 15px;

right: 35px;

color: #f1f1f1;

font-size: 40px;

font-weight: bold;

transition: 0.3s;

}

.close:hover,

.close:focus {

color: #bbb;

text-decoration: none;

cursor: pointer;

}

/* 모달 콘텐츠를 약간 어둡게 처리 */

.modal-backdrop.show {

opacity: 0.5;

background-color: black;

}

</style>

</head>

<body>

<a class="navbar-brand" href="#">Hemin Ji</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"

aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

</button>

<a class="nav-link" href="#">Works

<span class="sr-only">(current)</span>

</a>

</li>

<a class="nav-link" href="#">About</a>

</li>

</li>

<a class="nav-link" href="#">Contact</a>

</li>

</ul>

</div>

</nav>

<h1 class="display-4 text-white mt-5 mb-2">Hemin Ji</h1>

<p class="lead mb-5 text-white-50">Inhalt</p>

</div>

</header>

</a>

<h5 class="card-title">Spsringbrunnen</h5>

</div>

<h5 class="card-title">Blumenbeet</h5>

</div>

<h5 class="card-title">Blumenbeet2</h5>

</div>

<h5 class="card-title">Regenbogen</h5>

</div>

<style>

.container {

display: flex;

flex-wrap: wrap;

}

.img-fluid {

max-width: 80%;

height: auto;

border-radius: 0px;

margin: 10px;

box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.5);

}

</style>

<h2>Recent Works</h2>

<div class="col-md-4 mb-5

body {

margin: 0;

font-family: 'Montserrat', sans-serif;

font-size: 16px;

line-height: 1.7;

color: #fff;

background: #0e0e0e;

}

a {

color: #fff;

text-decoration: none;

}

a:hover {

color: #dc3545;

}

/* 네비게이션 바 */

nav {

position: fixed;

width: 100%;

height: 60px;

padding: 0 100px;

background-color: #0e0e0e;

z-index: 999;

}

nav .logo {

float: left;

height: 100%;

}

nav .logo img {

height: 100%;

}

nav ul {

float: right;

margin: 0;

padding: 0;

display: flex;

align-items: center;

height: 100%;

}

nav ul li {

list-style: none;

margin: 0 15px;

height: 100%;

display: flex;

align-items: center;

position: relative;

}

nav ul li a {

display: flex;

align-items: center;

height: 100%;

padding: 0 10px;

}

nav ul li a::before {

content: " position: absolute; bottom: -10px; left: 0; width: 100%; height: 2px; background-color: #dc3545;

transform: scaleX(0); transition: transform 0.3s; transform-origin: center; } nav ul li a:hover::before {

transform: scaleX(1); } nav ul li.active a::before { transform: scaleX(1); } /* 메인 섹션 */ section { position:

relative; height: 100vh; } section .container { position: absolute; top: 50%; left: 50%; transform:

translate(-50%, -50%); text-align: center; } section h1 { font-size: 72px; font-weight: 700; margin-bottom: 20px;

text-transform: uppercase; } section p { font-size: 18px; font-weight: 400; margin-bottom: 30px; } section .btn {

font-size: 16px; font-weight: 700; text-transform: uppercase; padding: 15px 40px; background-color: #dc3545;

color: #fff; border: none; border-radius: 50px; letter-spacing: 1px; transition: background-color 0.3s; } section

.btn:hover { background-color: #fff; color: #dc3545; border: 2px solid #dc3545; } section .btn-outline {

font-size: 16px; font-weight: 700; text-transform: uppercase; padding: 15px 40px; background-color: transparent;

color: #fff; border: 2px solid #fff; border-radius: 50px; letter-spacing: 1px; transition: background-color 0.3s;

} section .btn-outline:hover { background-color: #fff; color: #dc354 } </div>

<여기>

</div>

댓글 알림