안녕하세요!
코딩을 처음 해보시는 초보자 여러분들을 위한 HTML 강의에 오신 것을 정말 반갑습니다. 다 함께 주니어 개발자가 되는 첫걸음을 같이 해봐요! 오늘은 HTML의 기초에 대해 알아보도록 하겠습니다. HTML은 웹 페이지를 만들기 위한 언어인데요, 정말 쉽고 재미있는 거예요. 그러니까 여러분들도 설레시죠? 그럼 시작해 볼까요?
HTML이란?
HTML은 HyperText Markup Language의 약자입니다. 웹 페이지를 만들기 위해 사용하는 기본 언어라고 생각하시면 됩니다. HTML을 사용하면 웹 브라우저가 이해할 수 있는 형식으로 웹 페이지의 내용을 작성할 수 있어요. 그래서 텍스트, 이미지, 링크, 동영상 등을 웹 페이지에 추가할 수 있는 거죠.
HTML 태그
HTML을 배우기 위해 먼저 알아야 할 것은 '태그'라고 부르는 것입니다. 태그는 꺾쇠괄호로 둘러싸인 단어들이에요. 예를 들면 <html>이라는 태그가 있을 수 있어요. 이 태그들은 웹 브라우저에게 어떤 내용이 있는지 알려주는 역할을 하거든요. 대부분의 태그는 열리는 태그와 닫히는 태그로 이루어져 있답니다. 열리는 태그는 <로 시작하고, 닫히는 태그는 </로 시작하는 거예요.
예를 들어, 웹 페이지의 시작을 알리기 위해 <html>과 </html> 태그를 사용할 수 있어요. <head>와 </head> 태그는 웹 페이지의 제목이나 스타일 시트와 같은 추가 정보를 담는 데 사용됩니다. 그리고 <body>와 </body> 태그는 실제 웹 페이지의 내용을 담고 있답니다.
개발 환경을 컴퓨터에 아직 구축하지 않으셨다면 부트캠프 주니어 0강 - 개발 환경 준비를 참고해 주세요. 우리에게 필요한 VS Code와 VS Code 익스텐션을 꼭 설치해주셔야 합니다.
자, 이제 실제로 HTML을 작성해 보겠습니다. 일단 컴퓨터에 폴더를 하나 생성해 줍니다. "Dev" 혹은 "Lecture" 폴더를 컴퓨터에 만들고 VS Code를 열어 폴더를 끌어 넣으면 다음과 같이 VS Code에서 폴더를 열 수 있어요.
이제부터 여기 안에 강의내용을 정리할 텐데요. Dev (폴더 이름) 오른쪽 편에 두 번째 아이콘을 누르면 새로운 폴더를 만들 수 있습니다. 새로운 폴더 이름을 "주니어강의 1"로 해주시고 생성해 주세요. 그 후 폴더에 오른쪽 마우스 클릭을 하셔서 새로운 파일 index.html을 만들어 봅니다. 아래와 같이 보이게 폴더와 파일을 생성해 주세요.
자 이제 준비가 다 됐으니 아래 예제를 `index.html`안에 따라 해 보세요. 복사/붙어 넣기를 절~대! 하시지 말고 직접 적어보는 게 중요합니다!
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>HTML을 배우는 것은 정말로 재미있어요!</p>
</body>
</html>
위의 코드는 간단한 HTML 페이지입니다. 페이지의 제목은 <title> 태그 안에 작성하고, 본문의 제목은 <h1> 태그로, 본문의 내용은 <p> 태그로 작성됩니다.
이제 위 예제를 직접 웹 페이지로 볼 수 있어야겠죠? index.html를 마우스 오른쪽 클릭하면 다음과 같이 "Open with Live Server"가 뜹니다. 혹시 뜨지 않는 부트캠프 주니어 0강 - 개발 환경 준비를 참고해 주세요.
"Open with Live Server"를 누르면 자동으로 크롬이나 기본 설정으로 되어있는 웹 브라우저가 자동으로 열립니다. 짜잔! 우리의 첫 웹페이지가 뜨네요! Live Server에서 파일을 열게 되면 굳이 새로고침을 할 필요 없이 파일이 편집되고 저장될 때마다 자동으로 새로고침이 됩니다. 예를 들어 "안녕하세요!"를 "나의 첫 웹 페이지"로 바꾸고 저장을 하면 바로 웹브라우저에서 바뀐 페이지를 볼 수 있죠!
HTML 태그의 종류는 굉장히 많지만 실제로 자주 쓰이는 건 20-30가지 이내이기 때문에 모든 것을 다 외울 필요는 없어요. 코딩은 무조건 따라 하고 많이 써보는 것에서 익숙해지는 것이지 이해하고 외운다고 더 빨리 배우는 것은 아닙니다!
다음 강의에서는 더 많은 HTML 태그와 기능에 대해 알려드릴게요. 그럼 다음 시간에 봐요!
'<부트캠프_주니어>' 카테고리의 다른 글
| 부트캠프 주니어 4강 - CSS 스타일링 (0) | 2023.06.27 |
|---|---|
| 부트캠프 주니어 3강 - Form (폼) (0) | 2023.06.23 |
| 부트캠프 주니어 2강 - HTML 태그 활용 (0) | 2023.06.23 |
| 부트캠프 주니어 0강 - 개발 환경 준비 (0) | 2023.06.23 |
