HTML 복수 속성
하나의 태그에는 여러 개의 속성이 동시에 삽입될 수 있습니다. HTML 태그와 속성은 명사와 형용사의 관계와 비슷합니다.
하나의 명사에 여러 개의 형용사가 동시에 올 수 있는 것 처럼 하나의 태그에 복수의 속성이 삽입될 수 있습니다.
복수의 속성은 공백을 두고 삽입됩니다.
<p> 태그 복수 속성
<p> 태그에 class, title, style 속성 세 종류를 동시에 삽입한 예제입니다. 각 속성별 영역은 공백으로 구분됩니다.
<p class = "sugoyo" title = "야자나무" style = "color:green;">고등학생이 싫어하는 나무는?</p><img> 태그 복수 속성
<img> 태그에 src, id, width, height, alt 속성 다섯 종류를 동시에 기입한 예제입니다. 각 속성별 영역은 공백으로 구분됩니다.
<img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Imperial_State_Crown.png" id = "crown" alt="Imperial Crown" width = "300px;" height = "300px;"><a> 태그 복수 속성
<a> 태그에 href, target, title, style 속성 네 종류를 동시에 삽입한 예제입니다. 각 속성별 영역은 공백으로 구분됩니다.
<a href = "https://en.wikipedia.org/wiki/Crescent" target = "_blank" title = "초승달 무늬" style = "background-color: hotpink;">위키백과 - 초승달 무늬</a>style 속성의 복수 속성값
style 속성의 경우 속성값을 삽입할 때 여러개를 동시에 삽입할 수 있습니다. 각 속성값 사이의 영역은 세미콜론 ; 으로 구분됩니다.
<p> 태그의 style 속성에 color: red, background-color: yellow, font-size: 30px 값을 동시에 적용한 예제입니다.
<p style = "color: red;background-color: yellow; font-size: 30px;">세상에서 가장 야한 채소는?</p>style 속성에 삽입된 여러 복수 속성값과 다른 속성을 같이 사용한 예제입니다.
<p id = "mushroom" title = "버섯" style = "color: white;background-color: blue;font-size: 30px;">세상에서 가장 야한 채소는?</p>HTML 복수 속성 삽입 순서
HTML 속성은 태그에 복수 속성을 삽입할 때 기입 순서는 상관없습니다.
<p title = "모두 같습니다." style = "color: blue;" class = "sea">다른 결과는 무엇일까요?</p>
<p style = "color: blue;" title = "모두 같습니다." class = "sea">다른 결과는 무엇일까요?</p>
<p class = "sea" style = "color: blue;" title = "모두 같습니다." >다른 결과는 무엇일까요?</p>