반응형
Styles 기본 구성
<tagname style="property:value;">-> 기본적으로 HTML의 구성은 property(속성):value(가치)가 온다.
배경색(Backgroun Color)
<!DOCTYPE html>
<html>
<body style="background-color: blue;">
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>-> 위의 예시코드는 배경을 파란색으로 바꾸는 예시코드이다.
-> CSS 요소인 background-color를 사용해 HTML요소의 배경의 색깔을 파란색으로 바꿨다.
<!DOCTYPE html>
<html>
<body style="background-color: blue;">
<h1 style="background-color: green;">This is a heading</h1>
<p style="background-color: yellow;">This is a paragraph.</p>
</body>
</html>-> 위의 방식대로 작성할 경우 h1의 배경 색깔은 green(초록색)
->p(단락)의 배경색깔은 yellow(노란색)으로 나타나진다.
텍스트색(Text Color)
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;">This is red</h1>
<p style="color: blue;">This is blue</p>
</body>
</html>-> CSS요소인 color를 통해 HTML의 텍스트 색깔을 나타낼 수 있다.
-> 위의 경우 <h1>텍스트는 빨간색으로 <p>텍스트는 파란색으로 나온다.
폰트(Font)
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family: Verdana;">This is red</h1>
<p style="font-family: courier;">This is blue</p>
</body>
</html>-> CSS요소인 font-family는 HTML 텍스트 폰트를 설정해주는 역할을 해준다.
-> 위의 <h1>의 폰트는 Verdana로 <p>의 폰트는 courier로 설정해주었다.
텍스트 크기(Text Size)
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%">This is heading</h1>
<p style="font-size:150%">This is paragraph</p>
</body>
</html>-> CSS요소인 font-size는 폰트의 사이즈 크기를 정해주는 역할을 한다.
-> <h1>의 경우 원래의 텍스트 크기를 3배 크기로 늘려준다.
-> <p>의 경우 원래의 단락 텍스트 크기를 1.5배 크기로 늘려준다.
텍스트 위치설정(Text Alignment)
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align: center;">Centered heading</h1>
<p style="text-align: right;">Righted paragraph</p>
</body>
</html>-> CSS요소인 text-align는 텍스트의 위치를 나타내는 역할을 한다.
-> <h1>의 위치는 center에 따라 중앙에 위치하게되고
-> <p>의 위치는 right이므로 페이지 오른쪽에 위치하게 된다.
요약:
background-color : 배경색을 나타냄
color: 텍스트색을 나타냄
font-family: 폰트설정
font-size: 폰트 크기설정
text-align: 텍스트 위치를 나타냄
반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML Links 링크 이미지, 주소 넣기 (0) | 2023.09.03 |
|---|---|
| HTML Styles - CSS (0) | 2023.09.03 |
| HTML 주석 (1) | 2023.09.03 |
| HTML 인용 및 인용요소(Quotation and Citation Elements)<blockquote>, <q>, <abbr>, <address>, <cite>, <bdo> (0) | 2023.09.03 |
| HTML 기초(예제 코드) (0) | 2023.09.03 |
댓글