HTML P태그 스타일 적용 방법 (글꼴, 글씨크기, 글자색 바꾸기)
지금은 거의 사용하지 않는 태그지만, 때때로 요긴하게 써먹을 수 있는 스타일 태그를 알아보겠습니다. 특정 글꼴을 사용하고 싶을 때, 어떤 키워드만 크게 키워서 강조하고 싶을 때, 또한 해당 키워드의 색상을 변경하고 싶을 때 사용되는 방법입니다.
이 방법은 이제 CSS 스타일로 저장되어서 편리하게 꺼내쓸 수 있다고 설명은 들었는데 아직 거기까지는 진도를 나가지 않았습니다. 그러므로 지금은 이것만으로도 무척이나 신기할 따름입니다. 예전에 티스토리 스킨을 이것저것 만지면서 검색을 통해 배운 태그들이 이제 눈에 하나둘씩 들어오기 시작합니다. 어쩌면 그때 많은 시행착오를 겪었던 것들이 훗날 이런 도움의 밑거름이 되지 않았나 생각해 봅니다.
지난 시간에 이어서 진달래꽃 텍스트를 그대로 활용해 보겠습니다. 나 보기가 역겨워~ 드리오리다 까지 <p> 태그로 감싼 부분에 스타일을 적용시켜 보겠습니다. 위의 빨간색 밑줄 친 부분을 잘 봐주시기 바랍니다. P 다음, style="" 하고 정의를 내렸습니다. 큰 따옴표 안에 이제 폰트의 크기, 컬러, 글꼴을 정하는 태그를 넣을 것 입니다.
font-size : 0px ; ▶ 폰트 사이즈를 정합니다. 00대신 숫자를 넣으면 됩니다.
font-family : '글꼴이름'; ▶ 폰트의 글씨체를 작성한 글꼴로 변경합니다.
color : red ; ▶ 글씨의 색상을 정합니다. 영어로 작성하셔도 좋습니다만 가장 정확한건 16진수를 활용한 방법입니다. #000000 형식이며, 각 두자리가 RGB 색상을 표현합니다.
참고로 font-family : '한글글꼴이름'; 형태를 잘 봐주세요. 큰따옴표 혹은 작은따옴표를 사용합니다. HTML 언어는 영어가 기본이기에 영어글꼴의 경우는 따옴표를 꼭 사용하지 않아도 되지만 한글글꼴은 반드시 저렇게 작은 따옴표를 써서 인식시켜줘야 합니다. 또한 세미콜론(;)과 콜론(:)의 사용에도 집중해 주세요. 콜론으로 시작해서 세미콜론으로 마무리가 된다는 점을 꼭 기억해 주시기를 바라겠습니다.
style 태그를 적용시킨 예제대로 저장 후, 적용된 모습입니다. 보시는 것 처럼 하나의 단락에 모두 스타일이 적용 되었음을 알 수 있습니다. 생각보다 어렵지 않지요?
아까 설명드렸듯 이렇게 샵(#) 이후에 16진수로 작성해주시면 각 두자리씩 빛의 3원색을 표현하는 코드가 됩니다. 16진수 색상에 대해서 잘 모르신다면 포토샵에서도 확인이 가능하지만, 인터넷에서 확인하는 방법을 말씀드리겠습니다. 아래의 사이트를 방문하시면 됩니다.
위의 사이트를 들어가보시면 HTML 컬러 차트가 있고, 그 밑에는 컬러 픽커가 있습니다. 차트는 일종의 색상 파레트와 비슷하며 커스텀한 색상을 찾고자 할 때는 컬러 픽커를 이용하시면 됩니다. 그냥 원하는 색을 클릭만 해보시면 16진수로 알파벳과 숫자로 조합된 코드가 출력될 것입니다. 그대로 복사해서 사용하시면 됩니다.
예시에서 보셨듯 #00C63A 에 대한 색상이 적용된 모습입니다. 보시는 것 처럼 얼마든지 원하는 색상으로 변경이 가능합니다. 이런식으로 HTML의 <p> 태그 중에서 style 을 적용시켜서 간단한 폰트 꾸미기를 할 수 있습니다. 끝.
