앞의 글:
2020/03/03 - [HTML and CSS] - [HTML] 3. HTML 기본 예제
2020/03/04 - [HTML and CSS] - [HTML] 4. HTML 요소
우리가 실제로 손 글씨를 쓸 때도 사람마다 글씨체가 다르고,
어떤 필기구를 사용하느냐에 따라 색깔, 굵기 등이 달라진다.
HTML에서 그런 효과를 구현하는 것을 HTML 속성이라고 한다.
HTML 속성은 HTML 요소에 추가적인 정보를 전달하는 역할을 한다.
HTML 속성의 특징은 다음과 같다.
- 모든 HTML 요소는 속성을 가지고 있다.
- 속성은 요소에 추가적인 정보를 전달한다.
- 속성은 항상 시작하는 tag 안에 명시되어 있다.
- 속성은 보통 이름/값으로 짝을 맺어서 입력한다. (이름="값")
1. href 속성에 대해 알아보자.
HTML 링크는 <a>와 함께 정의된다.
이 때 링크된 주소는 href 속성으로 명시되어야 한다.
<a href="https://honey-bear.tistory.com/">This is a link</a>위와 같이 링크할 웹 사이트의 URL을 넣으면 된다.
2. src 속성에 대해서 알아보자.
HTML 이미지들은 <img> tag와 함께 정의된다.
이 때 이미지 소스가 되는 파일 이름이 src 속성으로 명시되어야 한다.
<img src="img_girl.jpg">위와 같이 넣고 싶은 이미지의 URL을 넣으면 된다.
3. width 와 height 속성들에 대해 알아보자.
HTML 이미지는 width와 height 속성 또한 가질 수 있다.
이들은 이미지의 너비와 높이를 명시해준다.
<img src="img_girl.jpg" width="500" height="600">width와 height는 기본적으로 pixel단위로 입력한다.
그렇기에 width="500"은 너비쪽으로 500 pixel들이 존재한다는 것이다.
나중에 이미지에 관한 내용은 따로 다룰 것이다.
4. alt 속성에 대해 알아보자.
alt 속성은 대체해서 사용되는 텍스트를 정의한다.
다시 말해, 이미지 불러오기가 실패하였을 때, 대신해서 alt 속성으로 정의된 텍스트가 나온다.
<img src="img_girl.jpg" alt="Girl with a jacket">alt에 언급된 텍스트는 이미지가 나오더라도 "스크린 리더"로 읽히기 때문에,
화면을 볼 수 없는 사람에게 매우 도움이 되므로 이미지를 넣을 때 함께 넣어주도록 하자.
5. style 속성에 대해 알아보자.
style 속성은 요소에 들어가는 내용에 색깔, 폰트, 글씨 크기 등을 조절할 수 있게 해준다.
style 속성은 다음과 같이 사용할 수 있다.
<p style="color:red">This is a red paragraph.</p>style은 HTML이 아닌 CSS에서 정의되는 경우가 흔하다.
CSS에 대해서는 추후에 다루도록 하자.
6. lang 속성에 대해 알아보자.
문서의 언어에 대해 <html> tag 안에서 언급할 수 있다.
그 때 사용되는 속성이 lang 속성이다.
이렇게 사용되는 lang 속성은 앞에서 말한 "스크린 리더" 혹은 검색 엔진에 영향을 미친다.
lang 속성은 다음과 같이 언급될 수 있다.
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>"en-US"에서 처음 en은 언어 'English'를 언급하고, 그 언어에 방언이 있다면
추가적으로 두 글자를 더 붙여주면 된다.
7. title 속성에 대해 알아보자.
title 속성은 앞에서도 계속 다루었던 <p> 요소 안에서 사용될 수 있다.
이렇게 입력된 title속성은 당신이 <p>로 구현된 단락 위에 마우스를 올려 놓았을 때
툴팁으로 나타난다.
<p title="I'm a tooltip">
This is a paragraph.
</p>
HTML 속성을 사용할 때 주의할 점이 있다!!
앞에서 총 7가지의 속성에 대해 알아보았다.
HTML5은 기본적으로 속성에 큰따옴표(")를 사용할 필요가 없다.
*실제로 href 속성 또한 큰따옴표의 유무에 상관없이 사용 가능하다
하지만 여기서는 큰따옴표를 사용하는 것을 권한다.
이유는 두 가지인데,
첫째로, XHTML에서는 큰따옴표를 사용하지 않으면 제대로 속성이 읽히지 않는다.
둘째로, 속성이 띄어쓰기를 포함하고 있을 때, 큰따옴표가 없으면 제대로 구현되지 않는다.
다음은 오류가 없는 예시와 오류가 있는 예시이다.
오류가 없는 예시:
<a href=https://honey-bear.tistory.com/>
<a href="https://honey-bear.tistory.com/">*첫번째 줄의 코드는 XHTML에서는 작동하지 않는다.
오류가 있는 예시:
<p title=About Honey Bear>*띄어쓰기가 있어서 제대로 작동하지 않는다.
어쨌거나 큰따옴표를 쓰는 것이 일반적이다.
그러면 꼭 큰따옴표를 사용해야 할까?
답은 <아니다>이다.
굳이 큰따옴표를 사용하지 않고 작은따옴표를 사용해도 된다.
다만 큰따옴표가 일반적으로 사용될 뿐이다.
하지만 큰따옴표 혹은 작은따옴표가 꼭 사용되어야 할 때가 있다.
아래 예시를 보자.
<p title='John "ShotGun" Nelson'><p title="John 'ShotGun' Nelson">위의 두 가지 예시에서는 title 안에 Shotgun에 큰따옴표 혹은 작은따옴표를 쓰고자 한다.
이럴 때는 가장 바깥에 안쪽에서 사용되지 않은 따옴표를 사용하면 된다.
*매우 드문 케이스지만 이럴 때 작은따옴표를 사용한다.
//
글을 마무리하기 전에,
여기서 잘 사용되지는 않지만 재미있는 추가 속성을 하나 소개하겠다.
그것은 disabled 속성이다.
이 속성은 특정 요소를 아예 비활성화 시켜버린다.
그럼 아예 요소를 안 만들면 되는데 굳이 만들어놓고 disabled 속성을 쓸까?하는 의문이 들것이다.
사용되는 이유는 한 가지,
사이트를 방문한 방문자가 스스로 사용할 요소를 선택할 수 있게 만들기 위해서이다.
기본적으로 한 번 작성된 HTML은 변경되지 않지만
이를 Java라는 언어로 작성된 javascript를 통해서 HTML에서 구현하지 못하는 기능을 구현할 수 있다.
대표적인 것이 사이트 방문자가 특정 버튼을 누르거나 입력을 주면 HTML에 그 신호를 보내는 기능이다.
그리고 그 신호가 disabled 속성을 활성화 시킨다면,
사이트 방문자가 원하는 기능만 사용할 수 있도록 커스터마이징된 웹 사이트를 구현할 수 있다.
//
여기서 총 8가지 속성에 대해서 배웠다.
이것보다 더 많은 속성이 존재하지만,
일단 여기서 언급된 속성들이 주로 사용되는 것들이다. *disabled 제외하고..
천천히 나아가도록 하자.
'HTML & CSS' 카테고리의 다른 글
| [HTML] 7. HTML 문단 (0) | 2020.03.09 |
|---|---|
| [HTML] 6. HTML 제목 (0) | 2020.03.08 |
| [HTML] 4. HTML 요소 (0) | 2020.03.04 |
| [HTML] 3. HTML 기본 예제 (0) | 2020.03.03 |
| [HTML] 2. HTML 에디터 (0) | 2020.03.03 |