본문 바로가기

옛글/프론트 이야기

[쉬운HTML] 첫번째 시간 - HTML 맛보기

반응형
 

HTML 은 뭘까요?
Hyper Text Markup Launguage 라는 뭐 어려운 스펠링은 접어두더라도,
HTML 은 인터넷상에서 표현을 하기 위한 언어입니다. 무엇이든 자신이 표현하려는 걸 인터넷이라는 웹상에서 표현을 하기 위해선 언어라는 것으로 표현을 해야 하는데 그 중 가장 간단한 언어이자 기본이 되는 언어 HTML 이죠.

이 언어는 드림위버, 익스프레션 웹 등으로도 가능하지만 간단하게 노트패드로도 작성이 가능합니다.

그렇다면 CSS는 무엇일까요?
HTML 이란 표현의 속성에서 표현할 이미지, 테이블, 등 모든 표현하고자 하는 것들의 속성을 일일이 정해주자면 굉장히 불편하고 껄끄럽겠죠. 때문에 CSS파일을 만들어서 참조를 시키고 CSS파일에서 각 표현하고자 하는 것들에 이름을 정해주기만하면 간단하게 속성을 정해줄수가 있게됩니다^^

공부하기에 굉장히 좋은 사이트가 있어 참조시켜드립니다. http://htmltutor.co.kr/ 

간단하게 HTML 소스들은

<head>와 <body>로 나뉩니다.

헤더부분은 웹브라우저에서 어떠한 .html 파일을 불러올 때 어떤 식으로 해석할지 이 웹페이지는 어떠하게 해석해달라고 말을 하기 위한 부분입니다.

바디부분은 표현하고자 하는 부분입니다. 본문이라고 생각하시면 되겠네요.

조금 더 세세하게 들어가 보면,

태그가 있습니다. 태그랑 <> 요렇게 생긴 부분이 태그입니다. 이것이 마크업입니다. 이런 것들이 모여서 표현이 되는 거에요.
그리고 그 태그에는 속성이 있습니다.
<image> 라는 이미지 표현 태그가 있습니다. 그리고 이 이미지 표현태그의 속성은 <image 속성이 들어갈 부분>
으로 속성이 들어갈 부분에 속성이 들어가게 됩니다. 예를 들어
<image src(주소)> <image width(가로크기)> 등 image 태그의 속성들을 정해줄 수가 있습니다.
<font> <table> 등도 똑같습니다^^

생각보다 쉽죠?

또하나 중요한 점은 태그는 열리면 닫혀야 합니다.
<tr>로 테이블 로우를 만들었으면 꼭 </tr>로 닫아야 태그가 성공하게 됩니다.

흠 예를 들면
<a href="링크걸 주소"> <~요렇게 생긴 링크를 걸 태그를 건다면 웹페이지는 어디서부터 어디까지 저 링크를 걸어야 할지 모릅니다. 때문에 </a> 로 닫아주어야 해요

정리해보자면

<a href="링크걸 주소">  여기에 링크가 걸릴거에요 여기는 이미지도 들어갈수도 있고 글도 들어갈수 있어요 </a>
라고 적으면 </a> 라고 적어주어서 링크걸 곳이 어디인지 정확히 찝어줄수가 있겠죠?^^













반응형