삼항 연산자를 사용하여 페이지의 제목을 조건부로 설정하는 방법은 무엇인가요?

_____
Q1: 삼항 연산자를 사용하여 웹페이지의 제목을 조건부로 설정할 수 있나요?
네, 가능합니다. 삼항 연산자는 조건에 따라 서로 다른 값을 반환하기 때문에, 이를 이용해 문서의 제목을 동적으로 변경할 수 있습니다.

Q2: 삼항 연산자는 기본적으로 어떻게 작동하나요?
삼항 연산자는 `조건 ? 참일 때 값 : 거짓일 때 값` 형식으로, 조건이 참이면 첫 번째 값을, 거짓이면 두 번째 값을 반환합니다.

Q3: 삼항 연산자를 사용하여 문서 제목을 설정하는 기본 예제는 무엇인가요?
```javascript
document.title = (userLoggedIn) ? "환영합니다!" : "로그인 해주세요";
```
`userLoggedIn`이 `true`면 제목은 "환영합니다!"로, 아니면 "로그인 해주세요"로 설정됩니다.

Q4: 리액트(React)에서 삼항 연산자를 사용해 페이지 제목을 조건부로 설정하려면 어떻게 하나요?
React에서는 보통 `useEffect` 훅을 사용해 부수 효과로 문서 제목을 설정합니다. 예:
```jsx
import React, { useEffect } from 'react';

function MyComponent({ isAdmin }) {
useEffect(() => {
document.title = isAdmin ? "관리자 페이지" : "일반 사용자 페이지";
}, [isAdmin]);

return
내용
;
}
```

Q5: 삼항 연산자 대신 if-else를 써야 할 때도 있나요?
삼항 연산자는 간단한 조건에 적합하지만, 조건이 복잡하거나 여러 개일 경우 가독성을 위해 if-else 구문이 더 나을 수 있습니다.

Q6: 삼항 연산자로 문서 제목을 설정할 때 주의할 점은 무엇인가요?
- 조건이 명확해야 하며, 불필요하게 복잡하지 않게 유지하세요.
- React 등 프레임워크에서는 사이드 이펙트 관리 규칙을 지키도록 하세요.
- 사용자 경험 측면에서 빈번한 제목 변경은 혼란을 줄 수 있습니다.

요약:
삼항 연산자를 사용해 `document.title`에 조건부 값을 바로 할당할 수 있으며, 간단하고 짧은 조건 처리에 매우 유용합니다. React 같은 환경에서는 `useEffect` 내부에서 사용하면 효과적입니다.
삼항 연산자는 조건에 따라 두 가지 값 중 하나를 선택하는 간단한 방법을 제공하는 연산자입니다.

JavaScript와 같은 프로그래밍 언어에서 자주 사용되며, HTML 문서의 제목을 조건부로 설정하는 데 유용하게 활용될 수 있습니다.

아래에서는 삼항 연산자를 사용하여 페이지의 제목을 설정하는 방법에 대해 자세히 설명하겠습니다.

1. 삼항 연산자 기본 구조 삼항 연산자는 다음과 같은 구조를 가지고 있습니다: ```javascript 조건 ? 참일 때의 값 : 거짓일 때의 값; ``` 여기서 `조건`이 참이면 `참일 때의 값`이 반환되고, 거짓이면 `거짓일 때의 값`이 반환됩니다.



2. 페이지 제목 설정 예제 웹 페이지의 제목을 설정할 때, 특정 조건에 따라 제목을 다르게 하고 싶을 수 있습니다.

예를 들어, 사용자가 로그인했는지 여부에 따라 페이지 제목을 다르게 설정할 수 있습니다.

```html

```

3. 코드 설명 - HTML 구조 : `` 태그에 `id` 속성을 부여하여 JavaScript에서 쉽게 접근할 수 있도록 합니다.<br><br> - JavaScript 변수 : `isLoggedIn` 변수를 통해 사용자의 로그인 상태를 나타냅니다.<br><br> 이 값은 실제 <a href='https://sangseek.com/sangseeks/애플/ko'>애플</a>리케이션에서는 서버에서 가져온 데이터에 따라 동적으로 설정될 수 있습니다.<br><br> - 삼항 연산자 사용 : `pageTitle` 변수에 삼항 연산자를 사용하여 로그인 상태에 따라 다른 제목을 설정합니다.<br><br> - <a href='https://sangseek.com/sangseeks/DOM 조작/ko'>DOM 조작</a> : `window.onload` 이벤트를 사용하여 페이지가 로드된 후에 제목을 설정합니다.<br><br> 이는 DOM이 완전히 로드된 후에 JavaScript 코드가 실행되도록 보장합니다.<br><br> <br><br>4. 추가적인 활용 삼항 연산자는 페이지 제목 외에도 다양한 곳에서 활용될 수 있습니다.<br><br> 예를 들어, 사용자에게 보여줄 메시지, 버튼의 텍스트, 스타일 클래스 등을 조건부로 설정할 때 유용합니다.<br><br> 이를 통해 코드의 가독성을 높이고, 조건에 따라 동적으로 UI를 변경할 수 있습니다.<br><br> <br><br>5. 삼항 연산자는 간결하고 직관적인 방식으로 조건부 로직을 구현할 수 있게 해줍니다.<br><br> 페이지 제목을 설정하는 예제를 통해, 삼항 연산자를 활용하여 다양한 조건에 따라 동적으로 콘텐츠를 변경하는 방법을 배웠습니다.<br><br> 이러한 기법은 사용자 경험을 향상시키고, 더 나은 웹 애플리케이션을 만드는 데 기여할 수 있습니다.<br><br> </section> </div> </div> <div class="daum-wm-datetime mt-1 mb-3"> 작성자: 박하윤 <small>[비회원]</small> | 작성일자: 1년 전 <span class="d-none">2024-12-24 02:11:38</span> <br> 조회수: 151 | 댓글: 0 | 좋아요: 0 | 싫어요: 0 </div> <div class="mt-3 mb-3"> <span class="text-danger">내용이 부정확하다면 싫어요를 클릭해주세요.</span> </div> <div class="d-flex flex-row"> <div class="pr-2"> <a href="https://sangseek.com/communities/edit/103275">수정</a> </div> <div class="pr-2"> <form action="https://sangseek.com/communities/103275/like" method="POST"> <input type="hidden" name="_token" value="oz8M5xCelRjJTmm5HAExGoXs87K2mVBJsqrZTCjh" autocomplete="off"> <button type="submit"style="background: none; border: none; color: #3490dc; padding: 0; cursor: pointer;">좋아요</button> </form> </div> <div class="pr-2"> <form action="https://sangseek.com/communities/103275/dislike" method="POST"> <input type="hidden" name="_token" value="oz8M5xCelRjJTmm5HAExGoXs87K2mVBJsqrZTCjh" autocomplete="off"> <button type="submit"style="background: none; border: none; color: #3490dc; padding: 0; cursor: pointer;">싫어요</button> </form> </div> <div class="pr-2"> <button type="button" data-toggle="modal" data-target="#reportBtn" style="background: none; border: none; color: #3490dc; padding: 0; cursor: pointer;"> 신고 </button> <!-- Modal --> <div class="modal fade" id="reportBtn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">신고하기</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form method="POST" action="https://sangseek.com/contacts"> <input type="hidden" name="_token" value="oz8M5xCelRjJTmm5HAExGoXs87K2mVBJsqrZTCjh" autocomplete="off"> <div id="my_name_RotcLAofw3DXJuBw_wrap" style="display: none" aria-hidden="true"> <input id="my_name_RotcLAofw3DXJuBw" name="my_name_RotcLAofw3DXJuBw" type="text" value="" autocomplete="nope" tabindex="-1"> <input name="valid_from" type="text" value="eyJpdiI6IlNMWGJiRE5VcEFTdDd4ckEvM3dBcFE9PSIsInZhbHVlIjoia2ovTlhaLzF6LzBZUXkzSDZwZTNzZz09IiwibWFjIjoiMTE0YmY0NDljMWY5ZDg1ZWRjMDgzODJjNGMyN2RlZjE5ODljMTZlMGZjZTMzNjRlYjY2ZWQzNTBiMjc3ZWUzMyIsInRhZyI6IiJ9" autocomplete="off" tabindex="-1"> </div> <div class="modal-body"> <input type="hidden" name="from" value="https://sangseek.com/communities/103275"> 내용: <textarea name="body" style="width: 100%" rows="5" minlength="10" required></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button> <button type="submit" class="btn btn-primary">제출</button> </div> </form> </div> </div> </div> </div> <div class="pr-2"> <button type="button" data-toggle="modal" data-target="#termsBtn" style="background: none; border: none; color: #3490dc; padding: 0; cursor: pointer;">이용안내</button> </div> <!-- Modal --> <div class="modal fade" id="termsBtn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title" id="exampleModalLabel">커뮤니티 이용안내</div> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> - 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.<br> - 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.<br> - 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.<br> - 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.<br> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button> </div> </div> </div> </div> <div class="pr-2"> <button type="button" data-toggle="modal" data-target="#deleteBtn" style="background: none; border: none; color: #3490dc; padding: 0; cursor: pointer;"> 삭제 </button> <!-- Modal --> <div class="modal fade" id="deleteBtn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">삭제하기</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form method="POST" action="https://sangseek.com/communities/103275"> <input type="hidden" name="_token" value="oz8M5xCelRjJTmm5HAExGoXs87K2mVBJsqrZTCjh" autocomplete="off"> <input type="hidden" name="_method" value="delete"> <div class="modal-body"> password: <input type="text" name="password" placeholder="비밀번호" style="width: 320px" value=""> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button> <button type="submit" class="btn btn-primary">삭제</button> </div> </form> </div> </div> </div> </div> </div> </article> <div class="col-md-12" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; min-height: 150px;"> <hr> <comment-component2 :initial-comments="[]" :item-id=103275 > </comment-component2> <hr> </div> <div class="mt-3 mb-3"> </div> <aside> <div class="mt-5">추가 게시글</div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103287">삼항 연산자를 사용하여 로딩 스피너를 조건부로 표시하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 JavaSc...</p> <div class="m-2">1년 전 | 최서연</div> <div class="m-2">조회수: 155 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103269">삼항 연산자를 사용하여 리스트의 아이템을 조건부로 렌더링하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 조건에...</p> <div class="m-2">1년 전 | 정서윤</div> <div class="m-2">조회수: 160 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103254">삼항 연산자를 사용하여 상태 관리를 구현하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 조건에...</p> <div class="m-2">1년 전 | 박하연</div> <div class="m-2">조회수: 130 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103301">삼항 연산자를 사용하여 데이터의 변화를 감지하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 조건에...</p> <div class="m-2">1년 전 | 정지연</div> <div class="m-2">조회수: 143 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103303">삼항 연산자를 사용하여 API의 응답을 조건부로 처리하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 조건에...</p> <div class="m-2">1년 전 | 정하율</div> <div class="m-2">조회수: 161 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103279">삼항 연산자를 사용하여 데이터의 유효성을 검사하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 조건에...</p> <div class="m-2">1년 전 | 최지율</div> <div class="m-2">조회수: 177 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103290">삼항 연산자를 사용하여 사용자 피드백을 조건부로 수집하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 프로그...</p> <div class="m-2">1년 전 | 최준서</div> <div class="m-2">조회수: 143 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103274">삼항 연산자를 사용하여 테이블의 행을 조건부로 스타일링하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 JavaSc...</p> <div class="m-2">1년 전 | 정지윤</div> <div class="m-2">조회수: 229 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103294">삼항 연산자를 사용하여 사용자 인증 상태를 관리하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 조건에...</p> <div class="m-2">1년 전 | 김수현</div> <div class="m-2">조회수: 138 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/103242">삼항 연산자를 사용하여 불리언 값을 반환하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">삼항 연산자는 조건에...</p> <div class="m-2">1년 전 | 정재영</div> <div class="m-2">조회수: 166 | 댓글: 0 | 좋아요: 0</div> </div> </aside> <aside> <div class="mt-5">새로운 게시글</div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/106620">마루노우치에서의 문화 교류 프로그램은 어떤 것이 있나요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">마루노우치 지역은 도...</p> <div class="m-2">1년 전 | 최다영</div> <div class="m-2">조회수: 136 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/87995">도쿄에서의 여행 예산은 얼마나 잡아야 하나요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">도쿄에서의 여행 예산...</p> <div class="m-2">1년 전 | 최지율</div> <div class="m-2">조회수: 281 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/66615">분산 애플리케이션에서의 성능 테스트 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">분산 애플리케이션에...</p> <div class="m-2">1년 전 | 김주원</div> <div class="m-2">조회수: 171 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/60113">콜라겐이 장 건강에 미치는 영향은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">콜라겐은 인체에서 가...</p> <div class="m-2">1년 전 | 박소현</div> <div class="m-2">조회수: 466 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/57126">감자의 껍질을 벗기는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">감자의 껍질을 벗기는...</p> <div class="m-2">1년 전 | 최윤서</div> <div class="m-2">조회수: 572 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/46067">OET의 시험을 준비하면서 동기 부여를 유지하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">OET(Occupational Eng...</p> <div class="m-2">1년 전 | 김하은</div> <div class="m-2">조회수: 249 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/182122">어린이 치과에서 사용하는 음향 장비는 안전한가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">어린이 치과에서 사용...</p> <div class="m-2">1년 전 | 정서현</div> <div class="m-2">조회수: 148 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/111721">BRICS 국가들의 기후 변화 대응 전략은 어떻게 다르나요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">BRICS 국가들은 브라...</p> <div class="m-2">1년 전 | 최준수</div> <div class="m-2">조회수: 135 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/94667">들깨를 보관하는 방법은 무엇인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">들깨는 고소한 맛과...</p> <div class="m-2">1년 전 | 김채현</div> <div class="m-2">조회수: 2871 | 댓글: 0 | 좋아요: 0</div> </div> <div class="mt-2 mb-4" style="border: 1px solid black;"> <div class="m-2"><a href="https://sangseek.com/communities/55299">도쿄역의 주변에서 유명한 시장은 어디인가요?</a></div> <p class="m-2" style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto;">도쿄역 주변에는 여러...</p> <div class="m-2">1년 전 | 정지호</div> <div class="m-2">조회수: 538 | 댓글: 0 | 좋아요: 0</div> </div> </aside> </div> </div> </div> </main> <div class="fixed-bottom bg-light"> <div class="row g-0 text-center"> <div class="col-6"> <a href="https://play.google.com/store/apps/details?id=com.sangseek.sangseekworldtravelmap&hl=ko" target="_blank"> <img src="https://sangseek.com/sy7w6w9yjsdz.gif" class="img-fluid w-100"> </a> </div> <div class="col-6"> <a href="https://apps.apple.com/kr/app/%EC%83%81%EC%8B%9D%EB%8B%B7%EC%BB%B4-%EC%97%AC%ED%96%89%EC%A7%80%EB%8F%84/id6757587424" target="_blank"> <img src="https://sangseek.com/sy8568e1922f.gif" class="img-fluid w-100"> </a> </div> </div> </div> <footer class="py-4 mt-5"> <div class="container-fluid"> <div class="row"> <div class="col-md-12" style="background-color: #e9ecef; color: #333333;"> <div class="mt-5"> <h3 class="black pb-4">방문할 가치가 있는 도시</h3> <ul class="list-unstyled"> <li class="mb-4"> <img src="/icons/maps/icon_thailand.png" width="30px"> <a href="https://sangseek.com/places/bangkok/ko"> 방콕, 파타야 </a> (총 장소: 102 | 지도 완성도: 89%) </li> <li class="mb-4"> <img src="/icons/maps/icon_thailand.png" width="30px"> <a href="https://sangseek.com/places/phuket/ko"> 푸켓, 끄라비 </a> (총 장소: 39 | 지도 완성도: 50%) </li> <li class="mb-4"> <img src="/icons/maps/icon_thailand.png" width="30px"> <a href="https://sangseek.com/places/chiang-mai/ko"> 치앙마이 </a> (총 장소: 50 | 지도 완성도: 55%) </li> <li class="mb-4"> <img src="/icons/maps/icon_vietnam.png" width="30px"> <a href="https://sangseek.com/places/ho-chi-minh/ko"> 호치민 </a> (총 장소: 68 | 지도 완성도: 60%) </li> <li class="mb-4"> <img src="/icons/maps/icon_vietnam.png" width="30px"> <a href="https://sangseek.com/places/hanoi/ko"> 하노이, 하이퐁, 하롱베이, 사파 </a> (총 장소: 41 | 지도 완성도: 50%) </li> <li class="mb-4"> <img src="/icons/maps/icon_vietnam.png" width="30px"> <a href="https://sangseek.com/places/nha-trang/ko"> 냐짱, 달랏 </a> (총 장소: 49 | 지도 완성도: 39%) </li> <li class="mb-4"> <img src="/icons/maps/icon_vietnam.png" width="30px"> <a href="https://sangseek.com/places/phu-quoc/ko"> 푸꾸옥 </a> (총 장소: 15 | 지도 완성도: 5%) </li> <li class="mb-4"> <img src="/icons/maps/icon_vietnam.png" width="30px"> <a href="https://sangseek.com/places/da-nang/ko"> 다낭, 호이안, 후에 </a> (총 장소: 65 | 지도 완성도: 55%) </li> <li class="mb-4"> <img src="/icons/maps/icon_taiwan.png" width="30px"> <a href="https://sangseek.com/places/kaohsiung/ko"> 가오슝, 타이난 </a> (총 장소: 31 | 지도 완성도: 15%) </li> <li class="mb-4"> <img src="/icons/maps/icon_taiwan.png" width="30px"> <a href="https://sangseek.com/places/taipei/ko"> 타이베이 </a> (총 장소: 52 | 지도 완성도: 45%) </li> <li class="mb-4"> <img src="/icons/maps/icon_philippines.png" width="30px"> <a href="https://sangseek.com/places/metro-manila/ko"> 메트로 마닐라 </a> (총 장소: 31 | 지도 완성도: 40%) </li> <li class="mb-4"> <img src="/icons/maps/icon_philippines.png" width="30px"> <a href="https://sangseek.com/places/cebu/ko"> 세부, 보홀 </a> (총 장소: 35 | 지도 완성도: 29%) </li> <li class="mb-4"> <img src="/icons/maps/icon_philippines.png" width="30px"> <a href="https://sangseek.com/places/boracay/ko"> 보라카이 </a> (총 장소: 19 | 지도 완성도: 20%) </li> <li class="mb-4"> <img src="/icons/maps/icon_indonesia.png" width="30px"> <a href="https://sangseek.com/places/jakarta/ko"> 자카르타, 반둥 </a> (총 장소: 22 | 지도 완성도: 10%) </li> <li class="mb-4"> <img src="/icons/maps/icon_indonesia.png" width="30px"> <a href="https://sangseek.com/places/bali/ko"> 발리 </a> (총 장소: 26 | 지도 완성도: 51%) </li> <li class="mb-4"> <img src="/icons/maps/icon_laos.png" width="30px"> <a href="https://sangseek.com/places/vientiane/ko"> 비엔티안, 방비엥, 루앙프라방 </a> (총 장소: 18 | 지도 완성도: 20%) </li> <li class="mb-4"> <img src="/icons/maps/icon_cambodia.png" width="30px"> <a href="https://sangseek.com/places/siem-reap/ko"> 씨엠립 </a> (총 장소: 13 | 지도 완성도: 10%) </li> <li class="mb-4"> <img src="/icons/maps/icon_singapore.png" width="30px"> <a href="https://sangseek.com/places/singapore/ko"> 싱가포르 </a> (총 장소: 30 | 지도 완성도: 50%) </li> <li class="mb-4"> <img src="/icons/maps/icon_malaysia.png" width="30px"> <a href="https://sangseek.com/places/kota-kinabalu/ko"> 코타키나발루 </a> (총 장소: 15 | 지도 완성도: 30%) </li> <li class="mb-4"> <img src="/icons/maps/icon_malaysia.png" width="30px"> <a href="https://sangseek.com/places/kuala-lumpur/ko"> 쿠알라룸푸르 </a> (총 장소: 21 | 지도 완성도: 36%) </li> <li class="mb-4"> <img src="/icons/maps/icon_korea.png" width="30px"> <a href="https://sangseek.com/places/gyeongsangnam-do/ko"> 경상남도 </a> (총 장소: 64 | 지도 완성도: 50%) </li> <li class="mb-4"> <img src="/icons/maps/icon_korea.png" width="30px"> <a href="https://sangseek.com/places/seoul/ko"> 서울, 인천, 경기도 </a> (총 장소: 116 | 지도 완성도: 75%) </li> <li class="mb-4"> <img src="/icons/maps/icon_korea.png" width="30px"> <a href="https://sangseek.com/places/busan/ko"> 부산 </a> (총 장소: 88 | 지도 완성도: 65%) </li> <li class="mb-4"> <img src="/icons/maps/icon_korea.png" width="30px"> <a href="https://sangseek.com/places/gyeongju/ko"> 경주, 대구, 울산, 포항 </a> (총 장소: 52 | 지도 완성도: 15%) </li> <li class="mb-4"> <img src="/icons/maps/icon_korea.png" width="30px"> <a href="https://sangseek.com/places/jeollado/ko"> 전라도 </a> (총 장소: 103 | 지도 완성도: 59%) </li> <li class="mb-4"> <img src="/icons/maps/icon_korea.png" width="30px"> <a href="https://sangseek.com/places/jeju-do/ko"> 제주도 </a> (총 장소: 70 | 지도 완성도: 65%) </li> <li class="mb-4"> <img src="/icons/maps/icon_korea.png" width="30px"> <a href="https://sangseek.com/places/gangwon-do/ko"> 강원도 </a> (총 장소: 90 | 지도 완성도: 50%) </li> <li class="mb-4"> <img src="/icons/maps/icon_korea.png" width="30px"> <a href="https://sangseek.com/places/gyeongsangbuk-do/ko"> 경상북도 </a> (총 장소: 27 | 지도 완성도: 13%) </li> <li class="mb-4"> <img src="/icons/maps/icon_korea.png" width="30px"> <a href="https://sangseek.com/places/chungcheong-do/ko"> 충청도 </a> (총 장소: 45 | 지도 완성도: 49%) </li> <li class="mb-4"> <img src="/icons/maps/icon_japan.png" width="30px"> <a href="https://sangseek.com/places/tokyo/ko"> 도쿄 </a> (총 장소: 72 | 지도 완성도: 59%) </li> <li class="mb-4"> <img src="/icons/maps/icon_japan.png" width="30px"> <a href="https://sangseek.com/places/okinawa/ko"> 오키나와 </a> (총 장소: 37 | 지도 완성도: 13%) </li> <li class="mb-4"> <img src="/icons/maps/icon_japan.png" width="30px"> <a href="https://sangseek.com/places/hiroshima/ko"> 히로시마 </a> (총 장소: 15 | 지도 완성도: 1%) </li> <li class="mb-4"> <img src="/icons/maps/icon_japan.png" width="30px"> <a href="https://sangseek.com/places/osaka/ko"> 오사카, 교토 </a> (총 장소: 69 | 지도 완성도: 40%) </li> <li class="mb-4"> <img src="/icons/maps/icon_japan.png" width="30px"> <a href="https://sangseek.com/places/sapporo/ko"> 삿포로 </a> (총 장소: 37 | 지도 완성도: 25%) </li> <li class="mb-4"> <img src="/icons/maps/icon_japan.png" width="30px"> <a href="https://sangseek.com/places/shikoku/ko"> 시코쿠 </a> (총 장소: 12 | 지도 완성도: 1%) </li> <li class="mb-4"> <img src="/icons/maps/icon_japan.png" width="30px"> <a href="https://sangseek.com/places/fukuoka/ko"> 후쿠오카, 규슈 </a> (총 장소: 75 | 지도 완성도: 51%) </li> <li class="mb-4"> <img src="/icons/maps/icon_japan.png" width="30px"> <a href="https://sangseek.com/places/nagoya/ko"> 나고야 </a> (총 장소: 29 | 지도 완성도: 5%) </li> <li class="mb-4"> <img src="/icons/maps/icon_hongkong.png" width="30px"> <a href="https://sangseek.com/places/hongkong/ko"> 홍콩, 마카오 </a> (총 장소: 43 | 지도 완성도: 50%) </li> <li class="mb-4"> <img src="/icons/maps/icon_china.png" width="30px"> <a href="https://sangseek.com/places/beijing/ko"> 베이징 </a> (총 장소: 12 | 지도 완성도: 5%) </li> <li class="mb-4"> <img src="/icons/maps/icon_china.png" width="30px"> <a href="https://sangseek.com/places/qingdao/ko"> 칭다오 </a> (총 장소: 2 ) </li> <li class="mb-4"> <img src="/icons/maps/icon_china.png" width="30px"> <a href="https://sangseek.com/places/chengdu/ko"> 청두, 충칭 </a> (총 장소: 9 | 지도 완성도: 1%) </li> <li class="mb-4"> <img src="/icons/maps/icon_china.png" width="30px"> <a href="https://sangseek.com/places/shanghai/ko"> 상해 </a> (총 장소: 19 | 지도 완성도: 20%) </li> <li class="mb-4"> <img src="/icons/maps/icon_usa.png" width="30px"> <a href="https://sangseek.com/places/saipan/ko"> 사이판 </a> (총 장소: 26 | 지도 완성도: 77%) </li> <li class="mb-4"> <img src="/icons/maps/icon_usa.png" width="30px"> <a href="https://sangseek.com/places/hawaii/ko"> 하와이 </a> (총 장소: 37 | 지도 완성도: 60%) </li> <li class="mb-4"> <img src="/icons/maps/icon_usa.png" width="30px"> <a href="https://sangseek.com/places/guam/ko"> 괌 </a> (총 장소: 30 | 지도 완성도: 83%) </li> <li class="mb-4"> <img src="/icons/maps/icon_usa.png" width="30px"> <a href="https://sangseek.com/places/chicago/ko"> 시카고 </a> (총 장소: 7 | 지도 완성도: 1%) </li> <li class="mb-4"> <img src="/icons/maps/icon_usa.png" width="30px"> <a href="https://sangseek.com/places/new-york/ko"> 뉴욕 </a> (총 장소: 45 | 지도 완성도: 60%) </li> <li class="mb-4"> <img src="/icons/maps/icon_usa.png" width="30px"> <a href="https://sangseek.com/places/san-francisco/ko"> 샌프란시스코, 실리콘밸리 </a> (총 장소: 13 | 지도 완성도: 9%) </li> <li class="mb-4"> <img src="/icons/maps/icon_usa.png" width="30px"> <a href="https://sangseek.com/places/la/ko"> LA, 라스베이거스, 샌디에고 </a> (총 장소: 60 | 지도 완성도: 55%) </li> <li class="mb-4"> <img src="/icons/maps/icon_canada.png" width="30px"> <a href="https://sangseek.com/places/toronto/ko"> 토론토 </a> (총 장소: 19 | 지도 완성도: 16%) </li> <li class="mb-4"> <img src="/icons/maps/icon_canada.png" width="30px"> <a href="https://sangseek.com/places/vancouver/ko"> 밴쿠버, 캘거리 </a> (총 장소: 35 | 지도 완성도: 45%) </li> <li class="mb-4"> <img src="/icons/maps/icon_canada.png" width="30px"> <a href="https://sangseek.com/places/montreal/ko"> 몬트리올, 퀘벡, 오타와 </a> (총 장소: 11 | 지도 완성도: 10%) </li> <li class="mb-4"> <img src="/icons/maps/icon_uk.png" width="30px"> <a href="https://sangseek.com/places/london/ko"> 런던 및 영국 전국 </a> (총 장소: 51 | 지도 완성도: 45%) </li> <li class="mb-4"> <img src="/icons/maps/icon_italy.png" width="30px"> <a href="https://sangseek.com/places/rome/ko"> 로마, 피렌체 </a> (총 장소: 27 | 지도 완성도: 45%) </li> <li class="mb-4"> <img src="/icons/maps/icon_italy.png" width="30px"> <a href="https://sangseek.com/places/naples/ko"> 나폴리 및 이탈리아 남부 </a> (총 장소: 19 | 지도 완성도: 22%) </li> <li class="mb-4"> <img src="/icons/maps/icon_italy.png" width="30px"> <a href="https://sangseek.com/places/milano/ko"> 밀라노, 베네치아 </a> (총 장소: 24 | 지도 완성도: 41%) </li> <li class="mb-4"> <a href="https://sangseek.com/places/malta/ko"> 몰타 </a> (총 장소: 6 | 지도 완성도: 1%) </li> <li class="mb-4"> <img src="/icons/maps/icon_germany.png" width="30px"> <a href="https://sangseek.com/places/berlin/ko"> 베를린 및 독일 북부 </a> (총 장소: 15 | 지도 완성도: 40%) </li> <li class="mb-4"> <img src="/icons/maps/icon_germany.png" width="30px"> <a href="https://sangseek.com/places/munich/ko"> 뮌헨 및 독일 남서부 </a> (총 장소: 29 | 지도 완성도: 29%) </li> <li class="mb-4"> <img src="/icons/maps/icon_greece.png" width="30px"> <a href="https://sangseek.com/places/athens/ko"> 아테네 및 그리스 전국 </a> (총 장소: 13 | 지도 완성도: 20%) </li> <li class="mb-4"> <img src="/icons/maps/icon_france.png" width="30px"> <a href="https://sangseek.com/places/paris/ko"> 파리 및 프랑스 전국 </a> (총 장소: 82 | 지도 완성도: 58%) </li> <li class="mb-4"> <img src="/icons/maps/icon_swiss.png" width="30px"> <a href="https://sangseek.com/places/zurich/ko"> 취리히, 루체른, 체르마트 </a> (총 장소: 19 | 지도 완성도: 35%) </li> <li class="mb-4"> <img src="/icons/maps/icon_portugal.png" width="30px"> <a href="https://sangseek.com/places/lisbon/ko"> 리스본, 포르투 </a> (총 장소: 23 | 지도 완성도: 35%) </li> <li class="mb-4"> <img src="/icons/maps/icon_spain.png" width="30px"> <a href="https://sangseek.com/places/barcelona/ko"> 바르셀로나 </a> (총 장소: 31 | 지도 완성도: 49%) </li> <li class="mb-4"> <img src="/icons/maps/icon_spain.png" width="30px"> <a href="https://sangseek.com/places/madrid/ko"> 마드리드 및 스페인 전국 </a> (총 장소: 57 | 지도 완성도: 40%) </li> <li class="mb-4"> <img src="/icons/maps/icon_belgium.png" width="30px"> <a href="https://sangseek.com/places/brussels/ko"> 브뤼셀 및 벨기에 전국 </a> (총 장소: 14 | 지도 완성도: 10%) </li> <li class="mb-4"> <a href="https://sangseek.com/places/copenhagen/ko"> 코펜하겐 및 덴마크 전국 </a> (총 장소: 3 ) </li> <li class="mb-4"> <img src="/icons/maps/icon_turkey.png" width="30px"> <a href="https://sangseek.com/places/istanbul/ko"> 이스탄불 및 튀르키예(터키) 전국 </a> (총 장소: 27 | 지도 완성도: 33%) </li> <li class="mb-4"> <a href="https://sangseek.com/places/sofia/ko"> 소피아 및 불가리아 전국 </a> (총 장소: 4 | 지도 완성도: 1%) </li> <li class="mb-4"> <img src="/icons/maps/icon_hungary.png" width="30px"> <a href="https://sangseek.com/places/budapest/ko"> 부다페스트 </a> (총 장소: 16 | 지도 완성도: 10%) </li> <li class="mb-4"> <img src="/icons/maps/icon_poland.png" width="30px"> <a href="https://sangseek.com/places/warszawa/ko"> 바르샤바 및 폴란드 전국 </a> (총 장소: 7 | 지도 완성도: 5%) </li> <li class="mb-4"> <img src="/icons/maps/icon_austria.png" width="30px"> <a href="https://sangseek.com/places/wien/ko"> 빈 및 오스트리아 전국 </a> (총 장소: 31 | 지도 완성도: 15%) </li> <li class="mb-4"> <img src="/icons/maps/icon_ireland.png" width="30px"> <a href="https://sangseek.com/places/dublin/ko"> 더블린 </a> (총 장소: 6 | 지도 완성도: 9%) </li> <li class="mb-4"> <img src="/icons/maps/icon_croatia.png" width="30px"> <a href="https://sangseek.com/places/zagreb/ko"> 자그레브 및 크로아티아 전국 </a> (총 장소: 16 | 지도 완성도: 10%) </li> <li class="mb-4"> <img src="/icons/maps/icon_netherlands.png" width="30px"> <a href="https://sangseek.com/places/amsterdam/ko"> 암스테르담 및 네덜란드 전국 </a> (총 장소: 10 | 지도 완성도: 7%) </li> <li class="mb-4"> <img src="/icons/maps/icon_czech_republic.png" width="30px"> <a href="https://sangseek.com/places/praha/ko"> 프라하 및 체코 전국 </a> (총 장소: 17 | 지도 완성도: 5%) </li> <li class="mb-4"> <img src="/icons/maps/icon_united_arab_emirates.png" width="30px"> <a href="https://sangseek.com/places/dubai/ko"> 두바이, 아부다비 </a> (총 장소: 11 | 지도 완성도: 10%) </li> <li class="mb-4"> <a href="https://sangseek.com/places/india/ko"> 인도 </a> (총 장소: 7 | 지도 완성도: 1%) </li> <li class="mb-4"> <img src="/icons/maps/icon_mongolia.png" width="30px"> <a href="https://sangseek.com/places/ulaanbaatar/ko"> 울란바토르 </a> (총 장소: 17 | 지도 완성도: 15%) </li> <li class="mb-4"> <img src="/icons/maps/icon_australia.png" width="30px"> <a href="https://sangseek.com/places/sydney/ko"> 시드니 </a> (총 장소: 41 | 지도 완성도: 45%) </li> <li class="mb-4"> <img src="/icons/maps/icon_australia.png" width="30px"> <a href="https://sangseek.com/places/melbourne/ko"> 멜버른 </a> (총 장소: 23 | 지도 완성도: 37%) </li> <li class="mb-4"> <img src="/icons/maps/icon_australia.png" width="30px"> <a href="https://sangseek.com/places/brisbane/ko"> 브리즈번, 골드 코스트 </a> (총 장소: 20 | 지도 완성도: 15%) </li> <li class="mb-4"> <img src="/icons/maps/icon_newzealand.png" width="30px"> <a href="https://sangseek.com/places/auckland/ko"> 오클랜드 및 뉴질랜드 전국 </a> (총 장소: 54 | 지도 완성도: 63%) </li> <li class="mb-4"> <a href="https://sangseek.com/places/sweden/ko"> 스웨덴 </a> (총 장소: 8 | 지도 완성도: 1%) </li> <li class="mb-4"> <a href="https://sangseek.com/places/mexico-city/ko"> 멕시코 시티 및 멕시코 전국 </a> (총 장소: 4 | 지도 완성도: 1%) </li> <li class="mb-4"> <a href="https://sangseek.com/places/sao-paulo/ko"> 상파울루 및 브라질 전국 </a> (총 장소: 8 | 지도 완성도: 5%) </li> <li class="mb-4"> <a href="https://sangseek.com/places/iceland/ko"> 아이슬란드 </a> (총 장소: 3 ) </li> <li class="mb-4"> <a href="https://sangseek.com/places/egypt/ko"> 이집트 </a> (총 장소: 6 ) </li> <li class="mb-4"> <a href="https://sangseek.com/places/bolivia/ko"> 볼리비아 </a> (총 장소: 2 | 지도 완성도: 1%) </li> <li class="mb-4"> <a href="https://sangseek.com/places/peru/ko"> 페루 </a> (총 장소: 2 ) </li> </ul> </div> </div> <div class="col-md-12" class="white" style="background-color: black"> <div class="mt-3"><a href="/privacy" class="white" onmouseover="this.style.backgroundColor='gold'" onmouseout="this.style.color='blue'">Privacy</a></div> <div><a href="/about" class="white" onmouseover="this.style.backgroundColor='gold'" onmouseout="this.style.color='blue'">About</a></div> <div><a href="/advertising" class="white" onmouseover="this.style.backgroundColor='gold'" onmouseout="this.style.color='blue'">Advertising</a></div> <div><a href="/api" class="white" onmouseover="this.style.backgroundColor='gold'" onmouseout="this.style.color='blue'">API</a></div> <br> <div class="gold">- 상식이 혼자 웹과 앱을 만들어서 오류가 많을 겁니다. 심각한 오류 신고 대환영입니다. 카톡: sangseek</div> <div class="gold mt-1">- AI 사용과 번역기 사용으로 번역 및 정보에 오류가 있을 수 있습니다. 심각한 오류는 신고해주세요.</div> <div class="gold mt-1">- 상식닷컴에서 작성한 내용은 '상식닷컴' 출처 남기고 상업적으로 사용하시면 됩니다. 타인의 내용은 작성자에게 문의를 하세요. 몇몇 출처가 불확실한 내용 또는 이미지들도 있습니다. 따로 연락을 주시면 출처 확인해드리겠습니다.</div> <div class="gold mt-1">- 제휴 링크를 통해 상품 및 서비스를 구매하시면 상식닷컴은 제휴 업체로부터 수수료를 받습니다. 결제 금액이 다른 곳과 동일하다면 상식닷컴에서 제공하는 링크를 통해서 구매해주시면 감사하겠습니다. 상식닷컴 사이트 유지를 위해서 사용하겠습니다.</div> <div class="mt-3"> <div> <span class="white">전 세계 상식닷컴 여행지도 다운로드</span><br> <span class="gold">구글 지도 네비게이션과 연결되므로 강추!</span><br> <a href="https://play.google.com/store/apps/details?id=com.sangseek.sangseekworldtravelmap&hl=ko" target="_blank"> <img alt='Get it on Google Play' src=https://play.google.com/intl/en_us/badges/static/images/badges/ko_badge_web_generic.png width="200px"/> </a> <br> <a href="https://apps.apple.com/kr/app/%EC%83%81%EC%8B%9D%EB%8B%B7%EC%BB%B4-%EC%97%AC%ED%96%89%EC%A7%80%EB%8F%84/id6757587424" target="_blank"> <img src="https://d2jg1jnvqw60d7.cloudfront.net/talks/VUTcYjDbBa7NihyVhR3enxF8wKLJX4DZKm4XYNbg1669310058.jpg" width="200px"> </a> </div> </div> <div class="mt-3"> <a class="" href="https://sangseek.com/sangseeks/%ED%98%B8%ED%85%94-%EC%95%A1%ED%8B%B0%EB%B9%84%ED%8B%B0-%ED%95%AD%EA%B3%B5%EA%B6%8C-%EC%98%88%EC%95%BD" target="_blank" onmouseover="this.style.backgroundColor='gold'" onmouseout="this.style.color='blue'"> 상식닷컴 통해서 호텔/액티비티/항공권 예약해서 상식닷컴 서포트해주기</a> </div> <div class="mt-5"> <newsletter-subscribe-component></newsletter-subscribe-component> </div> <div class="white mt-3" style="margin-bottom:5%;"> 문의: <a class="" href="mailto:sangseek12@naver.com" onmouseover="this.style.backgroundColor='gold'" onmouseout="this.style.color='blue'"> sangseek12@naver.com</a> <br> <span class="white mb-5">2026 sangseek.com</span> </div> </div> </div> </div> </footer> </div> <script type="text/javascript"> function togglePasswordInput(){ var passwordInput = document.getElementById("password"); if (passwordInput.style.display == "none") { passwordInput.style.display = "block"; passwordInput.placeholder = '비밀번호 입력'; } } function openTerms() { document.getElementById("terms-community-div").display = "block"; } </script> </body> </html>