HTML 코딩의 기초
HTML 코딩은 일반적으로 많이 알려져 있고, 많은 개발도구들이 나와서 어렵지 않게 익힐 수 있습니다.
기본적인 HTML의 구조는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>문서의 제목 들어가는 곳</title>
</head>
<body>
</body>
</html>
HTML 코드는 <body></body> 사이에서 작성을 하게 됩니다.
<head></head> 사이에는 필요한 정보를 넣거나 자바스크립트와 CSS 구문들이 들어가게 됩니다.
HTML 의 문법 구조는 아주 단순하며, 누구나 익힐 수 있습니다.
인터넷에서 HTML 태그라고 검색하셔도 많은 사이트들이 있고, 하루 정도만 시간투자를 하시면 대충 이해할 수 있습니다.
심지어 요즘 나오는 WISWIG 에디터를 사용하게 되면 아무런 문법적 지식이 없더라도 누구나 사이트를 만들 수 있습니다.
여기서는 HTML의 구문을 하나씩 설명하진 않겠습니다.
일단 HTML의 기본적인 문법은 알고 있다는 전재로 설명을 하도록 하겠습니다.
또 하나 명심할 것은 HTML 코드를 작성할 때 문법의 시작이 있으면 반드시 끝도 있어야 하는 것을 명심해야 합니다.
몇몇 문법은 단독으로 쓰이기 때문에 항상 마지막에 마지막을 나타내는 “/” 를 첨부해야 합니다.
HTML 4 에서는 <br> <p> <li> 태그들은 시작만 있어도 작동을 했습니다. 물론 지금도 모든 브라우저에서는 이 태그를 닫지 않더라고 인식은 합니다만, 웹 표준하에선 반드시 모든 태그는 닫아줘야 합니다.
<br> 인 경우는 <br />, <p> 인 경우 마지막에 </P> <li> 태그는 </li>로 끝 맺음을 해야 문법적으로 오류가 생기질 않습니다.
또한 이미지를 나타나게 해주는 태그인 <img> 태그도 반드시 끝을 닫아줘야 합니다. <img src=”이미지 경로 “ /> 이렇게 사용해야 하는 것입니다.
즉 모든 태그는 시작과 끝이 있다는 것을 명심하고, 단독으로 쓰이는 태그인 경우에도 마지막에 / 을 붙여야 하는 것을 명심하시면 됩니다.
CSS를 사용하지 않고서 HTML 만으로 사이트를 만들 경우에는 HTML 자체에서 문서의 속성을 정의해 주는 태그를 많이 사용했습니다.
예를 들어 글자 색이나 두께 크기를 정의해 주는 <font> 태그는 CSS를 이용하게 되면 사용빈도가 거의 없어지게 됩니다.
<font size=”2” color=”red” face=”굴림” > 폰트 사이즈 지정 </font>
예전에는 이렇게 직접 각 HTML의 구성 요소에 직접 적용을 했었습니다.
이런 방식의 문제는 문서가 몇 개 안되면 직접 하나씩 수정을 해 줄 수 있었습니다만, 문서가 점점 늘어나기 시작하면 문서를 일일이 열어 작업을 할 때 엄청난 시간이 소요되게 됩니다.
CSS를 이용하게 되면 다음과 같이 바꿀 수 있습니다.
CSS에서 .fsize2라고 지정
.fsize2 {
font-size:12px;
color:red;
font-family:굴림;
}
HTML코드내에서 CSS 지정
<span class=”fsize2”> 폰트 사이즈 지정 </span>
이렇게 적용을 하게 되면 만약 글자 색을 다른 색으로 변경할 때 .fsize2 에서의 color 부분만 색을 변경해 주면 .fsize2 로 지정한 모든 부분은 색이 변경되게 됩니다.
CSS와 HTML 코딩을 최적의 상태로 유지하게 되면 사이트의 유지보수 뿐만 아니라 문서자체도 굉장히 가벼워 집니다.
처음과 같이 일일이 모든 글자에 색을 지정해 주고 사이즈를 지정해 주게 되면 코드의 길이도 엄청나게 될 뿐만 아니라 문서 자체도 무거워져서 사이트가 느려지게 되는 원인이 됩니다.
하지만 CSS로 디자인 부분을 분리시켜주면 HTML 문서 자체도 가벼워질 뿐만 아니라 사이트 유지보수 시에도 엄청 편리하게 됩니다.
'웹 & IT > 웹표준 HTML, CSS & PHOTOSHOP' 카테고리의 다른 글
| 세부 HTML코딩 (2) | 2010.11.30 |
|---|---|
| 사이트 기본 구조 잡기 (0) | 2010.11.29 |
| HTML 과 CSS 웹 표준 알아보기 2 (2) | 2010.11.29 |
| HTML 과 CSS 웹 표준 알아보기 (0) | 2010.11.29 |
| 초보자를 위한 웹표준 사이트 제작기법을 공개하며... (0) | 2010.11.29 |