3. DIV, SPAN
페이지 정보
작성자 관리자 댓글 0건 조회 524회 작성일 21-10-19 13:39본문
3. DIV, SPAN
<div>
- html 문서에서 영역을 지정할 때 사용
- 블럭 레벨 엘리먼트들을 그룹으로 묶어서 CSS 디자인 표현을 적용할 때 많이 사용된다.
- 자바스크립를 적용하기도 한다.
<span>
- 인라인 엘리먼트들을 그룹으로 묶을 때 사용된다.
- span으로 묶은 그룹은 CSS 디자인 표현을 하기도 하고, 자바스크립트를 적용하기도 한다.
( 실습1 )
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div와 span 이해하기</title>
</head>
<body>
<div style="background-color:#00ff00">
<h1>헤더 제목</h1>
<p>문단내용</p>
</div>
<span style="background-color:#ff00ff"><strong>강조</strong> <em>필기체</em> </span>
</body>
</html>
( 실습2 )
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div와 span 연습하기</title>
</head>
<body>
<h1>문서의 가장 중요한 제목</h1>
<h2>그다음 중요한 내용 </h2>
<p>문장을 표현</p>
<strong>단어의 강조</strong>
<address>
이름 : <a href='mailto:aaa@naver.com'>웹마스터</a>
주소 : 전북 군산시 대학로 558
전화번호 : 063-469-4551
</address>
</body>
</html>
address 부분만 수정하고 결과를 확인한다.
<address style="background-color:#ffff00">
이름 : <a href='mailto:aaa@naver.com'>웹마스터</a><br/>
주소 : 전북 군산시 대학로 558<br/>
전화번호 : 063-469-4551
</address>
( 실습3 )
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div와 span 연습하기</title>
</head>
<body>
<div style="background-color:#aaffaa">
<h1>제목</h1>
<p>컨텐츠 내용</p>
</div>
<p>
<span style="background-color:#ee55aa">
<strong>강조문자</strong>
<em>이탤릭체 문자</em>
</span>
</p>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.