HTML attribute (style)
✔ HTML attribute basic (기본 설명)
HTML attribute style
- color, font, width, height 등 요소를 꾸며주는 속성
- 형태 : <tagname style="property : value;">
*attribute 와 property
- 해석은 '속성'으로 동일함
- 코딩 잼민이가 본 둘의 차이점은
[attribute : 대분류 property : 소분류]
→ 때에 따라 property의 값이 변할 수 있음
+ attribute, property 모두 종류가 다양하기 때문에
참고자료 따로 링크해두기
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p style="color: teal;">Lorem, ipsum dolor.</p>
<p style="background-color: wheat;">Ut, rem eius!</p>
<p style="color: white; background-color: palevioletred;">Possimus, velit necessitatibus.</p>
<p style="font-family: inherit;">Fuga, asperiores sunt.</p>
<p style="font-size: 56px;">Nobis, facilis fugiat.</p>
<p style="text-align: center;">Porro, quibusdam laboriosam!</p>
<p style="color: lightcoral; text-decoration:line-through;">Assumenda, laboriosam culpa.</p>
<p style="background-color: lightsalmon; color: white; font-family: verdana; font-size: 60px;">Molestias, soluta officiis?</p>
</body>
</html>
*property
- 가장 기본적인 property 6가지
| 속성 | 설명 |
| color | 글자 색상 |
| background-color | 배경 색상 |
| font-famaily | 글씨체 설정 (*묶음으로 선택할 시, 대체 가능함) |
| font-size | 글씨 크기 (*px, %로 값 입력 가능) |
| text-align | 글자 정렬 (*left, center, right) |
| text-decoration | 글자 꾸미기 |
- 이 외에도 종류가 다양함
*color / background-color
- 기본적으로 색상명으로 입력
- 10진법, 16진법으로도 입력 가능 (+ 계산기로 확인하는 방법)
- 추후에 내용 추가 예정
*font-family
- 개별 또는 묶음 폰트 사용 가능
- 묶음 폰트 : 폰트 적용이 안될 시, 뒤따르는 폰트로 대체가 가능함
*text-align
- 글자 정렬
*text-decoration
- 글자 꾸미기