티스토리 뷰
목차
폰트 지정외에도 텍스트에 여러가지 스타일작업을 할 수 있습니다. 텍스트를 굵게, 이탤릭체로, 밑줄을 긋는 등 다양한 형태로 만들 수 있습니다 그럼 문단을 볼드체로 만들어 봅시다 아래처럼 코드를 입력합니다.
p {
font-weight: bold;
}
이 코드를 넣어서 결과물을 출력하면 다음과 같이 보입니다
 |
 |
글자가 더 짙어지고 굵어진 것을 볼 수 있습니다.
그렇다면 문장에서 한두 개의 단어만 볼드체로 하고 싶다면 어떻게 해야 할까? 이를 위해서는 '스팬'이라는 구성요소를 사용해야 합니다. 이 요소 자체로는 아무런 결과가 나오지 않지만 구성요소의 개별적 부분의 스타일을 설정할 수 있는 기능입니다. 웹페이지의 문단을 다음과 같이 바꿔봅시다.
<p>this text is <span id= "bold">bold</span>.</p>
이 스팬 자체만으로는 텍스트의 스타일에 아무런 영향을 미치지 않습니다
 |
 |
여기에 코딩을 추가해서 스팬의 범위에 들어있는 내용에만 스타일을 적용해 보겠습니다.
#bold {
font-weight: bold;
}
#bold는 'CSS 규칙을 bold라는 아이디를 가진 내용에만 적용하라'는 의미임을 기억하세요 이제 bold 단어만 볼드체로 변합니다
 |
 |
이와 비슷하게 일부글자를 이탤릭체로 바꾸기 위해 두번째 스팬을 사용할 수 있습니다. 아래와 같이 문단을 바꿔봅니다
<p>This text is <span id="bold"> bold</span> and this is <span id="italic">italic</span>.</p>
이제 italic스팬에 다음 css규칙을 적용합니다
#italic
{
font style: italic;
}
 |
 |
결과는 이런 모습을 보여줍니다
이외에도 underline도 같은 방법으로 적용할 수 있습니다
#underlined
{
text-decortion: underline;
}
2024.08.01 - [코딩] - css-웹페이지의 폰트바꾸기
'코딩' 카테고리의 다른 글
| css- 링크스타일 편집하기 (0) | 2024.08.01 |
|---|---|
| CSS- 텍스트정렬 (0) | 2024.08.01 |
| css-웹페이지의 폰트바꾸기 (0) | 2024.08.01 |
| CSS-text상자 테두리를 둥근모서리로 만들기 (0) | 2024.07.31 |
| css - text구성요소 테두리만들기 (0) | 2024.07.31 |