오늘 배울 내용을 미리 정리해 봅니다.
#ip주소 #도메인_DNS 주소 #주소체계 #하이퍼링크 #<a>태그
이번 포스팅은 아주 중요한 내용이에요!
여러 웹페이지를 연결시키는 내용에 대한 건데요,
이름하여 하.이.퍼.링.크.
하이퍼링크란...?
한 웹페이지에서 다른 웹사이트나, 웹페이지, 문서, 파일 등으로 연결해주는 링크를 의미합니다. 텍스트 또는 이미지에 삽입 가능하며, HTML에서는 <a> 태그로 구현을 합니다.
하이퍼링크 기능을 구현하기 앞서, 인터넷 주소의 체계와 작동 방식에 대해 정리해 볼게요. 이게 실제 웹사이트 개발하는 데 있어서 작동 원리와 구조를 파악하는 데 도움이 많이 될 것 같더라구요.
인터넷 주소 2가지, IP 주소와 DNS 주소
- IP 주소
Internet Protocol Address는 인터넷에 연결된 기기(컴퓨터, 스마트폰 등)에 할당되는 고유한 주소입니다. IP 주소는 데이터를 송수신할 때 기기의 위치를 식별하는 역할을 합니다.
ex) 192.168.0.1 - DNS 주소
도메인 주소 체계(Domain Name System, DNS)는 인터넷에서 웹사이트나 서버의 IP 주소를 사람이 이해하기 쉬운 문자형 주소(도메인) 로 변환하는 시스템입니다.
ex) 구글의 IP주소 : 172.217.161.206
==> 구글의 DNS주소 : http://www.google.com
인터넷 홈페이지를 만든다는다는 것은...


인터넷 상에 인터넷 주소(공간)를 만들어, 외부(검색사이트 등)에서 나의 공간으로 이동할 수 있게 하고, 나의 공간 안에서도 페이지와 페이지를 연결시켜 주어 이동할 수 있게 해 준다는 것을 의미합니다.
- 주소체계1_시작페이지 ; 도메인 주소 필요 --> 외부 인터넷 공간에서 나의 공간 대문으로 이동
- 주소체계2_상세페이지 ; 나의 공간 내 각 페이지 연결

인터넷 주소는 어떻게 만드는 거에요?

각국에는 전파관리국이 있어서 모든 주소를 관리한다고 해요. 우리나라에서는 한국인터넷정보센터에서 관리하고 있어요. 모든 국가, 모든 컴퓨터에는 다 주소가 있다는 얘기지요.
그럼, 내 컴퓨터에도 주소가 이미 있는 거네요?
네, 맞아요! 인터넷을 사용할 수 있는 컴퓨터라면, 이미 IP 주소가 있는 거에요. 하지만! 내가 집에서 쓰는 컴퓨터로 전세계 모든 사람이 들어 올 수 있도록 연결시키면 어떻게 되겠어요?!!! (으아아아아앙악!)
보안에 대해서 전혀 알지 못하는 나로서는 내 개인의 정보나 파일들이 탈탈 털리게 되겠죠... 그래서 내 컴퓨터 자체의 주소를 오픈하는 방식으로 홈페이지를 만들 수 없어요.
1) 이때, 호스팅 서비스가 등장합니다!
호스팅 서비스는 서버 컴퓨터의 일부 또는 전체 공간을 임대해 사용할 수 있도록 해주는 서비스입니다. 사용자가 직접 서버를 구입하고 운영할 필요가 없어 편리합니다.
내 개인 집은 그냥 두고, 상가의 한 칸을 임대해서 장사를 하는 것과 같아요. 이제 도메인이 필요합니다! 내가 임대한 서버공간 IP 주소로 쉽게 올 수 있게 하는 문자로 된 주소!
2) 도메인 주소를 구매해요!
도메인 등록 업체를 통해 도메인 주소를 구매할 수 있어요. 도메인은 겹치면 안되기 때문에, 내가 사용하고자 하는 도메인이 사용가능한 지 먼저 확인을 해야 해요. 누군가 선점하지 않았다면, 비용을 내고 등록을 할 수 있어요!
이건 약간 상호를 특허청에 등록하는 것과 같아요! 이제 이 도메인 주소와 호스팅을 연결해 주면, 인터넷 공간에 나의 집과주소가 생기게 됩니다.

인터넷 주소에 대한 이해가 좀 되셨을까요? 저는 익숙한 단어들이긴 한데, 잘 모르겠다 싶었던 개념들을 이제야 정리할 수 있게 되었답니다^^
호스팅과 도메인은 언제 구매해야 하나요?
- 호스팅 서비스 --> 홈페이지를 실제 오픈 직전! (매달 서비스 비용이 나갑니다)
- 도메인 등록 --> 사용하고자 하는 특정 도메인이 있다면 선점해 놓기!
웹문서 개발 자체는 pc를 통해 진행을 한 뒤, 한번에 서버에 올리게 되어요. 그때에 상세페이지 주소들이 자동 세팅 됩니다. 즉, 시작페이지 주소(도메인)만 먼저 정해 놓으면, 나머지는 피씨에서 개발 먼저 진행한 뒤 구매해도 되어요.
저는 도메인을 먼저 구매하려고 했는데요...OTL... 이미 누가 선점해 놓았더라구요. 그래서 도메인을 다시 고민 중이에요.
오늘은 여기까지!
다음 포스팅에 <a> 태그를 사용한
하이퍼링크로 다시 만나요!
감사합니다^^
'쇼핑몰 제작 도전기 > 코딩 - HTML, CSS' 카테고리의 다른 글
[코딩]페이지를 연결 시킬 수 있어요! ② - html 이미지에 하이퍼링크 걸기 (2) | 2025.03.31 |
---|---|
[코딩]페이지를 연결 시킬 수 있어요! ① - html 텍스트에 하이퍼링크 걸기 (2) | 2025.03.27 |
[코딩]웹문서에 동영상을 넣을 수 있어요! - html 태그 동영상 삽입 (2) | 2025.03.24 |
[코딩]웹문서에 사진을 넣을 수 있어요 - html 이미지 삽입하기 (0) | 2025.03.20 |
[코딩]표를 작성할 수 있어요! ③ - html 표 영역/캡션 태그 (0) | 2025.03.19 |