본문 바로가기
css

[html/css기초] span, div

by 지구별에 2014. 3. 11.
반응형

 

 

[html/css기초] span, div 사용법

 

 

어제는 id, class 선택자에 대해 알아 보았습니다

 

class, id 선택자 참조

 

id는 스타일을 지정할 때 사용하는 고유 이름이고

 

class는 스타일을 묶어서 지정할 때 사용하는 이름이라고 했습니다.

 

 

이 id, class 와 함께 자주 사용되는 것이 <div>와 <span>입니다.

 

<span>과 <div>역시 그룹으로 묶어서 지정하는 것과 관계가 있습니다.

 

 

 

 <span>

 

 

<span>는 문자열을 원하는 부분만 선택해서 시각적 효과를 줄 수 있습니다.

 

 

<span>사용 예.

 

<span id="이름"> 내용 </span>

<span class="이름">내용</span>

 

id를 사용하게 되면 각각 고유의 이름을 부여해야 하기 때문이

전체를 묶어 스타일을 지정하려면 class를 사용하는 것이 편리합니다.

 

 

 

㉠확장자  .css로 저장 (예:test.css)

 


 span.welcome {
color:red;

}

 

 

㉡확장자 .htm으로 저장(예:main.htm)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 <link rel="stylesheet" type="text/css" href="test.css" />

 </head>
 </head>
<body>

<span class="welcome">지구별</span> 홈페이지에 오신 것을

<span class="welcome">환영 합니다 </span>


</body>
</html>

 

 

span class 실행화면입니다. '지구별'과 '환영 합니다' 부분에만

빨간색으로 지정되었습니다.

 

 

 

 

 <div>

 

<div>는 하나 이상의 요소(태그)를 묶어서 스타일을 지정할 때 사용합니다.

 

 

 

<div> 사용 예:

 

㉠확장자  .css로 저장 (예:test.css)

 


.am {
background:green;
}
.pm {
background:yellow;
}

 

 

㉡확장자 .htm으로 저장(예:main.htm)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 <link rel="stylesheet" type="text/css" href="test.css" />

 </head>
 </head>
<body>

 

<div class="am">
<p>9시 </p>
<p>10시 </p>
<p>11시 </p>
<p>12시 </p>
</div>


<div class="pm">
<p>13시 </p>
<p>14시 </p>
<p>15시 </p>
<p>16시 </p>
</div>


</body>
</html>

 

 

 

div  실행화면입니다. 위에는 초록색, 아래는 노란색 배경화면으로 설정되었습니다.

 

 

 

 

  

 

span, div 태그 차이점 ☜바로가기

 

position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

반응형

댓글0