HTML 언어가 프로그램 언어라고 할 수 없을 정도로 이 쪽 계통에서는 제일 쉬운 언어라고 합니다. 그렇지만 당연히 처음 접하는 사람들은 어려울 수 밖에 없는데요. 저도 처음에는 보기만 해도 어질어질 했습니다. 지금은 약간 기본적인 뜻을 알고 있고 마케터로서 부끄럽지만 약간 응용하는 정도만 알고 있는 수준인데요.
뭐든지 기초가 제일 중요한 것 같습니다. 문장을 구성하는 단어 하나하나의 뜻풀이를 명확하게 알고 접근해야 그 단어와 기호들이 수행하는 기능을 알 수 있겠죠. 그래서 저도 다시 복습하고 뜯어볼 겸 HTML 용어의 기본 개념과 뜻풀이, 구조 형식을 알아보겠습니다. 나름 '초등학생도 알 수 있을 정도로' 설명된 내용입니다. (사실 요즘 초등학생들 만만치 않아서 저보다 훨씬 잘 알고 있을지도 모르겠네요. ㅡㅡ)
HTML 기초 - 기본 개념 이해하기
HTML을 처음 배우려면 다음 단계를 따라가면 좋습니다.
HTML(하이퍼텍스트 마크업 언어)은 웹 페이지의 구조를 정의하는 언어입니다. HTML은 요소(Element)들로 구성되며, 각 요소는 태그(Tag)로 둘러싸여 있습니다.
1. 필수 도구 준비하기
- 텍스트 에디터. Notepad++, Sublime Text, Visual Studio Code 등
- 웹 브라우저. Google Chrome, Mozilla Firefox 등
2. 기본 문서 구조 익히기
HTML 문서는 기본적으로 아래와 같은 구조를 가집니다.
html
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요, HTML!</h1>
<p>이것은 단락입니다.</p>
</body>
</html>
3. 주요 태그 학습하기
몇 가지 기본 태그부터 시작해보세요.
- 제목 태그. `<h1>`에서 `<h6>`까지, 제목의 크기를 나타냅니다.
- 단락 태그. `<p>`, 텍스트 단락을 만듭니다.
- 링크 태그. `<a href="URL">텍스트</a>`, 하이퍼링크를 만듭니다.
- 이미지 태그. `<img src="이미지 주소" alt="이미지 설명">`, 이미지를 삽입합니다.
- 목록 태그. 순서 없는 목록(`<ul>`), 순서 있는 목록(`<ol>`), 항목(`<li>`).
4. 연습 프로젝트
작은 프로젝트를 만들어 실습해보세요.
- 자기소개 페이지 만들기
- 좋아하는 음식 목록 만들기
- 간단한 포트폴리오 페이지 만들기
5. 온라인 학습 리소스 활용하기
몇 가지 추천 리소스입니다.
- [W3Schools HTML Tutorial](https.//http://www.w3schools.com/html/)
- [MDN Web Docs HTML](https.//developer.mozilla.org/ko/docs/Web/HTML)
- [Codecademy HTML Course](https.//http://www.codecademy.com/learn/learn-html)
6. 연습 및 복습
- 자주 코딩해보면서 익숙해지세요.
- 다른 웹 페이지의 소스를 분석해보세요.
Catalog Home | Codecademy
If you’re not sure where to begin or what to learn next, this is a great place to start. Check out our top coding courses, Skill Paths, and Career Paths.
www.codecademy.com
HTML은 웹 개발의 기본이 되며, 이를 탄탄하게 이해하면 CSS와 JavaScript 같은 더 복잡한 기술도 쉽게 배울 수 있습니다.
HTML 기본 용어와 작동 원리
1. HTML (HyperText Markup Language)
- 뜻. 웹 페이지를 만드는 언어예요.
- 작동 원리. 글자를 정해진 모양으로 꾸며서 웹 페이지에 표시해요.
2. 태그 (Tag)
- 뜻. 글자를 꾸미거나 다른 기능을 하는 특별한 코드예요.
- 작동 원리. `<`와 `>` 사이에 이름을 써서 만들고, 닫을 때는 `</`와 `>`를 사용해요.
3. 요소 (Element)
- 뜻. 태그와 그 안에 있는 내용까지를 합친 거예요.
- 작동 원리. `<태그>내용</태그>` 형태로, 태그로 감싸진 모든 것을 요소라고 해요.
중요한 태그들
1. <!DOCTYPE html>
- 뜻. 이 문서가 HTML5로 작성되었음을 알려주는 태그예요.
- 작동 원리. 웹 브라우저에게 이 문서가 최신 HTML 규칙을 따르고 있다는 것을 알려줘요.
2. <html>
- 뜻. HTML 문서의 시작과 끝을 나타내는 태그예요.
- 작동 원리. 문서 전체를 감싸서 HTML 문서라는 것을 알려줘요.
3. <head>
- 뜻. 문서에 대한 정보를 담는 부분이에요.
- 작동 원리. 제목, 스타일, 스크립트 등 눈에 보이지 않는 정보를 담아요.
4. <title>
- 뜻. 웹 페이지의 제목을 정하는 태그예요.
- 작동 원리. 브라우저의 탭이나 창 제목으로 보여요.
html
<title>내 첫 번째 웹 페이지</title>
5. <body>
- 뜻. 실제 웹 페이지 내용이 들어가는 부분이에요.
- 작동 원리. 화면에 보이는 모든 콘텐츠가 여기 들어가요.
6. <h1>
- 뜻. 큰 제목을 나타내는 태그예요.
- 작동 원리. 가장 중요한 제목으로, 글씨가 크게 보여요.
html
<h1>안녕하세요!</h1>
7. <p>
- 뜻. 단락을 나타내는 태그예요.
- 작동 원리. 글을 단락으로 나눠줘요.
html
<p>이것은 첫 번째 단락입니다.</p>
8. <a>
- 뜻. 링크를 만드는 태그예요.
- 작동 원리. 클릭하면 다른 페이지로 이동하게 해줘요.
html
<a href="https.//http://www.example.com">여기를 클릭하세요</a>
9. <img>
- 뜻. 이미지를 삽입하는 태그예요.
- 작동 원리. 웹 페이지에 이미지를 보여줘요.
html
<img src="image.jpg" alt="설명">
10. <ul>, <ol>, <li>
- 뜻. 목록을 만드는 태그들이에요.
- `<ul>`. 순서 없는 목록 (동그라미 목록)
- `<ol>`. 순서 있는 목록 (숫자 목록)
- `<li>`. 목록의 항목
- 작동 원리. 목록을 만들 때 사용해요.
html
<ul>
<li>사과</li>
<li>바나나</li>
</ul>
11. <br>
- 뜻. 줄 바꿈을 하는 태그예요.
- 작동 원리. 글을 다음 줄로 넘겨줘요.
html
안녕하세요!<br>여기는 줄 바꿈 예제입니다.
12. <div>
- 뜻. 구역을 나누는 태그예요.
- 작동 원리. 여러 요소를 그룹으로 묶어줘요.
html
<div>
<h1>제목</h1>
<p>내용</p>
</div>
13. <span>
- 뜻. 짧은 구역을 나누는 태그예요.
- 작동 원리. 글의 일부분을 꾸밀 때 사용해요.
html
<p>여기 <span style="color. red;">빨간색</span> 글씨가 있습니다.</p>
이렇게 HTML의 기본 용어와 그 작동 원리를 알아봤습니다. HTML은 웹 페이지를 만들 때 사용하는 중요한 언어이니까, 많이 연습해보면 금방 익숙해질 것입니다.
저도 다시 배운다는 생각으로 임하고 있습니다. 티스토리를 운영하면서 점점 활용 많이 해야 하는데... 직장 일하면서 교육이나 광고 부업도 하면서 집에서 일주일에 3~4편 밤늦게 써서 예약 포스팅으로 걸어놓고... 힘들어 죽겠습니다. 천천히 장기적으로 가죠. 요즘 조회수가 총체적으로는 여전히 미미하지만 급 늘어나는 추이라 기분이 좋습니다. 이게 돈은 안되어도 조회가 늘어나는 것을 보는 보람이 확실히 있네요.
'IT 기기, 인터넷 정보' 카테고리의 다른 글
| 구글 애드센스 페이지 RPM 향상 관련 정보 + 운영 10개월 차 솔직 후기 (0) | 2024.10.02 |
|---|---|
| 쏘카 어플 솔직한 이용 후기와 불편한 점, 유의 사항 (0) | 2024.09.05 |
| 쉽게 누끼 따는 방법 이미지 배경 제거 사이트 tool (0) | 2024.08.02 |
| 컨텐츠베이 이력서 레포트 등 유통 거래 플랫폼 성장 가능성 (0) | 2024.07.30 |
| pubmed : 의학, 생명과학 전문 학술 자료 논문 검색 사이트 활용법 (0) | 2024.07.11 |
