HTML 기본 태그와 문서 구조 01

HTML 기본 태그와 문서 구조

 웹프로그래밍이라고 하면 보통 html과 css를 사용해서 하게됩니다.

1학년 때 공부했었지만 군대다녀오니 까먹었고 css는 맛도 못보고 끝나버려서 다시 수강하게되었네요.

블로그를 하며 많이 봐왔던게 html이고 배워두면 확실히 쓸일이 많기 때문에 학습시작합니다.

(cf. 학습으로 사용되는 기본교재는 HTML&CSSforBeginner(ISBN:979-11-5664-279-4(93000)을 사용함.)

이번 포스팅에서는 html의 기본적인 태그와 문서구조를 알아보겠습니다.

 가장 먼저보이는 !DOCTYPE 이 녀석은 html문서 버전을 알려줍니다.

맨위에 저런 코드를 입력해두면 아 이게 html5로 작성된 문서구나 하고 컴퓨터가 알아먹는겁니다.

앞으로 공부하게될 것도 html5이니 자주 보게되겠죠.

 그 다음 html태그입니다. 맨위에 보시다시피 html은 시작과 그 끝에 하나 씩 있습니다.

이와 같이 태그를 열었으면 '/'를 붙여서 태그를 닫아주는 태그가 필요합니다.

이 것은 문서의 시작하는 부분과 끝나는 부분을 알려줍니다.

자 이제 body태그입니다. 바디 몸이죠 말그대로입니다.

우리가 인터넷을 하면 먼저보이는게 페이지(몸체) 인데 이거라고 보시면되겠습니다.

 그다음 대가리태그 아니 head태그입니다.

이건 맨위사진에 있는 html코드에서 보이듯이 시작과 동시에 문서에서 필요한 것이나 기능 등을 설정할 때 사용합니다.

그런 기능들은 title, meta, link, style, script 등 태그가 있습니다.

 비주얼스튜디오에서 쳐보며 알게된 것은 바로 head요소에는 title요소가 한번 이상 포함되어야 한다는 것입니다.

물론 없어도 정상 실행은 가능했지만, 포함시켜주는 것이 좋겠죠?

아마 제목없는 책이 없는 것과 동일한 이치가 아닐까 싶습니다.

 그래서 이렇게 title태그를 넣어서 제목을 설정해 주었습니다.

크롬을 예시로 하면 상단탭에 보이는 것이 바로 제목입니다.

왜 제목이없는 웹페이지가 이상한지 바로 알 수 있겠죠?`

 자 이렇게 해서 html태그 그리고 문서구조의 기본적인 것을 알아보았습니다.

기본이 중요한 법이니 알고있어도 한 번 보고 넘어가도록해요.

그럼 다음 강의(?) 아니 다음 글에서 다시 찾아 뵙도록하겠습니다.

 참고로, 결과는 아래와 같이 표시됩니다.

▶엑셀 2010 체험판 무료설치 다운로드 쉽다

▶오버워치 렉줄이는법 4가지 비밀

▶크롬 마우스 우클릭 해제 간단한 방법 (확장프로그램 이용)