Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Archives
Today
Total
관리 메뉴

한바다

사진올리기와 오류 해결 본문

카테고리 없음

사진올리기와 오류 해결

한바다진화 2024. 5. 27. 13:11

✔사진올리기.html

헤드작성 부분에  meta, title, link(부트스트랩css), jQuery script작성한다

<head>
        <meta charset="utf-8">
        <title>사진올리기</title>
  <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous"
      />
     <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    </head>

 <div class="container">
    <h2>사진 업로드</h2>
    <form id="uploadForm">
      <div class="mb-3">
        <label class="form-label">사진 제목</label>
        <input class=form-control" id="이미지가져오기" type="file" accept="image/*">
           <!-- accept : 선택한 파일만 가져올 수 있음
                    image : 이미지에 해당하는 파일만 가져올 수 있음
                            jpg png bmp gif ....  * 모두 가능
                        gif 움직이는 이미지만 가능하게 하고 싶다면
                            image/gif
                        png jpg jpeg 이미지만 가능하게 하고 싶다면
                            image/png, image/jpg, image/jpeg
                    비디오 중에서 mp4 파일과 오디오 파일 중에서 mp3 만 가능하게 하고 싶다면
                        accept=".mp4, .mp3" 또는 accept="*.mp4, *.mp3" -->
              </div>
               
                <!--input에서 가져온 이미지를 img태그에서 보여주기--!>
               <div class="mb-3">
                <img id="이미지보이기" src="#" class="img-fluid  d-none"><!-- d-none : display none 으로 엑스박스 표시를 기기-->
            </div>
           <button type="submit" class="btn btn-primary">업로드</button>
         </form>
        </div>

 

<script>

&(document).ready(function(){

$("#이미지가져오기").change(function() {

 const file = this.files[0]

 

[cmd창 프로세스 오류 해결]

1.cmd창을 z킨다

2.cmd창에 'cd desktop'을 입력한다

3. desktop이 적용된 상태에서 cd frot 입력후 tap키를 누른다

4. 그리고 git pull을 입력한다.

그런데!!!! 위에서 노란색으로 칠해진 부분으로 에러가 발생하였다.

에러 발생 원인을 찾아보니 3번에서 입력을 잘못 하였다.

입력시 'cd fr을 키보드로 입력후 tap키를 눌러야 하는데 cd frontdend입력후 탭키를 누르니 

"C:\Users\user1\Desktop>cd frontend frontend-javascript 지정된 경로를 찾을 수 없습니다.

 

왜냐하면 해당폴더는 바탕화면에 frontend frontend-javascript이런 폴더는 없기 때문이다.

5. 에러 해결은 cmd창에 "cd fr까지 입력후 탭키를 눌러주면

5. 아래와 같이 정상적으로 연결이 된다

[내가 작성한 html태그와 git에 올려진 코드 비교하는 방법]

1.git파일에서 아래와 같이 비교하고자 하는 항목을 복사한다.

 

2.vos 코드에서 새파일을 만든후 1번에서 복사한 태그들을 붙여 넣는다.

 

3.원본(내가 작성한 html파일과) 2번에서 작성한 코드를 ctrl해준다음 아래와 같이 '선택항목 비교'를 해준다.

4.그럼 아래와 같이 틀린 부분이 붉은색으로 표기되어 오류 코드를 고칠수가 있다.

 

[네비게이션 태그 오류 해결]

.오류가 발생되었던 내비게이션 태그

<!--네비게이션바-->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <!--세로로 나열된 것들 모두 가로로 한 줄 정렬-->
        <a class="nabar-brand" href="#">옷 판매 사이트</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
          <!--나중에 네베게이션바 아이콘 위치-->
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <!--ms : margin-start auto 왼쪽에 여백을 최대한 많이 제공-->
          <ul class="navbar-nav ms-auto">
            <!--모든 태그를 가능한 오른쪽으로 정렬-->
            <li class="nav-item active">
              <a class="nav-link" href="#">HOME</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">shop</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"
                >Cart<span class="badge bg-secondary">0</span></a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="03_이미지갤러리.html">이미지 갤러리</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

[오류코드 찾음]

오류코드:

 <a class="nabar-brand" href="#">옷 판매 사이트</a>
 

수정된 코드:

<a class="navbar-brand" href="#">옷 판매 사이트</a>

[수정후 보여진 화면]