aws 라이트세일 인스턴스와 wh& cpanel 을 활용해서 본인의 웹 사이트 도메인주소로 이메일 주소와 이메일 서버를 관리할 수 있습니다. aws 라이트세일 인스턴스 및 cpanel & whm 을 활용한 email 계정 생성부터 이메일 관리서버 생성방법을 확인해볼 수 있습니다.aws 이메일 계정 생성 및 이메일 생성 순서는 아래와 같이 진행 됩니다.
aws 라이트세일 whm & cpanel 이메일 계정 생성부터 활성화방법
필요한 시간: 30 minutes.
aws 라이트세일 인스텅스 whm & cpanel 이메일 계정 생성 및 서버 등록 방법
aws 라이트세일에서 도메인 및 dns 레코드 설정
a 레코드 – mail.example.co.kr – > public ip (공공아이피 설정) mx 레코드 – > 우선순위 10 으로 설정, 레코드이름 example.co.kr 설정. 다음으로 트래픽 라우팅 mail.example.co.kr 설정 txt 레코드는 3가지를 설정합니다.
txt 값 @.example.co.kr / spf1 응답키 설정 _dmarc. : dmarc 응답킵 설정 efault._domainkey : dkim 응답키
aws 25, 465,587,2096 포트 열어주기
2096 포트를 열어놓지 않으면 cpanel 에서 웹메일 서버 자체에 접속할 수 없고, 25, 2465, 587 포트를 열어주지 않으면 이메일 자체 수신 및 발신이 되지 않습니다. Lightsail 콘솔에서 네트워킹 탭으로 이동합니다. 다음 포트를 추가로 엽니다: TCP 25 (SMTP) TCP 465 (SMTPS) TCP 587 (Submission) TCP 2096 (Webmail SSL) 5.2. IPv6 방화벽 규칙 확인 IPv6를 사용하는 경우 중복된 규칙을 제거하고 포트를 열어줍니다.
whm 접속 후 imap & pop 3 활성화 진행
웹 브라우저에서 https://<Elastic_IP>:2087 또는 example.com:2087 입력 후 whm 에 접속합니다. home – > Service Configuration -> Mailserver Configuration 접속 후 imap, pop3 를 선택 후 ipv6 활성화를 진행합니다.
whm 서비스 관리자에서 에서 exim mail server 및 imap server 활성화 하기
whm service configuration – > service manager – > exim mail server & imap enbled 를 클릭 후 활성화를 시켜줍니다.
dkim 및 spf & dmarc 설정 확인하기
whm -> email -> email deliverabilliy 설정 접속 후 valid 내용을 확인합니다. valid 로 설정되어 있지 않다면, aws light sail dns 존에서 txt 레코드 파일을 설정합니다.
whm 이메일 라우팅 설정하기
whm 에서 dns 설정한 이메일 라우팅을 설정합니다. whm – > email routing 에서 도메인을 선택 한 후 local mail exchaner 클릭 후 ttl 14400, priority 값은 10 , mx destisation 은 mail.example.co.kr 을 설정합니다.
cpanel 에서 메일 도메인의 ssl 인증서 설치하기
cpanel -> security -> ssl/tls status 접속 후 메일 서버의 도메인 주소를 ssl 인증서 설치를 진행합니다. mail.example.co.kr 클릭 후 run auto ssl 클릭 시 ssl 인증서가 설치 됩니다.
cpanel – > email account 계정 생성 및 로그인하기.
cpanel 에서 email 계정을 확인합니다. cpanel 계정 생성시 기본으로 생성되는 이메일 주소는 example@example.co.kr 으로 설정 되어 있습니다. 만약 이메일 주소를 변경하고 싶으시다면 create 버튼을 클릭 후 앞에 사용자 설정에 따른 이메일 주소를 생성할 수 있습니다. official@example.co.kr 같은 이메일 주소로 생성 가능합니다.
aws 이메일 발송 제한 해제 요청하기
aws 라이트세일의 경우 이메일 발송에 제한을 걸어두었는데요. 이메일은 수신되지만 발송을 위해 별도로 aws 라이트세일 제하 해제요청을 진행해주셔야합니다.
라이트세일 이메일 제한 해제 요청 서비스에 접속 후 본인의 답변받을 이메일 주소를 입력 후, 이메일 사용 사례 설명을 작성합니다. ip 정보는 라이트세일 인스턴스의 public ip 주소인 공공 아이피 주소를 입력 합니다. 역방향 dns 레코드는 mail.example.co.kr 로 메일 서버 도메인 주소를 입력 한 후 제출 하기를 클릭합니다.
바이러스 검사를 위한 clam av plug in 설치하기
홈페이지 서버를 이용할 때 이메일로 들어오는경우 바이러스가 발생할 수 있습니다. 바이러스 방지를 위해 clam av 플러그인을 설치해주셔야합니다. clam av 플러그인은 whm -> plugin – > clam av install 클릭을 진행하면 플러그인이 설치 됩니다. 플러그인 설치후 whm – > service manager -> clam av daemon enabled , monitor 체크박스를 선택 후 활성화를 진행합니다.
aws 라이트세일 whm & cpanel 이메일 계정 생성부터 활성화까지 방법을 모두 확인해보았습니다. 만약 위에 순서대로 진행하는데도 이메일 수신이 안되거나, 발신이 안된다면 포트 구성 및 dns 설정내역을 한번 더 체크해보시길 바랍니다.
만약 이메일 서버 구성에 어려움을 겪고 계시다면 서비스 요청을 하시면 소정의 비용을 받고 서버 설정을 진행해드리도록 하겠습니다.
처음 프로프래밍을 접하거나, 홈페이지 제작 같은 웹 개발을 처음 하시는 분들이라면 도메인, 호스팅, html, css, javascript, api 와 같은 언어를 처음 접해보실텐데요. 프로그래밍 언어를 몰라도 이제는 ai 로 다 가능하지만, 기본적으로 어떤 역할을 하는지 개념을 이해한다면 조금 수월하게 공부할 수 있습니다. 웹 개발에서 개본적으로 사용하는 도메인, 호스팅, html, css, javascipt 그리고 api 에 관한 개념과 역할을 빠르게 이해할 수 있도록 구성되어 있습니다.
도메인, 호스팅, HTML, CSS, JavaScript, 그리고 API 이해하기!
만약 당신이 웹사이트를 만드는 과정을 “집을 짓는 것”에 비유한다면, 도메인, 호스팅, 그리고 다양한 웹 기술들이 집을 구성하는 요소들이 됩니다. 집과 관련된 비유로 설명하면 훨씬 쉽게 이해할 수 있습니다! 아래에서 먼저 간다하게 도메인, 호스팅, html, javascript, api 의 역할을 집에 비유해서 확인해보도록 하겠습니다.
웹 개념
집에 비유하기
역할
도메인
집 주소
사용자가 웹사이트를 찾을 수 있는 경로
호스팅
집 자체
웹사이트 데이터를 저장하는 공간
HTML
집의 뼈대
웹사이트의 기본 구조를 구성
CSS
집의 인테리어
웹사이트의 디자인과 스타일을 꾸밈
JavaScript
집의 전기 및 자동화
웹사이트에 동적인 기능을 추가
API
외부 서비스 연결
외부 데이터나 기능을 가져오도록 연결
🏡 도메인: 집 주소
기술 개념: 웹사이트의 주소.
역할:
사용자가 웹사이트에 쉽게 접근하도록 네트워크 상의 IP 주소를 사람이 읽을 수 있는 형식으로 제공.
예:google.com, naver.com.
친구들이 여러분의 집을 방문하려면 정확한 주소가 필요하듯, 인터넷 사용자들도 웹사이트를 방문하려면 주소가 필요합니다.
도매인 예시: “www.myhouse.com “이 도메인입니다. 이 주소를 입력하면 사용자가 여러분의 집(웹사이트)을 찾을 수 있어요.
도메인은 집 주소를 등록하는 것과 같습니다. 주소를 잃어버리면 아무도 여러분의 집을 찾을 수 없겠죠. 홈페이지에 등록을 하려면 도메인을 설정해주셔야합니다.
도메인
🏠 호스팅: 집을짓는 땅
기술 개념: 웹사이트를 인터넷에 올려주는 서버 공간.
역할:
웹사이트를 저장하고, 사용자가 언제든 접근할 수 있도록 24/7 제공.
호스팅 제공 업체(AWS, 카페24 등)가 서버 관리 및 유지보수를 처리.
호스팅은 집을 짓기위한 땅이라고 생각하시면 됩니다. 집을 짓기 위해서는 땅이 필요하잖아요? 집을 짓기위해 저희는 온라인에서 호스팅 서버를 대여하거나, 직접 호스팅 서버를 운영할 ㅜㅅ 있습니
웹사이트는 데이터와 파일들로 구성된 공간이 필요합니다. 이 공간이 바로 호스팅 서버입니다.
여러분이 집에 물건을 보관하듯, 웹사이트의 콘텐츠(텍스트, 이미지, 영상)를 호스팅 서버에 저장합니다.
호스팅은 집을 임대하거나 소유하는 것과 비슷합니다. 좋은 호스팅을 선택하면 안전하고 편안한 집을 가질 수 있어요.
주요 호스팅 서비스로는
🛠️ HTML: 집의 뼈대
기초 언어: 웹페이지의 구조를 정의하는 언어.역할:
문서를 구성하는 태그(<h1>, <p>, <img> 등)를 사용해 콘텐츠를 구조화.
텍스트, 이미지, 링크 등을 배치.
특징:
정적인 언어이며, 프로그래밍 언어라기보다는 마크업 언어입니다.
배우기 쉽고, 웹 개발의 출발점.
HTML은 집을 짓는 골조(뼈대)라고 생각하시면 됩니다. 아무것도 없는 빈 공간에 기본적인 웹사이트의 구조를 만드는게 html 입니다.
집을 지으려면 벽, 천장, 문 등 기본 구조가 필요하죠.
웹사이트의 기본 구조를 만드는 언어가 바로 HTML입니다.
HTML은 집의 “뼈대”를 짓는 설계도와 같습니다.
뼈대만 있다면 보기엔 썰렁한 집이겠죠? 여기서 CSS와 JavaScript가 필요합니다!
아무것도 없는 현재 이 페이지도 html 과 css 로 구성 되어 있는 상태를 보시면 됩니다. 페이지로 넘어갈 때 사용되는게 자바스크립트(javascrpit) 라고 보시면 됩니다.
아래의 코드는 html 코드 예시 인데요.
<h1>여기는 거실입니다</h1>
<p>거실에는 소파와 테이블이 있습니다.</p>
위 예시 코드에서 보면 h1 은 페이지의 제목1번(헤드1) 이라는 뜻인데요. 즉 페이지가 어떤 제목인지 알려주는 뜻입니다. p 는 단락이라는 뜻입니다.
<> 이 코드는 시작이라는 단어이고, </> 이 코드는 코드를 닫는다. 라고 생각하시면 됩니다. 즉 “<h1>”은 제목 1의 시작 , “</h2>” 는 제목1 끝 이라고 보시면 됩니다.
아래에서는 htmml 의 주요 용어 목록을 간단히 확인해볼 수 있고, html 에 관한 더 자세한 내용은 이 글에서확인해보세요!
문서의 메타정보를 정의하는 영역. <head> </head> head 태그 안에 메타 정보를 작성.
본문(Body)
웹 페이지에 표시되는 주요 콘텐츠 영역. <body> 태그 안에 작성.
HTML5
HTML의 최신 표준 버전으로, 멀티미디어와 상호작용을 더 쉽게 구현 가능.
DOCTYPE
문서의 HTML 버전을 정의하는 선언. <DOCTYPE html> 형태.
주석(Comment)
코드 설명을 추가하는 영역. 브라우저에 표시되지 않음. <!-- 내용 -->
🎨 CSS: 집의 인테리어
기초 언어: 웹페이지의 스타일(디자인)을 정의하는 언어.
역할:
HTML 요소의 색상, 크기, 위치, 배경 등을 지정.
웹페이지를 시각적으로 아름답고 사용자 친화적으로 만듦.
특징:
HTML과 분리되어 있어, 디자인만 독립적으로 관리 가능.
동작: 선언형 언어로 로직이 아닌 스타일을 기술.
CSS는 집을 꾸미는 인테리어라고 생각하시면 됩니다. CSS가 없다면 집은 기능만 있고 보기엔 매우 투박할 거예요. 집의 벽지 색, 바닥 마감, 가구 배치 등을 결정하듯 웹피이지에 CSS를 더하면 세련되고 아름다운 집이 됩니다.
CSS는 웹사이트의 색깔, 크기, 위치, 배경 등을 설정하여 HTML로 만들어진 골격에 디자인을 합니다. . HTML로 만들어진 골격에 미적인 요소를 입힙니다. CSS는 집의 페인트, 벽지, 가구 배치입니다. 집의 벽을 흰색으로 칠하거나, 창문에 커튼을 다는 작업이 CSS입니다.
css 코드 예시 :
h1 {
color: blue;
font-size: 24px;
}
H1 태그에 스타일을 적용하게 되는 예시입니다. “color: blue;“는 텍스트의 색상을 파란색으로 지정하고, “font-size: 24px;:” 는글꼴 크기를 24픽셀로 설정합니다.
📖 CSS 주요 용어 목록
용어
설명
Selector
스타일을 적용할 HTML 요소를 선택합니다. 예: h1, .class, #id 등.
Property
스타일의 속성을 정의합니다. 예: color, font-size, margin.
Value
속성(Property)에 지정할 값을 나타냅니다. 예: blue, 16px, 10px.
Class
여러 요소에 동일한 스타일을 적용하기 위한 속성. 예: .myClass.
ID
특정 요소에 고유하게 스타일을 적용하기 위한 속성. 예: #myId.
Inline Style
HTML 태그의 style 속성에 직접 CSS를 작성하는 방식. 예: <h1 style="color: red;">.
External CSS
별도의 .css 파일에 스타일을 작성하고 연결하는 방식.
Box Model
요소의 크기와 여백을 정의하는 모델로, margin, border, padding, content 포함.
Pseudo-class
특정 상태에만 스타일을 적용하는 클래스. 예: :hover, :focus.
Media Query
화면 크기나 장치에 따라 다른 스타일을 적용합니다. 예: @media
⚡ JavaScript: “집의 기능(생명)”
프로그래밍 언어: 웹페이지에 동적인 기능을 추가하는 스크립트 언어.
역할:
사용자와의 상호작용(클릭, 입력 등)을 처리.
애니메이션, 버튼 클릭 이벤트, 실시간 데이터 업데이트 구현.
특징:
프로그래밍 언어로서, 변수, 조건문, 반복문 등 로직 작성 가능.
예: 버튼을 클릭하면 알림을 띄우거나, 데이터를 실시간으로 갱신.
JavaScript는 집에 설치된 스마트 기능입니다. 버튼을 누르면 불이 켜지고, 센서가 동작해 문이 자동으로 열리는 것처럼 동작을 추가합니다. 예시로 사용자가 버튼을 누르면 팝업이 뜨거나, 이미지가 슬라이드로 전환되는 기능을 만듭니다.
JavaScript는 집에 생명을 불어넣는 요소입니다. 예를 들어, 버튼을 누르면 조명이 켜지거나, 음악이 재생되는 “스마트 홈”처럼 작동합니다. 웹 페이지로 적용하면, 웹페이지를 이동시키거나, 웹페이지 팝업창 및 이미지 슬라이드 등의 기능을 담당합니다.
document.querySelector('button'). : HTML 문서에서 <button> 요소를 선택합니다. 페이지에 있는 첫 번째 <button> 요소를 찾습니다.
addEventListener('click',: 선택된 버튼에 클릭 이벤트 리스너를 추가합니다. 사용자가 버튼을 클릭했을 때 특정 동작을 실행하도록 설정합니다.
() => { alert('문이 열렸습니다!'); }: : 버튼을 클릭하면 화살표 함수가 실행됩니다. 함수 내용은 alert('문이 열렸습니다!')로, 경고 창을 띄웁니다.
📖 JavaScript 주요 용어 목록
용어
설명
Variable
데이터를 저장하는 변수. var, let, const로 선언.
Function
코드 블록을 정의하고 재사용 가능하도록 만드는 함수. function 키워드로 작성.
Array
여러 데이터를 하나의 변수에 저장하는 리스트 형태. 예: [1, 2, 3].
Object
키-값 쌍으로 데이터를 저장하는 구조. 예: { key: "value" }.
Event
사용자 동작(클릭, 입력 등)에 반응하기 위해 발생하는 이벤트.
DOM
HTML 문서를 JavaScript로 조작할 수 있게 해주는 객체 모델(Document Object Model).
Callback
다른 함수에 인자로 전달되는 함수. 비동기 작업에서 자주 사용.
Promise
비동기 작업의 완료나 실패를 나타내는 객체. .then과 .catch로 처리.
Async/Await
비동기 작업을 동기 코드처럼 작성할 수 있게 도와주는 문법.
Loop
반복문으로 코드 블록을 여러 번 실행. 예: for, while.
Conditional
조건에 따라 다른 코드를 실행. 예: if, else, switch.
Scope
변수나 함수가 유효한 범위. Global과 Local로 구분.
Closure
함수가 자신이 선언된 환경(스코프)의 변수에 접근할 수 있는 특성.
API
응용 프로그램이 상호작용하기 위한 도구와 함수의 집합.
ES6
JavaScript의 최신 문법(ECMAScript 6). let, const, 화살표 함수 등이 포함.
Hoisting
변수나 함수 선언이 코드 상단으로 끌어올려지는 JavaScript의 동작 방식.
📡 API: 집의 외부 서비스 연결
기술 개념: 외부 서비스나 애플리케이션과 연결해 데이터를 주고받는 인터페이스.
역할:
외부 기능(날씨, 결제, 지도 등)을 호출해 가져오거나 데이터를 보냄.
개발자가 복잡한 기능을 직접 구현하지 않고도 외부 서비스를 활용 가능.
특징:
다른 서비스와 소통하기 위한 규칙과 도구.
예: PayPal API로 결제를 처리하거나, Google Maps API로 위치 정보를 표시.
API는 집 안에 설치된 배달 시스템이나 수도, 전기 같은 외부 서비스 연결입니다. PI는 웹사이트와 외부 서비스 간의 중개자 역할을 합니다. 집에서 음식 배달을 시키거나 외부 수도 서비스를 사용하려면 연결이 필요하듯, 웹사이트도 외부 데이터나 기능(API)을 가져오려면 연결해야 합니다.
예를 들어, 날씨 정보를 웹사이트에 표시하려면 외부 날씨 API를 사용합니다. API를 통해 여러분의 집(웹사이트)은 외부 세계와 상호작용할 수 있습니다!
fetch('https://api.weather.com/current?city=Seoul')
.then(response => response.json()) // 응답 데이터를 JSON으로 변환
.then(data => console.log(data)) // 결과 출력
.catch(error => console.error('Error:', error)); // 오류 처리
위의 api 호출 예시 작동 방식 순서는 아래와 같이 진행 됩니다.
1. fetch('https://api.weather.com/current?city=Seoul') : fetch 함수로 URL 요청을 보냄 → 서버에서 응답. (get 요청을 통해 데이터를 서버에 요청 하는 단계
2. then(response => response.json()) : 응답 데이터를 JSON으로 변환 (서버에서 변환된 응답은 response 객체로 전달되어, 응답이 온 데이터를 json 형식으로 변환. (JSON은 서버와 클라이언트 간 데이터를 주고받는 데 널리 사용되는 표준 형식입니다.response.json() 자체도 Promise를 반환하므로, JSON 데이터가 준비되면 다음 then으로 데이터를 전달합니다.)
3. .then(data => console.log(data)) : 변환된 데이터를 then으로 처리 → 콘솔에 출력. data는 response.json()으로 변환된 JSON 데이터를 의미합니다.이 데이터를 활용해 화면에 표시하거나 다른 작업을 수행할 수 있습니다.이 예시에서는 console.log(data)를 사용해 JSON 데이터를 브라우저 콘솔에 출력합니다.
4. .catch(error => console.error(‘Error:’, error));오류 발생 시 catch로 처리 네트워크 문제, 잘못된 URL, 또는 서버 응답 실패 등으로 인해 요청이 실패하면, catch 블록이 실행됩니다.error 객체에 오류 정보가 담겨 있으며, 이를 콘솔에 출력하거나 사용자에게 알릴 수 있습니다.
1. fetch 함수
설명: HTTP 요청을 보낼 때 사용하는 함수입니다.
역할:
https://api.weather.com/current?city=Seoul로 요청을 보내 서울 날씨 데이터를 서버에서 가져옵니다.
기본적으로 GET 요청을 수행하며, URL에 쿼리 파라미터를 포함해 데이터를 요청합니다.
fetch는 비동기 함수로, Promise 객체를 반환합니다.
GET 요청
설명: 데이터를 서버에서 가져오는 HTTP 요청 방식입니다.
역할:
서버의 리소스를 읽어오기 위해 사용되며, 데이터를 변경하지 않습니다.
URL에 쿼리 파라미터(?city=Seoul)를 포함해 요청을 세부적으로 지정합니다.
예: 웹페이지나 이미지 파일을 불러올 때 GET 요청이 사용됩니다.
then 메서드
설명: Promise가 성공적으로 해결된 후 실행됩니다.
역할:
이전 작업의 결과를 처리하며, 여러 then을 체인으로 연결해 작업을 순차적으로 실행할 수 있습니다.
예: 데이터를 변환하고 화면에 표시하는 작업 처리.
response.json() : response.json()은 Promise를 반환하며, 실제 데이터를 객체로 변환해 사용할 수 있도록 준비합니다.
설명: 서버에서 반환된 응답 데이터를 JSON 형식으로 파싱합니다.
역할: JSON(JavaScript Object Notation)은 서버와 클라이언트 간 데이터를 주고받는 데 널리 사용되는 형식입니다.
📖 API 주요 용어 목록
용어
설명
API (Application Programming Interface)
애플리케이션이 서로 통신하고 데이터를 주고받는 인터페이스.
Endpoint
API 요청을 받는 특정 URL. 예: https://api.example.com/data.
Request
클라이언트가 API에 데이터를 요청하는 작업. 예: GET, POST, PUT, DELETE.
Response
API가 요청에 대해 클라이언트에 보내는 데이터. 예: JSON 형식으로 반환.
HTTP Method
API 요청의 작업 유형을 정의. 예: GET(조회), POST(생성), PUT(수정), DELETE(삭제).
Status Code
요청 결과를 나타내는 HTTP 코드. 예: 200 OK, 404 Not Found, 500 Internal Server Error.
JSON (JavaScript Object Notation)
API 요청 및 응답 데이터의 일반적인 형식. 사람이 읽기 쉽고 기계가 처리하기 쉬움.
Header
요청과 응답에 포함된 메타데이터. 예: 인증 토큰, 콘텐츠 타입.
Query Parameter
URL에 포함된 추가 데이터. 예: ?key=value.
Authentication
API 접근 권한을 확인하는 과정. 예: API 키, OAuth.
Rate Limiting
일정 시간 내에 클라이언트가 보낼 수 있는 요청 수를 제한하는 메커니즘.
Webhook
특정 이벤트 발생 시 API가 클라이언트에 데이터를 푸시하는 방식.
REST (Representational State Transfer)
API 설계 아키텍처 스타일로, 리소스를 URL로 나타냄. RESTful API로 구현됨.
GraphQL
API를 위한 쿼리 언어. 필요한 데이터만 요청하고 받을 수 있음.
SDK (Software Development Kit)
특정 API를 쉽게 사용하도록 제공되는 라이브러리 및 도구 모음.
CORS (Cross-Origin Resource Sharing)
도메인 간 요청을 허용하거나 제한하는 보안 정책.
프로그래밍 언어 분류
HTML과 CSS: 기본적인 구조와 스타일
프로그래밍이라기보다는, 웹 콘텐츠를 설계하고 꾸미는 도구로 이해할 수 있습니다.
초보자도 쉽게 시작 가능하며, 웹 개발의 기초를 다질 수 있습니다.
JavaScript: 프로그래밍의 첫 단계
JavaScript는 웹을 동적으로 만드는 실제 프로그래밍 언어입니다.
조건문, 반복문, 함수 등 프로그래밍의 핵심 개념을 JavaScript에서 배우게 됩니다.
API: 고급 활용
프로그래밍 언어와 도구로 기본기를 다진 후, API를 활용해 외부 서비스와 연결하는 기술을 익힙니다.
이는 실제 서비스 개발 단계에서 많이 활용됩니다.
어떻게 배우면 좋을까?
기초부터 차근차근:
HTML → CSS → JavaScript 순으로 학습.
각각의 역할과 기능을 이해하며, 간단한 웹페이지부터 만들어봅니다.
실습과 프로젝트:
간단한 HTML, CSS로 정적인 페이지를 만들고, JavaScript로 동작을 추가.
API를 활용해 실시간 데이터(예: 날씨 정보) 표시 같은 프로젝트를 시도.
단계적 확장:
초보 단계에서 HTML, CSS, JavaScript를 배우고, 점점 API, 서버 개발, 데이터베이스로 확장.
결론
도메인과 호스팅은 웹사이트를 인터넷에서 사용할 수 있도록 하는 필수 개념입니다. 호스팅과 도메인을 설정하고, HTML, CSS, JavaScript 로 웹 개발의 시작점이 됩니다. 기초를 탄탄히 다지면서, 실제 프로젝트를 통해 학습하면 더 효과적으로 이해할 수 있습니다!
