티스토리 뷰
이번 포스팅은 <body> 태그안의 내용을 읽어볼게요.
자 먼저 우리 홈페이지를 가봅시다.
빨간줄로 표시한 부분이 홈페이지의 메뉴들을 표시하고 화면을 이동시켜주는 기능을 갖고 있는 부분인것 같아요!
하지만 영어로 되어있는 부분을 한글로 바꾸고 싶은데 소스코드에서는 아직 어느부분을 바꿔야하는지 감이오지 않네요...
그럴때는 홈페이지가 떠잇는 웹브라우저에서 F12를 눌러봅시다. 저는 크롬 웹브라우저를 사용합니다.
오른쪽에 어떤 창이 나오신게 보이시죠? 이게 개발자 도구입니다.
새로나온 창에서 왼쪽 상단에 보시면 빨간색으로 표시한 부분이 있는데 이 버튼을 한번눌러서 활성화 시키고 홈페이지쪽으로 커서를 옮겨보면 범위가 잡힙니다. 전 Home 메뉴바에 커서를 올렸습니다. 범위가 잡힌뒤 범위가 잡힌 곳에서 클릭을 한번 더 누르면 !
짠! 오른쪽 개발자 도구 화면이 바뀌었습니다. 주황색으로 표시된 부분이 선택한 태그부분 입니다. 개발자 도구에서 수정하고싶은 부분을 더블클릭해서 내용을 수정할 수도 있어요.
<a href="index.html" class="nav-item nav-link active">Home</a>
요런식으로 되어있네요. 여기서 'Home' 이라는 부분의 텍스트를 다른 거로 변경하면 상단의 메뉴바가 변경될거에요. 태그에 대해서 설명을 좀 드리자면
<a></a> 태그는 HTML에서 하이퍼링크를 생성할 때 사용되는 요소입니다. 파워포인트를 다들 한번씩은 이용해보셨을텐데 어떤 버튼에 하이퍼링크를 넣고 파워포인트의 다른 페이지를 입력하면 해당 페이지로 넘어가는 기능을 한번쯤은 보셨거나 활용해보셨을겁니다. 그것과 같은 기능을 하는 태그라고 보시면 됩니다. <a href = "내용"> 요렇게 href라는 속성값을 준게 보이시죠? 여기에 이동할 페이지를 넣으시면 됩니다. 보통은 .html 파일이나 https://www.naver.com 과 같은 url 주소를 넣습니다.
<a href="https://www.naver.com" class="nav-item nav-link active">Home</a>요런식으로도 쓸 수 있어요! 이렇게되면 'Home' 버튼을 누르면 네이버 페이지로 이동할거에요.
자, 그럼이제 조금 더 범위를 확장해서 코드를 알아볼게요.
<!-- Navbar start -->
<div class="container-fluid fixed-top">
<div class="container topbar bg-primary d-none d-lg-block">
<div class="d-flex justify-content-between">
<div class="top-info ps-2">
<small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#" class="text-white">123 Street, New York</a></small>
<small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#" class="text-white">Email@Example.com</a></small>
</div>
<div class="top-link pe-2">
<a href="#" class="text-white"><small class="text-white mx-2">Privacy Policy</small>/</a>
<a href="#" class="text-white"><small class="text-white mx-2">Terms of Use</small>/</a>
<a href="#" class="text-white"><small class="text-white ms-2">Sales and Refunds</small></a>
</div>
</div>
</div>
<div class="container px-0">
<nav class="navbar navbar-light bg-white navbar-expand-xl">
<a href="index.html" class="navbar-brand"><h1 class="text-primary display-6">Fruitables</h1></a>
<button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars text-primary"></span>
</button>
<div class="collapse navbar-collapse bg-white" id="navbarCollapse">
<div class="navbar-nav mx-auto">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="shop.html" class="nav-item nav-link">Shop</a>
<a href="shop-detail.html" class="nav-item nav-link">Shop Detail</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
<div class="dropdown-menu m-0 bg-secondary rounded-0">
<a href="cart.html" class="dropdown-item">Cart</a>
<a href="chackout.html" class="dropdown-item">Chackout</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
<a href="404.html" class="dropdown-item">404 Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<div class="d-flex m-3 me-0">
<button class="btn-search btn border border-secondary btn-md-square rounded-circle bg-white me-4" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search text-primary"></i></button>
<a href="#" class="position-relative me-4 my-auto">
<i class="fa fa-shopping-bag fa-2x"></i>
<span class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1" style="top: -5px; left: 15px; height: 20px; min-width: 20px;">3</span>
</a>
<a href="#" class="my-auto">
<i class="fas fa-user fa-2x"></i>
</a>
</div>
</div>
</nav>
</div>
</div>
<!-- Navbar End -->
길죠...? 아까 부분적으로 본 <a></a> 태그에서 포함관계 상단에 있는 <div>태그의 부분까지 가져온 코드입니다.
위의 코드내용이 홈페이지에서 표시하자면 빨간색으로 표시한 구역만큼의 부분에 해당되요. 태그의 범위를 확인하는 방법은 Visual Studio Code에서 태그에 커서를 위치시키면 범위를 볼 수 있어요.
<div>태그의 i와 v사이에 커서를 줫더니 배경이 흐릿하게 생긴게 보이시나요? 위쪽부분이 <div>태그의 시작 아래쪽 부분이 </div>태그의 끝 부분입니다.
코드를 보면
<!-- Navbar start -->요런부분이 있어요. 이걸 주석이라고 합니다. 소스코드에 내가 혹은 상대방이 알기쉽도록 메모를 해놓는 기능이라고 생각하시면 됩니다.
<!-- 메모 내용 --><!--
메모내용1
메모내용2
-->이런식으로 여러줄로 작성할 수도 있습니다. 주석은 코드로 인식하지 않기 때문에 많이 사용하셔도 괜찮습니다. 헷갈릴 수 있는 부분이나 잊어버릴것 같은 내용들을 주석으로 표시해두시고 적극적으로 활용하시는걸 추천드립니다. ㅎㅎ
다시 소스코드 내용으로 돌아가볼게요.
<!-- Navbar start -->
<div class="container-fluid fixed-top">
<div class="container topbar bg-primary d-none d-lg-block">
<div class="d-flex justify-content-between">
<div class="top-info ps-2">
<small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#" class="text-white">123 Street, New York</a></small>
<small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#" class="text-white">Email@Example.com</a></small>
</div>
<div class="top-link pe-2">
<a href="#" class="text-white"><small class="text-white mx-2">Privacy Policy</small>/</a>
<a href="#" class="text-white"><small class="text-white mx-2">Terms of Use</small>/</a>
<a href="#" class="text-white"><small class="text-white ms-2">Sales and Refunds</small></a>
</div>
</div>
</div>
<div class="container px-0">
<nav class="navbar navbar-light bg-white navbar-expand-xl">
<a href="index.html" class="navbar-brand"><h1 class="text-primary display-6">Fruitables</h1></a>
<button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars text-primary"></span>
</button>
<div class="collapse navbar-collapse bg-white" id="navbarCollapse">
<div class="navbar-nav mx-auto">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="shop.html" class="nav-item nav-link">Shop</a>
<a href="shop-detail.html" class="nav-item nav-link">Shop Detail</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
<div class="dropdown-menu m-0 bg-secondary rounded-0">
<a href="cart.html" class="dropdown-item">Cart</a>
<a href="chackout.html" class="dropdown-item">Chackout</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
<a href="404.html" class="dropdown-item">404 Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<div class="d-flex m-3 me-0">
<button class="btn-search btn border border-secondary btn-md-square rounded-circle bg-white me-4" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search text-primary"></i></button>
<a href="#" class="position-relative me-4 my-auto">
<i class="fa fa-shopping-bag fa-2x"></i>
<span class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1" style="top: -5px; left: 15px; height: 20px; min-width: 20px;">3</span>
</a>
<a href="#" class="my-auto">
<i class="fas fa-user fa-2x"></i>
</a>
</div>
</div>
</nav>
</div>
</div>
<!-- Navbar End -->이 코드는 친절하게도 Navbar 라는 부분의 시작과 끝을 주석으로 표시를 해주고있습니다.
Navbar란 보통 홈페이지의 상단에 위치하여 해당 홈페이지에서 사용가능한 메뉴들을 보여주고 페이지의 이동을 도와주는 역할을 하는 부분입니다.
풀어서 설명하면 홈, 회사소개, 오시는길 등의 메뉴들을 상단에 표시하고 클릭을 하면 페이지를 이동시키는 역활을 하는 부분이라고 보시면 됩니다.
위의 코드중에 <nav>태그를 한번 찾아보세요.
.
.
.
.
.
찾으셨나요?
그러면 그 <nav>태그의 끝을 찾아보세요.
.
.
.
.
.
찾으셨나요? ㅎ
<nav class="navbar navbar-light bg-white navbar-expand-xl">
<a href="index.html" class="navbar-brand"><h1 class="text-primary display-6">Fruitables</h1></a>
<button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="fa fa-bars text-primary"></span>
</button>
<div class="collapse navbar-collapse bg-white" id="navbarCollapse">
<div class="navbar-nav mx-auto">
<a href="index.html" class="nav-item nav-link active">Home</a>
<a href="shop.html" class="nav-item nav-link">Shop</a>
<a href="shop-detail.html" class="nav-item nav-link">Shop Detail</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
<div class="dropdown-menu m-0 bg-secondary rounded-0">
<a href="cart.html" class="dropdown-item">Cart</a>
<a href="chackout.html" class="dropdown-item">Chackout</a>
<a href="testimonial.html" class="dropdown-item">Testimonial</a>
<a href="404.html" class="dropdown-item">404 Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<div class="d-flex m-3 me-0">
<button class="btn-search btn border border-secondary btn-md-square rounded-circle bg-white me-4" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search text-primary"></i></button>
<a href="#" class="position-relative me-4 my-auto">
<i class="fa fa-shopping-bag fa-2x"></i>
<span class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1" style="top: -5px; left: 15px; height: 20px; min-width: 20px;">3</span>
</a>
<a href="#" class="my-auto">
<i class="fas fa-user fa-2x"></i>
</a>
</div>
</div>
</nav>찾으신 부분이 이 부분이 맞다면 잘찾으신겁니다. ㅎㅎ
여기서 naver, google, youtube, tistory 이렇게 메뉴를 구성하고 클릭햇을때 이동하게 하려면 어떻게 할까요?
'Home' 부분을 naver로 이동하도록 먼저 수정해볼게요.
빨간줄로 표시한부분을 수정했습니다. 저장한뒤에 'index.html' 파일을 실행해볼게요.
위 사진처럼 변경이 됬고 'naver'를 클릭하면 네이버 페이지로 이동합니다.
그러면,
<a href="https://www.naver.com" class="nav-item nav-link active">naver</a>이 부분을 복사해서 바로 밑에 붙여넣기 하고 수정을 해볼게요. 이번엔 구글입니다.
이렇게 될거에요. 자 그럼 또 복사 붙여넣기를 사용해서 아래에 유튜브와 티스토리도 추가해봅시다.
잘 되셨나요? 저는 이렇게 됬습니다. 저장하고 'index.html'을 실행시켜보면
메뉴가 늘어나있네요!! 눌러보면 정상적으로 네이버, 구글, 유튜브, 티스토리 정상적으로 이동이됩니다.
앞으로 태그의 시작과 끝을 구분하고 코드를 복사하고 붙여넣기하고 수정하는 절차로 홈페이지를 만들거에요. 다음 포스팅 부터는 실제로 단일 홈페이지를 만드는 방법을 시작해볼게요.
'홈페이지 만들기' 카테고리의 다른 글
| 4. 소스코드 읽는 방법 알기 두번째 (4) | 2024.03.14 |
|---|---|
| 3. 소스코드 읽는 방법 알기 첫번째 (0) | 2024.03.13 |
| 2. 오픈소스 활용하기 (0) | 2024.03.13 |
| 1. 홈페이지 만들기 준비하기 (0) | 2024.03.13 |
| 누구나 만들 수 있는 홈페이지 제작 (0) | 2024.03.13 |
- 블로그 꾸미기
- session과 cookie의 차이점
- suno v2
- 2024 클라우드 지원사업
- 세션과 쿠기의 차이점
- session과 cookie의 다른점
- suno v3
- 홈페이지
- session과 cookie의 차이
- pgvector 확장 설정
- 나만의 홈페이지 만들기
- redis spring boot 연동
- 음악제작 ai
- 구독버튼 꾸미기
- OpenAI 최근 뉴스
- 파일 크기 제한
- 동영상 배너
- 인증서 자동 갱신
- OpenAI 이미지 생성기
- Spring Boot
- 홈페이지 만들기
- OpenAI 최근 소식
- 쉬운 홈페이지 만들기
- 서버 설정
- 강남 자율주행 택시
- 클라우드 서비스 지원포털
- 티스토리 배너 만들기
- postgresql 리눅스 설치
- 서울 자율주행 택시
- OpenAI DALLE
- Total
- Today
- Yesterday