반갑습니다. 잡지식스토리의 촉끼남입니다.
이번에는 HTML 태그 중에서 div 태그에 대해서 가볍게 정리해 보겠습니다.
div 태그
일반적으로 일부 영역을 따로 설정해 주는 태그입니다.
이 태그를 사용한다고 해서 브라우저상으로 특별한 변화는 없지만, 웹문서를 작성할 때에 class 속성이나 id 속성으로 div 태그 영역만 스타일을 재설정 할 수 있습니다.
어렵나요??
음... 쉽게 이야기해서 div 태그를 사용한 영역은 별도로 스타일이나 스크립트 설정이 가능하다는 이야기입니다.
개인적으로 제대로 사용한다면 웹문서의 일부 영역을 강조하여 가시성을 높일수 있다고 생각됩니다.
div 태그 예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>div 태그 알아보기</title>
<style type="text/css">
div {
color: #ff0000;
}
</style>
</head>
<body>
<div>
<p>div 태그로 일부 영역을 선택하였습니다.</p>
</div>
<p>여기는 div 태그가 적용되지 않았습니다.</p>
</body>
</html>
그럼 이제 브라우저로 어떻게 나오는지 확인해 볼까요..??
IE10으로 확인해 보겠습니다.
HTML소스 문서와 브러우저 출력 내용을 확인해 보면 무슨 내용인지 쉽게 이해할 수 있습니다.
css로 div 태그 영역을 빨강색 글씨 스타일로 설정하였고,
본문에서 div 태그를 사용한 영역은 빨강 글씨로 출력되게 하였습니다.
비교해 보세요. 정말 쉽습니다.
개인적인 생각으로 웹페이지를 꾸밀 때, 정말 유용하게 사용할 수 있을거라 생각합니다.
그러니까, 무슨 내용인지는 알고 있어야 할 것 같습니다.
그럼 이정도에서 스을 마무리 짓도록 하겠습니다.
지금까지 잡지식스토리의 촉끼남이었습니다.
'웹문서 공부' 카테고리의 다른 글
| 인터넷 시작페이지 설정 레지스트리 (0) | 2013.12.27 |
|---|---|
| [웹문서]동일 페이지에서 지정한 위치로 이동하기 (1) | 2013.11.28 |
| [웹문서]ol 태그 / li 태그, 순번이 있는 목록 만들기 (0) | 2013.11.01 |
| [웹문서] ul 태그, li 태그, 목록 만들기 (1) | 2013.10.30 |
| [웹문서]pre 태그, 입력한대로 표시하기 (0) | 2013.10.28 |
