[html/css기초] span, div

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

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

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

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

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

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

<span>

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

<span>사용 예.

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

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

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

span.welcome {
color:red;

}

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

</head>
</head>
<body>

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

</body>
</html>

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

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

<div>

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

<div> 사용 예:

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

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

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

</head>
</head>
<body>

</body>
</html>

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