-
HTML attribute (style)web coding/HTML 2021. 3. 15. 09:59
Html attribute style
✔ HTML attribute basic (기본 설명)
HTML attribute style
- color, font, width, height 등 요소를 꾸며주는 속성
- 형태 : <tagname style="property : value;">
*attribute 와 property
- 해석은 '속성'으로 동일함
- 코딩 잼민이가 본 둘의 차이점은
[attribute : 대분류 property : 소분류]
→ 때에 따라 property의 값이 변할 수 있음
+ attribute, property 모두 종류가 다양하기 때문에
참고자료 따로 링크해두기
vscode <!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>
result image *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
- 글자 꾸미기
'web coding > HTML' 카테고리의 다른 글
HTML Link (0) 2021.03.17 HTML CSS ( internal & external ) (0) 2021.03.16 HTML attribute (basic) (0) 2021.03.13 HTML element (basic) (0) 2021.03.12 HTML (1) 2021.03.12