HTML 기본 코드와 그냥 지나쳤던 HTML 태그들
HTML, CSS, PHP, My SQL, Mobile, JAVA 등 기존에 알고 있는 내용도 꽤 있고 공부도 했었지만 다시 한번 HTML부터 책을 읽으며 프로그래밍 관련 서적을 재미 삼아 읽고 있습니다.
개인적으로 작업을 진행하면서 HTML 코드를 기본적으로 많이 다루게 되는데 평소에 자주 잘 사용하지 않거나 특정 태그를 사용하긴 했지만, 그했지만 그 의미에 대해 전혀 신경 쓰지 않다 보니 지나쳤던 몇몇 HTML 태그들이 있습니다.
물론 검색만 조금 해본다면 쉽게 알 수 있는 내용이지만 개인적으로 HTML 기본 구문들과 HTML에서 잘 사용하지 않았거나 그 의미를 알면 좋은 HTML 태그 몇 가지를 정리해 볼까 합니다.
먼저 아래 HTML 코드와 같이 HTML 코드 작성 시 기본 구조를 아래와 같이 작성하면 좋습니다. 복잡한 DOCTYPE도 필요 없고 인코딩도 UTF-8 하나면 사용하면 됩니다.
태그는 CSS를 html 문서 내에 직접 사용할 때 주로 사용. 다른 폴더에 있는 CSS 파일을 가져올 땐 사용.
Javascript는 <head> 태그 안 CSS 라인 아래에 작성하거나 <body> 태그가 끝나는 부분에 위치하는 경우가 많은데 가벼운 자바스크립트 사용의 경우는 <head> 태그 안에 사용해도 무방하지만 대부분 <body> 태그가 끝나는 부분에 Javascript 사용.
개인적으로 매번 타이핑하기 귀찮으니 HTML과 관련된 기본 구조 코드는 정리해 두는 게 좋을 것 같아 정리해 봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>여긴 제목</title>
<style></style><!-- 현업에선 거의 쓰지 않음 거의 테스트 용도로 로컬에서 바쁠 때 사용. -->
<link href="css파일이름.css" rel="stylesheet"><!-- 외부 css 파일 참조 -->
</head>
<body>
<!-- 각종 HTML 태그 시작 -->
<!-- 각종 HTML 태그 끝 -->
<script type="text/javascript">
/* javascript or jquery */
</script>
<script src="스크립트파일이름.js"></script><!-- 외부 jquery 및 javascript 파일 참조 -->
</body>
</html>
그냥 지나칠 수도 있었던 HTML 의미와 유용하게 써볼 만하지 않을까? 하는 몇몇 HTML 태그에 대한 내용을 소스 코드를 간단히 작성해 봤습니다. 코드와 같이 설명은 주석을 참고.
내용은 DOCTYPE, charset(인코딩), ol과 ul 사용 차이, blockquote, 하이퍼 링크 아이디 지정에 대한 내용입니다.
<!DOCTYPE html><!-- 문서의 형태를 브라우저에게 알려주기 html 문서라고 알려준다. -->
<!--
doctype과 관련 문서의 형태를 다양하게 브라우저에게 알려주기 위해 아래 와 같이 사용된 형태가 많았으나
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html> 만으로도 충분함.
-->
<html>
<head>
<meta charset="utf-8"><!-- 현재 문서의 인코딩 형태는 UTF-8 형태라고 알려주기 위함 -->
<!-- 간혹 UTF-8로 저장한 파일이 한글이 깨지는 경우가 있는데 대부분 소스 파일 저장시 UTF-8 형태로 파일을 저장하지 않은 경우 한글이 깨진 경우가 있다면 파일 인코딩 저장이 어떻게 되어 있는지 확인 대부분 (EUC-KR) -->
<title>HTML의 기본 뼈대</title>
<style>
h1 { border-bottom: 1px solid; }
</style>
</head>
<body>
<h1>1. 텍스트 작성 시 쌍 따옴표(더블쿼테이션)이 필요할 때</h1>
<p>글자 작성중 <q>쌍 따옴표(더블 쿼테이션)</q>이 필요할 때 사용하면 좋을 듯 </p>
<br>
<h1>2_1. 순서가 있는 리스트를 표현할땐 ol과 li로</h1>
<p>다음 보기를 보고 한글이 아닌 문자를 고르세요</p>
<ol>
<li>아이유</li>
<li>HUNTER</li>
<li>홍길동</li>
<li>구미호</li>
</ol>
<br>
<h1>2_2. 순서와 관련 없는 리스트를 표현할때</h1>
<p>연예인 이름 몇가지</p>
<ul>
<li>아이유</li>
<li>톰 크루즈</li>
<li>오드리 햅번</li>
<li>스티븐 스필버그</li>
</ul>
<br>
<h1>3. 무언가 삭제되었다는 것을 표현할땐 del 태그를 기억해 놓으면 좋을 듯</h1>
<h2>판매중인 상품</h2>
<ol>
<li>PS5 - 650,000원</li>
<li>XBOX - 650,000원</li>
<li><del>AMD CPU - 750,000원</del></li>
<li>INTEL CPU - 740,000원</li>
</ol>
<br>
<h1>4. 문서 작성 중 글자 시작 지점에 간격이 필요할땐 nbsp를 사용하는 것 보다 blockquote 태그를 사용하면 좋을듯</h1>
<h2>일반적으로 글자를 작성하는 경우</h2>
<p>일반적인 문자를 작성할때 띄어쓰기(탭) 효과가 없기에 css를 이용해 패딩이나 마진을 사용하여 간격을 벌일 필요가 없다. 가능하다면 blockquote를 이용하면 좋을 듯?</p>
<h2>blockquote 태그를 사용하는 경우</h2>
<blockquote>글자의 첫 시작 지점을 작성할 때 blockquote 태그를 사용하면 좋을 듯 하다.</blockquote>
<br>
<h1>5. 아이디 지정 링크를 사용하면 페이지 이동시 원하는 지점으로 이동 가능 사이트간 링크시 상품의 특정 페이지로 이동된다든가 원하는 내용으로 링크를 연결할때 사용하면 좋을 듯 하다.</h1>
<p><a href="http://enjoyrank.com/blog/index.html/#no3">아이디 지정 링크</a></p>
</body>
</html>
위 코드를 브라우저에서 출력했을 때 화면.
마지막으로 아이디 지정 링크는 제가 연습 삼아 가끔 개발하고 있는 웹사이트에 링크를 연결해 놓았으니 어떻게 표시되는지 궁금하신 분들은 눌러 보시면 됩니다. enjoyrank.com/blog/index.html/#no3
기존에 이미 익숙한 태그에 대한 몰랐던 의미와 자주 사용하지 않았지만 유용해 보이는 HTML 태그를 정리해 보았으니 기억해 두면 좋을 것 같습니다.
나중에 시간을 내어 CSS → PHP/MYSQL → Mobile → Java 책을 읽어 보면서 자주 사용하지는 않지만 유용한 내용이 있다면 하나씩 또 정리해 보겠습니다.
