소개
이 랩에서는 HTML <span> 태그를 사용하여 인라인 텍스트 스타일을 만들고 웹 콘텐츠의 시각적 표현을 향상시키는 방법을 배우게 됩니다. 이 랩은 span 태그의 목적을 이해하고, 기본적인 HTML 문서 구조를 만들고, 특정 텍스트 세그먼트에 사용자 정의 인라인 스타일을 적용하는 데 중점을 둡니다.
실용적이고 발전하는 예제를 통해 span 태그를 사용하여 문서의 흐름을 방해하지 않고 텍스트의 작은 부분을 타겟팅하고 스타일을 지정하는 방법을 탐구할 것입니다. 이 랩이 끝나면 HTML span 요소를 사용하여 사용자 정의 텍스트 색상, 배경 및 기타 인라인 스타일링 기술을 적용하여 웹 페이지에서 더욱 역동적이고 시각적으로 매력적인 텍스트 서식을 제공할 수 있습니다. 이 랩 전체에서 단일 HTML 파일을 기반으로 구축하여 점차적으로 더 많은 기능과 스타일을 추가할 것입니다.
Span 태그의 목적 이해
이 단계에서는 HTML 에서 <span> 태그의 목적과 기능에 대해 배우게 됩니다. <span> 태그는 인라인 레벨 요소입니다. 즉, <p> 또는 <div>와 같은 블록 레벨 요소와 달리 텍스트 흐름 내에서 작동하도록 설계되었습니다. 블록 레벨 요소는 앞뒤에 줄 바꿈을 생성합니다. <span> 태그를 사용하면 더 큰 콘텐츠 블록 내에서 텍스트의 작은 부분에 특정 스타일을 적용하거나 의미를 추가할 수 있습니다.
문장에서 특정 단어를 마커로 강조 표시하는 것과 같습니다. <span> 태그는 해당 마커처럼 작동하여 스타일 지정을 위해 특정 단어를 타겟팅할 수 있도록 합니다.
다음과 같은 경우에 특히 유용합니다.
- 인라인 스타일 적용: 특정 단어 또는 구문의 모양을 변경합니다.
- 사용자 정의 서식 추가: 텍스트의 일부를 굵게, 기울임꼴, 색상 등으로 만듭니다.
- 특정 텍스트 강조 표시: 콘텐츠의 중요한 부분에 주의를 기울입니다.
- JavaScript 또는 CSS 조작을 위한 작은 텍스트 세그먼트 타겟팅: 개별 텍스트 조각에 대한 정밀한 제어를 제공합니다.
<span> 태그의 사용법을 보여주는 간단한 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 styling-example.html이라는 새 파일을 만듭니다. 이 파일은 나머지 랩의 캔버스가 됩니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>This line contains a <span>special</span> word.</p>
</body>
</html>
이 예제에서 <span> 태그는 "special"이라는 단어를 감쌉니다. 현재는 모양이 변경되지 않지만 나중에 스타일을 지정할 수 있는 것으로 해당 단어를 표시합니다.
참고: WebIDE 에서 HTML 파일을 미리 보는 방법에 대해 자세히 알아보세요. 잠시 시간을 내어 WebIDE 에서
styling-example.html을 미리 봅니다. 두 단락이 정상적으로 표시됩니다.<span>태그 자체는 텍스트의 모양을 변경하지 않습니다.
기본 인라인 스타일 적용
이제 "special"이라는 단어를 눈에 띄게 만들어 보겠습니다. 이 단계에서는 style 속성을 사용하여 <span> 요소에 직접 인라인 스타일을 적용하는 방법을 배우게 됩니다. 인라인 스타일링은 CSS 속성을 HTML 태그 내에 직접 추가하는 것을 의미합니다.
WebIDE 에서 styling-example.html 파일을 열고 <span> 태그를 다음과 같이 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a <span style="font-weight: bold;">special</span> word.
</p>
</body>
</html>
<span> 태그에 style 속성을 추가했습니다. style 속성 내에 font-weight: bold;를 작성했습니다. 이것은 텍스트를 굵게 만드는 기본적인 CSS 속성입니다.
자세한 설명은 다음과 같습니다.
style=" ... ": 이것은 CSS 규칙을 이 요소에 직접 적용할 수 있도록 하는 HTML 속성입니다.font-weight: bold;: 이것은 CSS 선언입니다.font-weight: 텍스트가 얼마나 굵은지 제어하는 CSS 속성입니다.bold:font-weight속성에 할당하는 값입니다.;: 세미콜론은 중요합니다!style속성 내에서 서로 다른 CSS 선언을 구분합니다. 나중에 더 많은 스타일을 추가하려면 세미콜론으로 구분해야 합니다.
WebIDE 에서 styling-example.html을 다시 미리 봅니다. 이제 "special"이라는 단어가 굵게 표시되어야 합니다. 이것은 <span> 태그가 스타일 지정을 위해 특정 텍스트를 타겟팅하는 방법을 보여줍니다.
추가적인 인라인 스타일 추가
스타일을 더 흥미롭게 만들어 보겠습니다. 단일 <span> 태그에 여러 인라인 스타일을 적용할 수 있습니다. 이 단계에서는 "special"이라는 단어에 기울임꼴과 밑줄을 추가합니다.
WebIDE 에서 styling-example.html을 열고 <span> 태그를 수정하여 더 많은 스타일을 포함합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline;"
>special</span
>
word.
</p>
</body>
</html>
세미콜론으로 구분된 두 개의 CSS 선언을 style 속성 내에 추가했습니다.
font-style: italic;: 텍스트를 기울임꼴로 만듭니다.text-decoration: underline;: 텍스트에 밑줄을 추가합니다.
각 선언 뒤에 세미콜론을 기억하세요! 브라우저가 한 스타일이 어디에서 끝나고 다음 스타일이 어디에서 시작하는지 이해하는 데 매우 중요합니다.
styling-example.html을 미리 봅니다. 이제 "special"이라는 단어가 굵게, 기울임꼴로 표시되고 밑줄이 그어져야 합니다. 이것은 <span> 태그로 여러 인라인 스타일을 결합하는 기능을 보여줍니다.
텍스트 색상 및 배경 사용자 정의
이제 텍스트와 배경의 색상을 변경해 보겠습니다. 이 단계에서는 <span> 태그의 style 속성 내에서 color 및 background-color CSS 속성을 사용하는 방법을 배우게 됩니다.
styling-example.html을 열고 <span> 태그를 다시 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline; color: blue; background-color: lightyellow;"
>special</span
>
word.
</p>
</body>
</html>
두 개의 새로운 CSS 선언을 추가했습니다.
color: blue;: 텍스트 색상을 파란색으로 설정합니다. 다양한 색상 이름 (예:red,green,black등) 또는 16 진수 색상 코드 (예: 빨간색의#FF0000) 를 사용할 수 있습니다.background-color: lightyellow;: span 의 배경색을 밝은 노란색으로 설정합니다.color와 마찬가지로, 명명된 색상 또는 16 진수 코드를 사용할 수 있습니다.
styling-example.html을 미리 봅니다. 이제 "special"이라는 단어가 굵게, 기울임꼴로 표시되고, 밑줄이 그어져 있으며, 파란색이고, 밝은 노란색 배경을 가져야 합니다. 이것은 <span> 태그와 인라인 스타일을 사용하여 특정 텍스트의 모양을 크게 변경할 수 있는 방법을 보여줍니다.
더 실용적인 예시
<span> 태그를 더 현실적인 시나리오에서 어떻게 사용할 수 있는지 살펴보겠습니다. 제품 설명을 만들고 있다고 상상해 보세요. 특정 기능이나 가격을 강조하고 싶을 수 있습니다.
styling-example.html을 열고 내용을 다음 내용으로 바꿉니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<h1>Product Description</h1>
<p>
Introducing our new
<span style="font-weight: bold;">Super Gizmo 3000</span>!
</p>
<p>Key Features:</p>
<ul>
<li><span style="color: green;">Ultra-fast processing</span></li>
<li>
Long-lasting <span style="font-style: italic;">battery life</span>
</li>
<li>Available in <span style="color: blue;">multiple colors</span></li>
</ul>
<p>Price: <span style="font-size: 1.2em; color: red;">$99.99</span></p>
<p>
Limited time offer:
<span style="background-color: yellow; font-weight: bold; padding: 2px;"
>Free Shipping!</span
>
</p>
</body>
</html>
이 예시에서:
- 제품 이름을 굵게 표시하기 위해
<span>을 사용했습니다. - 주요 기능을 색상으로 구분하기 위해
<span>을 사용했습니다. - 가격을 더 크게 하고 빨간색으로 만들기 위해
<span>을 사용했습니다. 여기에서font-size속성을 주목하세요. 텍스트 크기도 제어할 수 있음을 보여줍니다!em단위는 상대 단위로, 텍스트 크기를 상위 요소의 글꼴 크기에 상대적으로 만듭니다. - 배경색과 패딩으로 특별 제안을 강조하기 위해
<span>을 사용했습니다.padding은 배경색 내의 텍스트 주변에 공간을 추가합니다.
styling-example.html을 미리 봅니다. <span> 태그를 사용하여 콘텐츠에 시각적 강조를 추가하고 구조화하여 더욱 매력적이고 읽기 쉽게 만들 수 있음을 알 수 있습니다.
요약
이 랩에서는 HTML <span> 태그의 목적과 구현에 대해 배웠으며, 인라인 텍스트 스타일링을 적용하는 데 중점을 두었습니다. 인라인 레벨 요소인 <span> 태그가 문서의 전체적인 흐름을 방해하지 않고 텍스트의 특정 부분을 대상으로 스타일을 지정할 수 있도록 하는 방법을 살펴보았습니다.
기본 HTML 문서를 만들고 <span> 태그 내의 style 속성을 사용하여 점진적으로 인라인 스타일을 추가하는 연습을 했습니다. font-weight, font-style, text-decoration, color, background-color와 같은 다양한 CSS 속성을 탐구하고, 이를 결합하여 다양한 시각적 효과를 얻는 방법을 배웠습니다. 마지막으로, 더 실용적인 제품 설명 예시에 지식을 적용하여 <span> 태그가 웹 콘텐츠의 표현과 가독성을 향상시킬 수 있는 방법을 시연했습니다. 이제 웹 페이지에 동적이고 시각적으로 매력적인 텍스트 서식을 효과적으로 추가하기 위해 <span> 태그를 사용할 수 있습니다.
