HTML 편집하기 (부분)

===요소와 속성 ===
예를들면, “문자를 빨갛게 하는 요소”와 “문자를 푸르게 하는 요소”에 각각 다른 요소명을 붙인다고 하면, 녹색은? 핑크는? 연한 빨강은?이라는 느낌으로 요소의 종류가 단숨에 많아져버린다. 거기서 “문자의 디자인을 빠꾼다”라는 정리되지 않을까라는 것으로, 요소의 종류가 방대해지지 않듯이,  닮은 듯한 기능에 대해서는 같은 요소명을 대응하고 있다. 
그러면, “빨갛게 하다”“푸르게 하다”는 어떻게 지정하면 좋을까? 지정하기 위회서 '''속성'''을 주는 것으로 자세한 지정을 할 수 있게 되고 있다. 

속성은 시작 태그의 요소명과 <code>&gt;</code>의 사이에 다음과 같은 형태로 적는다. 
<pre>
<요소명 속성명="속성값">
</pre>
속성명은 속성의 종류를 주고, 속성값은 지정한 값을 준다. 
속성값에 반각의 영어숫자 등을 제외한 값을 줄 경우에는 따옴표 기호, 또는 큰 따옴표로 감싸는 요소가 있다. 
속성명은 대소문자를 묻지 않지만, 속성값은 대소문자를 구별하는 것이 있다. 
2개 이상의 속성을 줄 경우에는 띄어쓰기로 사이를 비워서 이어서 적는다. (아래의 예의 크고 파랗게 되어있는 케이스를 봐라)

아래에 예를 게재한다.

'''입력 예'''
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
  <head>
    <title>속성의 간단한 예</title>
  </head>
  <body>

<div style="color: red;">이 문장은 빨갛다.</div>
<div>이 문장은 <span style="color: #ff8888;">연한 빨강</span>과 <span style="color: #ff8888;">연한 녹색</span></div>
<div style="color: blue;font-size: larger;">이 문장은 크고 파랗다.</div>

  </body>
</html>
</syntaxhighlight>
'''표시 예'''
<div style="border: black 1px dashed; padding: 1em;">
<div style="color: red;">이 문장은 빨갛다.</div>
<div>이 문장은 <span style="color: #ff8888;">연한 빨강</span>과 <span style="color: #ff8888;">연한 녹색</span></div>
<div style="color: blue;font-size: larger;">이 문장은 크고 파랗다.</div>
</div>
[[Category:HTML]] [[Category:마크업 언어]]