HTML p 태그에 배경색, 테두리, 글씨 변경하는 예제


HTML p 태그

<p> 태그는 HTML 문서의 단락을 정의합니다. <p> 태그 사이에는 단락 간 간격이 자동으로 부여됩니다. <br> 태그도 똑같이 줄바꿈을 하지만 검색엔진에 의미론적 효과를 주지는 않습니다.

사람 눈에는 가독성을 높여야 하지만 컴퓨터에게는 전달하지 않을 경우 <br> 태그를 사용합니다. 반대로 사람 눈과 컴퓨터에게 모두 가독성을 줘야할 경우 <p> 태그를 사용하면 됩니다.


<p>초고대문명설이란 과거 지구에 현대 문명 이상의 과학 기술을 가진 종족의 문명이 존재했다고 주장하는 이론입니다.</p>
<p>에리히 폰 데니켄이라는 스위스인이 1968년에 처음 주장했고, 1991년에 이그노벨상을 수여받았습니다.</p>

<p> 배경색 변경

<p> 태그 배경색 변경은 style 속성에 background-color 속성값을 추가해서 삽입합니다. powderblue와 같은 색 고유명이나 #D2E556와 같은 HEX 색상 코드를 삽입하면 됩니다.


<p style="background-color:powderblue;">데니킨의 초대고대문명설은 제카리아 시친이라는 지구 연대기의 작가에 큰 영향을 주었습니다.</p>
<p style="background-color:#D2E556;">지구연대기는 인간은 고대 수메르 시대에 외계 생명체가 노동력 확보를 위해 만들어 놓은 복제 인간의 다운그레이드 형태라고 정의하고 있습니다.</p>

<p> 테두리 삽입

<p> 태그 테두리는 style 속성에 border 속성값을 삽입해서 작성합니다. px은 선의 두께, solid/dashed는 선의 종류, blue/green은 선의 색을 정의합니다.

<p style="border:1px solid blue;">신의 지문의 저자 그레이엄 핸콕은 초고대문명설 계열의 작가입니다.</p>
<p style="border:2px dashed green;">남미의 고대 건축물이 빙하기 이전에 지어진 초고대문명의 산물이라는 주장을 펼치고 있습니다.</p>

<p> 글씨크기 변경

<p> 태그 글씨 크기 변경은 style 속성에 font-size 속성값을 삽입해서 작성합니다. 글씨 크기와 같은 속성은 모두 CSS 디자인 효과입니다. CSS는 사람의 눈의 만족을 위한 도구입니다. 그래서 컴퓨터는 중요한 정보라고 생각하지 않습니다.


따라서 만약 <p> 태그 본문의 글씨 크기를 제목보다 크게 해도 검색 엔진은 차이를 두지 않습니다.

<p style="font-size:40px;">렙틸리언은 파충류형 외계인입니다.</p>
<p style="font-size:20px;">북미와 남미에서 목격담이 주로 발생합니다.</p>

<p> 글씨체 변경

<p> 태그 글씨체 변경은 style 속성에 font-family 속성값을 추가해서 정의합니다.


<p style="font-family:굴림체;">외계인 납치 경험담은 일반적으로 외계인으로 알고 있는 그레이형(머리가 크고 회색에 눈이 검은색) 외계인이 절반 정도입니다.</p>
<p style="font-family:궁서체">나머지 납치담의 절반은 렙틸리언과 같은 파충류형 외계인에 대한 경험담입니다.</p>

<p> 글자색 변경

<p> 태그의 글자색 변경은 style 속성에 color 속성값을 추가해서 작성합니다. 글자색 변경도 CSS 효과입니다. 가독성을 위한 작업으로 컴퓨터는 해당 글씨의 색 변화에 중요도를 관찰하지 않습니다.

<p style="color:red;">주역의 창시자라 불리는 복희와 같은 신화 속 인물은 용이나 뱀의 형상을 하고 있습니다.</p>
<p style="color:#5657E5;">아즈텍, 마야, 톨텍의 고대 문명에서는 공통적인 신이 등장합니다. 케찰코아틀(깃털 달린 뱀)입니다.</p>