html 공부 어렵게 느껴지시나요?! 전혀 어렵지 않습니다! 저도 30분 만에 공부 끝냈습니다.
프로그래밍 언어라고 해서 어려울 것 같지만 초보자도 30분이면 알 수 있기 때문에 부담가지지 마시고, 한번 배워보시기 바랍니다. 오늘부터 html 강좌를 올려보도록 할텐데요. 도움이 되시길 바랍니다. 오늘은 html 강좌 첫시간입니다.
30분만에 html 공부 끝내기 강좌 1부 - 기본 문법 이해
강의에 앞서 html 에 대해 조금 이해해보도록 할게요. html을 배우기 위해서는 웹의 흐름을 알아야 하기 때문입니다.
html은 무엇일까요?>
html은 hyper Text Markup language 의 약자입니다.
hyper text : 하이퍼텍스트를 가장 중요한 특징으로 하는 링크기능.
Markup : 마크업이라는 형식을 가진.
Language : 컴퓨터 프로그래밍 언어.
연결하자면 하이퍼텍스트를 가장 중요한 특징으로 하는 링크기능으로 마크업 형식의 컴퓨터 프로그래밍 언어입니다.
html 은 사람과 기계가 소통하기 위한 약속된 언어입니다.
컴퓨터를 제어하고자 한다면 컴퓨터 언어를 통해 해야하지요.
즉, html은 웹페이지를 만들어달라고 컴퓨터에게 요청하는 프로그래밍 언어입니다.
웹브라우저에게 명령을 할 수도 있고 나와 컴퓨터가 서로 이해할 수 있는 언이이죠.
그럼 이제 html 기본 문법을 이해해보도록 하겠습니다.
기본 문법을 정확하게 이해하면 html을 30분 만에 마스터할 수 있으며 가장 중요한 핵심이라고 할 수 있습니다.
또, html을 배우다 보면 어느새인가 개발자가 되어 있는 자신을 발견할 수 있을 거예요.
html 기본 문법>
웹프로그래밍의 시작은 언제나 html로 시작됩니다.
특히 html 태그는 가장 중요합니다!
오늘은 가장 기초적인 문법을 예시를 통해 배워보도록 할게요.
예시를 몇번 해보면 html 금방 배울 수 있습니다.
우선, 윈도우에 메모장을 띄워주세요.
그리고 메모장에 아무 문장이나 한줄 써 보세요.
<예시 1>
저는 위와 같이 "안녕하세요. 필투스의 소프트웨어 세상입니다. (필투스의 블로그)" 라고 메모장에 써 보았습니다.
그리고 웹에서 읽어들일 수 있는 웹문서로 저장해 주셔야 하는데요.
1) 바탕화면에 폴더를 하나 만들어 주세요.
2) 폴더에 파일을 저장합니다.
3) 저정할때 파일이름은 테스트1. html, 파일 형식은 모든 파일, 인코딩은 UTF-8 로 지정하신 후 저장해주세요.
*파일이름끝에 확장자를 꼭 html로 지정해주셔야 합니다. 확장자를 html로 지정해주시않으면 일반 text 문서로 저장됩니다. 파일형식도 모든 파일로 지정하지 않으면 웹에서 읽을 수 없습니다.
문서를 저장하셨다면 이제 웹상에서 파일을 불러오기해봅니다. 파일을 클릭해서 열어도 되고요.
인터넷 브라우저를 열어서 파일>열기>찾아보기를 통해 열어도 됩니다.
위와 같이 웹브라우저창에 html 파일이 열리는 것이 확인됩니다.
이번에는 메모장으로 돌아가 단어강조를 해보도록 하겠습니다.
강조태그는 <strong> 입니다.
태그는 슬래시 없는 태그로 시작해 슬래쉬 있는 태그로 끝납니다.
즉, 슬래시 없는 태그는 시작 태그이며 슬래시 있는 태그는 닫히는 태그입니다.
위와 같이 강조하고 싶은 문구의 앞쪽에 <strong>을 넣고 맨끝에 </strong> 을 넣어줌으로써 닫아줍니다.
저장하고 결과값을 보겠습니다.
인터넷 창을 새로고침해보면 위와 같이 필투스의 소프트웨어 세상이 강조된 것을 확인할 수 있습니다.
<예시 2>
이번에는 대제목과 소제목을 지정해 보겠습니다.
대제목 태그는 <h1>입니다. 제목끝에는 꼭 닫히는 태그</h1>을 넣어줘야 컴퓨터가 정상적으로 읽어들입니다.
소제목 태그는 <h2> 입니다. 제목끝에는 닫히는 태그 </h2>를 넣어줍니다.
이제 저장 후 결과값을 보기 위해 인터넷 창을 새로고침 해보겠습니다.
위와 같이 대제목과 소제목이 정상적으로 표시된 것을 확인할 수 있습니다.
오늘 예시를 정리하자면, 컴퓨터 언어는
어떤 문자를 강조하고 싶다면 <strong>태그를 사용하고,
제목을 지정할때는 h1, h2, h3등의 h태그를 사용하도록
약속되어 있다는 것입니다.
때문에 이 약속에 따라서 html 코드를 작성하고
웹브라우저에게 제공하면 원하는 페이지를 만들 수 있는 것입니다!
html 코드를 작성하는 것이 어렵게 느껴지시나요?
절대 어렵지 않습니다.
html 코드를 다 외울 필요도 없습니다.
내가 원하는 코드의 소스를 복사해서 문장만 바꾸면 됩니다.
혹은 이 코드가 무엇인지 궁금하면 그때그때 인터넷에서 검색하면
수십만건의 문서들이 친절하게 답을 가르켜 줍니다.
어떤 원리로 짜여진 것인지만 알면 세세한 부분은 답을 금방 찾을 수 있다는 것이죠.
여기까지 기본 문법 이해강좌였습니다.
어떠셨나요? 어려우신가요? 일단 예시를 한번 따라해 보면 쉽게 이해할 수 있을거예요.
다음 시간에는 하이퍼텍스트와 속성에 관해 알아보도록 하겠습니다.
