세이박스

'형광펜'에 해당되는 글 1건

  1. 글자에 배경색 칠하기(형광펜 효과내기~)

글자에 배경색 칠하기(형광펜 효과내기~)

웹프로그램
웹 문서를 읽다보면 중요한 부분에 형광펜(이렇게~ㅋㅋ)으로 칠한것 같은 효과를 낸것을 보신적이 있으시죠?
이 효과는 스타일 시트라고 하는 것을 사용하여 만들 수 있는데 스타일 시트 중에서도 InLine Style Sheet라고 하는 방식을 이용하면 간단히 원하는 부분에 적용할 수 있습니다.
그럼 함 같이 만들어 볼까요?
 
style="background-color:Yellow">형광펜 효과내기~
 
간단하게 요렇게만 작성해 주시면 위의 글자에 노란색의 배경색이 칠해지게 되요~
 
자 그럼 간단한 설명좀 들어갈까요?
우선 font 태그는 다들 아시죠?? 글자의 속성중 글자 크기, 글자 색, 글씨체를 지정할 수 있는 태그이지요..
위에서는 그 중 글자 크기(size 속성을 이용해서 크기는 2로 지정)만 지정을 했습니다.
그 font 태그 안에 style속성을 사용하였죠? 바로 이부분이 InLine 스타일시트를 적용한 부분이랍니다.
스타일 시트의 속성은 태그가 가진 속성이랑 대부분 명칭이 다르니 헷갈리시면 안되겠죠?!
스타일시트에서 배경색을 지정하는 속성인 background-color에 색상 값은 노란색을 준 것이죠~
색을 지정하는 방법은 위와 같이 색의 이름을 사용해도 되고 색이 가진 고유의 코드값(예 - #0f0923)을 사용하셔도 됩니다.
 
위의 예를 사용한 간단한 HTML 소스입니다..이런식으로 사용하실 수 있답니다~
 

안녕하세요~

Prayer가 진행하는 HTML Tip~이랍니다.

첫 시간이라 스타일시트를 이용

해서 간단하게 나타낼 수 있는 형광펜 효과내기를 준비했어요~

모쪼록 많은 도움이 되셨음 합니다~

앞으로 더 좋은 팁들 많이 많이 올려드릴께요~