HTML 속성값 따옴표의 생략
속성값은 기본적으로 따옴표 "" 사이에 위치합니다.
<p style = "color:red;">따옴표 생략</p>따옴표 생략
하지만 따옴표를 생략해도 문법적으로 오류는 아닙니다. style 속성이 따옴표 없이 정상 작동합니다.
<p style = color:red;>따옴표 생략</p>style 속성값의 나열
하나의 속성에 여러 style 속성값을 삽입해도 따옴표 없이 유지가 됩니다. color, background-color, font-size 값이 따옴표 없이 정상 작동합니다.
<p style = color:red;background-color:yellow;font-size:30px;>따옴표 생략</p>복수 속성 나열
복수의 속성을 동시에 삽입해도 속성간에 띄어쓰기만 유지하면 따옴표가 생략되어도 문제없습니다. style, title, class 속성이 따옴표 없이 정상 작동합니다.
<p style = color:red;background-color:yellow;font-size:30px; title = omit class = omit>따옴표 생략</p>하지만 아래와 같은 경우 때문에 따옴표는 왠만하면 생략하지 않는 것이 좋습니다.
HTML 속성값 따옴표 생략 불가
속성값에 따옴표가 없으면 개별 속성에서 띄어쓰기가 발생할 때 오류가 발생합니다.
title 속성 오류
예를 들어 title 속성처럼 띄어쓰기를 사용할 경우 공백 뒤의 문자가 논리형 속성으로 인식됩니다. 후반부의 문자들이 표기가 제대로 되지 않습니다.
title 명이 my name is who 이지만, 마우스를 올려볼 경우 첫 문자인 my만 표시되고 나머지 문자는 표시되지 않습니다. 각각의 문자를 name = "name", is = "is", who = "who" 에서 속성값이 생략된 경우로 인지하기 때문입니다.
<p title = my name is who>title 값이 생략된 속성값으로 인식됩니다.</p>style border 오류
style 속성중에서 border 속성의 경우 테두리 두께, 테두리 선 종류, 테두리 선 색상을 코드 길이를 줄이기 위해서 한 줄에 적을 경우 띄어쓰기를 해야 하는데 따옴표가 없으면 작동하지 않습니다.
<p style=border:1px solid black>테두리 속성의 공백이 오류를 유발합니다.</p>style 공백 오류
style 속성에서 여러 속성값을 나열 할 때 가독성을 위해서 중간에 공백을 삽입할 경우 따옴표가 없으면 작동하지 않습니다.
<p style = color: green; background-color: pink; font-size: blue;>style 속성값 사이의 공백은 따옴표가 없으면 오류를 유발합니다.</p>속성값 큰 따옴표 vs 작은 따옴표
HTML 속성값에는 큰 따옴표 이외에도 작은 따옴표 ''를 사용할 수 있습니다.
작은 따옴표 사용
링크 주소의 앞 뒤에 작은 따옴표 '' 를 삽입해도 정상적으로 작동합니다.
<a href = 'https://en.wikipedia.org/wiki/Diamond'>다이아몬드</a>혼용 불가
큰 따옴표와 작은 따옴표를 하나의 속성값에서 혼용하면 안됩니다. 앞 뒤로 교차로 섞어서 사용하면 오류입니다.
<p title = "오류 1'>오류</p>
<p title = '오류 2">오류</p>큰 따옴표와 작은 따옴표를 같이 사용하고 싶다면 아래와 같이 한 쌍으로 사용해야 합니다.
속성값 따옴표의 중첩
따옴표가 중첩이 되려면 같은 종류의 따옴표 끼리는 포함하거나 포함될 수 없습니다.
반면 큰 따옴표 묶음 사이에 작은 따옴표 묶음이 오면 정상 작동합니다. 작은 따옴표 묶음 사이에 큰 따옴표 묶음이 와도 정상 작동합니다.
큰 따옴표 사이의 큰 따옴표 : 오류
<h2 title = "오류 "발생" 입니다.">큰 따옴표 사이 큰 따옴표는 오류</h2>작은 따옴표 사이의 작은 따옴표 : 오류
<p title = '작은 '따옴표' 오류'>작은 따옴표 사이 작은 따옴표 오류</p>큰 따옴표 사이의 작은 따옴표 : 정상
<p title ="큰 따옴표 '사이' 작은 따옴표">큰 따옴표 사이 작은 따옴표 정상</p>작은 따옴표 사이의 큰 따옴표 : 정상
<p title ='작은 따옴표 "사이" 큰 따옴표'>작은 따옴표 사이 큰 따옴표 정상</p>