내부, 외부 style, <span>

FrontEnd/HTML

by H_Develop 2022. 6. 16. 16:34

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
 body {background-color:yellow;}
 p {background-color:white;}
</style>
<body>
 <p>웹 페이지에서 배경 색상을 지정할 때,<br>
CSS 선택자(테그)로 꾸밀 영역 선택 후 background-color 속성 키에 속성 값 지정 </p>
 <p style="color:blue;">강아징</p>
</body>
</html>
<!--
 <style> 로 감싸주어 CSS 영역, 외부 스타일 열기
 body {background-color:yellow;} 페이지 body영역 전체 yellow로 background 지정
 p {background-color:white;}     p 테그 영역, 한 줄 삭제
 </style>
 <p style="color:blue;">강아징</p> 내부 스타일 color 글자만 blue 
-->

<span>

CSS 적용시킬 글자 선택, 글자를 분리해서 색상 적용 가능.

<!doctype html>
<html>
<head>
<meta charset="utr-8">
</head>
<style>
 body {background-color : white;}
 p {background-color : black;}
</style>
<body>
 <h3>배경 색상</h3>
 <p style="color:white;">메롱</p>
 <p>
  <span style="color:green">녹색</span>
  <span style="color:blue">blue</span>
  <span style="color:black">black</span>
  <span style="color:white">white</span>
  <span style="color:skyblue">skyblue</span>
  <span style="color:purple">purple</span>
  <span style="color:yellow">yellow</span>
  <span style="color:orange">orange</span>
  <span style="color:pink">pink</span>
 </p>
</body>
</html>

/* span테그안에 내부 style로 color를 지정해주어 각 단어마다 색상을 지정해주며,
   외부 스타일에서 body영역에 white를 지정해주고, p테그에 black을 지정 */

'FrontEnd > HTML' 카테고리의 다른 글

Border, Margin, Padding 경계선, 테두리, 외부 내부 여백 (0)	2022.06.17
색상, 글자 google font 사용법, a 테그 링크 속성 (0)	2022.06.16
Table 테이블 <table>, <tr>, <th>, <td> (0)	2022.06.15
Form 폼 (0)	2022.06.15
하이퍼 링크, 경로, a 태그, img 삽입 (0)	2022.06.15