반응형
1. <span> 태그란 무엇인가?
- <span>...</span> 태그는 span(폭, 범위) 으로 HTML 문서 내에 자신에게 주어진 공간만을 차지하는 태그이다.
2. <span> 태그 사용 예시
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>span태그에 대해 알아보자</title>
<style type="text/css">span{border:1px solid green;}</style>
</head>
<body>
<span>나는 span 태그 입니다.</span>
</body>
</html>
|
cs |
<span> 태그의 영역을 파악하기 위해 border, solid 스타일을 지정하였다.
3. <span> 태그 사용 결과
4. <span> 태그를 여러 번 사용했을 때 예시
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>span태그에 대해 알아보자</title>
<style type="text/css">span{border:1px solid green;}</style>
</head>
<body>
<span>나는 span 태그 입니다.</span>
<span>나는 span 태그 입니다.</span>
<span>나는 span 태그 입니다.</span>
<span>나는 span 태그 입니다.</span>
<span>나는 span 태그 입니다.</span>
</body>
</html>
|
cs |
5. <span> 태그 여러 번 사용했을 때의 결과
6. <span> 태그를 연달아 여러 번 사용했을 때 예시
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>span태그에 대해 알아보자</title>
<style type="text/css">span{border:1px solid green;}</style>
</head>
<body>
<span>나는 span 태그 입니다.</span><span>나는</span><span>span 태그</span><span>입니다.</span><span>나는 span 태그 입니다.</span>
</body>
</html>
|
cs |
7. <span> 태그를 연달아 여러 번 사용했을 때 결과
반응형
'Programming Language > CSS' 카테고리의 다른 글
| [CSS] <li> 태그, <ol> 태그란? (list item, ordered list) (0) | 2022.01.18 |
|---|---|
| [CSS] <li> 태그, <ul> 태그란? (list item, unordered list) (0) | 2022.01.18 |
| [CSS] <div> 태그란? (division) (0) | 2022.01.12 |
| [CSS] CSS 스타일 적용 방법 (0) | 2022.01.11 |
| [CSS] CSS란? (CSS개념과 HTML 차이점) (0) | 2022.01.11 |
댓글