💻 HTML 코딩을 위한 환경 세팅: Notepad++ 다운로드부터 시작!
안녕하세요! 노코딩입니다 😊
이번 글에서는 HTML 코딩을 하기 위한 가장 기본적인 환경 세팅부터 시작해볼 거예요. 준비물은 아주 간단합니다. 바로 **Notepad++**라는 무료 프로그램을 설치하는 것부터 시작할 거예요!
1. Notepad++ 설치 방법
**Notepad++**는 아주 가볍고 사용하기 쉬운 코딩 에디터입니다. 게다가 무료예요! 한 번 따라해 보세요:
- Notepad++ 다운로드 페이지로 이동하세요: https://notepad-plus-plus.org/downloads/v8.6.7/
- [ DOWNLOAD ] 버튼을 클릭하세요.
- 설치 파일을 실행하고, "다음" 버튼을 계속 눌러가며 설치를 완료하세요.
이제 설치가 끝났습니다! 정말 간단하죠? 😄
사진을 참고해서 천천히 따라해보세요!
2. HTML이 뭐예요?
HTML은 웹 페이지를 만드는 언어예요. 우리가 인터넷에서 보는 텍스트, 이미지, 버튼 같은 것들이 HTML로 만들어져요. 쉽게 말하면, HTML은 웹 페이지의 '틀'을 만드는 역할을 해요.
3. HTML을 왜 배우는 거예요?
HTML은 웹 페이지를 만들 때 가장 기본이 되는 언어예요. 인터넷에서 우리가 보는 모든 웹 페이지는 HTML로 만들어져 있어요. 그래서 다른 복잡한 코딩을 배우기 전에 HTML부터 배우는 게 좋아요. 쉽고 간단해서 누구나 금방 배울 수 있어요!
4. HTML의 기본 구조는 어떻게 생겼나요?
HTML은 집을 짓는 것과 비슷해요! 집을 짓기 위해서 뼈대가 필요하잖아요? HTML도 똑같아요. HTML로 웹 페이지를 만들 때, 모든 웹 페이지는 아래처럼 뼈대를 가지고 있어요.
<!DOCTYPE html>
<html>
<head>
<title>내 첫 번째 웹페이지</title>
</head>
<body>
<h1>안녕하세요, 여기는 제목입니다!</h1>
<p>여기는 본문입니다. HTML 배우기 정말 쉽죠?</p>
</body>
</html>이 코드에서 중요한 부분은:
- <html>: 이 부분은 웹 페이지가 시작하고 끝나는 부분이에요. 모든 HTML 코드는 이 안에 들어가요.
- <head>: 여기는 웹 페이지의 정보가 들어가는 부분이에요. 제목 같은 정보가 여기에 있어요.
- <body>: 여기는 실제로 화면에 보이는 내용들이 들어가는 곳이에요. 제목이나 본문처럼 우리가 눈으로 볼 수 있는 부분이 여기 있어요.
5. 한 번 직접 해볼까요?
이제 **Notepad++**를 열고, 위에 있는 HTML 코드를 직접 입력해보세요! 입력이 끝나면 **"파일 → 다른 이름으로 저장"**을 선택하고, 파일 이름을 **index.html**로 저장한 다음, 브라우저에서 열어보세요.
브라우저에 "안녕하세요, 여기는 제목입니다!"라는 글씨가 나오면 성공입니다! 😄 정말 쉽죠?
사진을 참고해서 천천히 따라해보세요!
- Ctrl+N 또는 상단 메뉴에 파일>새 파일로 파일 생성
2. 4번의 코드들을 복사+붙여넣기 !
3. Ctrls+S(저장 단축키)로 저장 후 파일 이름을 [ index.html ]로 저장해주세요!
뒤에[ . html ] 로 저장을 해야, 이 파일이 html 파일이라고 컴퓨터가 인식을 합니다!
파일 형식은 그래도 .txt로 해도 무관해요.
4. 그렇게 된다면 notepad의 코드들도 이쁘게 변합니다! 이렇게 되면 성공입니다!
5. 저장한 폴더로 가서.. index.html을 클릭한다면?
(파일의 아이콘은 어떤 형태든 상관 없어요.)
6. 성공적으로 첫번째 웹 페이지를 만들 수 있습니다! 생각보다 html 코딩 별 거 없죠?
마무리
이번 글에서는 HTML 코딩을 위한 환경 설정 홈페이지를 직접 만들어보며 HTML의 기본 개념을 아주 쉽게 설명해봤어요.
앞으로도 계속해서 HTML 코딩을 배우고, 웹 페이지를 직접 만들어보면서 조금씩 성장할 수 있을 거예요!
다음 글에서는 HTML 태그들을 더 자세히 알아볼 거니까, 기대해 주세요!
지금은 보시는 분도 적고 댓글도 적지만, 제가 만약 유명해진다면
여러분은 "나 이때부터 이 사람 알았다"라고 자랑하실 수 있을 거예요!
지금부터라도 좋아요와 댓글 많이 남겨주시면, 한 분 한 분 전부 기억하겠습니다!
여러분과 함께 성장하고 싶어요😊
어떠한 경로로 들어왔든 이 글을 본 모두는 하루의 시작, 중간, 마무리일 텐데 행복하셨으면 좋겠습니다! 😊
감사합니다!
'IT > 프로그래밍' 카테고리의 다른 글
| HTML에서 Class와 ID 구분자에 대해 완벽 정리 – 차이점과 사용법 이해하기 (0) | 2024.10.23 |
|---|---|
| HTML 태그 정리 – 이해하고 활용하기 (2) | 2024.10.23 |
| 게시판 기본 틀 만들기 – HTML과 CSS의 기초부터 시작해요! (1) | 2024.10.23 |
| 개발자 취업? 프로그래밍 몰라도 이 블로그만 보면 OK!🔥 (13) | 2024.10.21 |
