[w3schools] HTML Exercises - Attributes

HTML Attributes

1. Add a "tooltip" to the paragraph below with the text "About W3Schools".

Q : <p []="About W3Schools">W3Schools is a web developer's site.</p>
A : <p title="About W3Schools">W3Schools is a web developer's site.</p>

title 속성은 요소에 대한 조언 정보를 tooltip 형태로 나타낸다. 요소에서 title 속성이 생략되다면, 가장 가까운 부모 요소의 title 속성이 암시적으로 적용될 수 있다.

2. Set the size of the image to 250 pixels wide and 400 pixels tall.

Q : <img src="w3schools.jpg" width="[]" height="[]">
A : <img src="w3schools.jpg" width="250" height="400">

width, height 속성은 각각 픽셀단위의 너비, 높이값을 명시한다. 이미지의 width, height 속성은 항상 명시하는것이 좋은데, 그렇지 않다면 브라주저는 이미지의 크기를 알 수 없어 필요한 공간을 남겨두지 않아 페이지의 레이아웃이 변경되는 결과를 초래할 수 있다.

3. Make the element below into a link that goes to "https://www.w3schools.com".

Q : <a []="https://www.w3schools.com">This is a link</a>
A : <a href="https://www.w3schools.com">This is a link</a>

href 속성은 hypertext reference의 약자로, 연결할 주소를 지정하는 속성이다.

4. Specify an alternate text for the image.

Alternate text is useful when the image cannot be displayed, like when the page is read by a screen reader.

Q : <img src="w3schools.png" [ ] ="w3schools Logo">
A : <img src="w3schools.png" alt="w3schools Logo">

img tag의 alt 속성은 Alternate(대체하다)의 약어로 이미지의 대안을 나타낸다. 이미지를 읽을 수 없거나 불러올 수 없을때 alt 속성의 내용이 해당 이미지를 대체하여 나타난다. alt 속성은 반드시 지정해야하는데 그 이유는 이미지를 보지 못하는 사용자가 스크린 리더로 이 이미지가 무엇인지 알 수 있고, 이미지를 제대로 이해하지 못하는 검색엔진이 alt 속성을 받아들이기 때문이다. 그러나 아무 의미 없는 꾸미는 이미지의 경우 alt속성을 선언은 하되, 값을 비워두어야 한다.