태그 보관물: width

HTML 속성(Attributes) 기본 의미 배우기

HTML 속성(Attributes)
html 요소에 대한 추가적인 정보를 제공해주는게 속성이다.
– 모든 html 요소는 속성을 가질 수 있다.
– 속성은 요소에 대한 추가 정보를 제공해준다.
– 속성은 항상 시작 태그에 지정되도록 한다.
– 속성은 일반적으로 name = “값” 형식으로 표현한다.

href 속성

링크 속성을 가지고 있는 href 속성은 <a> 태그로 정의된다. 링크 주소는 다음 예제에 href 속성에서 확인해본다.

예제

<!DOCTYPE html>
<html>
<body>

<h2>href 속성 예제</h2>
<p>연결하고 싶은 웹사이트에 링크 주소를 적어준다.</p>

<a href="https://www.itopening.com">IT Opening 사이트 접속</a>

</body>
</html>

src 속성

html 이미지는 <img> 태그로 정의된다. 이미지 소스의 파일 이름은 다음 예제의 src 속성에서 확인해본다.

예제

<!DOCTYPE html>
<html>
<body>

<h2>src 속성 예제</h2>
<p>이미지를 불러오고 싶은 url 및 경로는 지정해준다.</p>

<img src="https://www.itopening.com/wp-content/uploads/2019/07/html5-%EC%8B%9C%EC%9E%91-%EB%A1%9C%EA%B3%A0-1-150x150.png" alt="https://www.itopening.com">

</body>
</html>

width 와 height 속성

html 이미지에는 width 와 height(너비와 높이)를 지정하는 속성이 있다. 가로,세로 이미지 사이즈를 지정할 수 있다.

예제

<!DOCTYPE html>
<html>
<body>

<h2>src 속성 예제</h2>
<p>이미지를 불러오고 싶은 url 및 경로는 지정해준다.</p>

<img src="https://www.itopening.com/wp-content/uploads/2019/07/html5-%EC%8B%9C%EC%9E%91-%EB%A1%9C%EA%B3%A0-1-150x150.png" alt="https://www.itopening.com" width="500" height="400">

</body>
</html>

너비와 높이는 기본적으로 픽셀 단위로 지정되게 된다. width=”500″은 500 픽셀 너비를 의미한다.

alt 속성

alt 속성은 이미지를 표시할 수 없을 경우 사용할 대체 텍스트를 지정할때 사용된다. 다시 말해 alt 속성은 이미지에 대한 간단한 설명이다.

예제

<!DOCTYPE html>
<html>
<body>

<h2>src 속성 예제</h2>
<p>이미지를 불러오고 싶은 url 및 경로는 지정해준다.</p>

<img src="https://www.itopening.com/wp-content/uploads/2019/07/html5-%EC%8B%9C%EC%9E%91-%EB%A1%9C%EA%B3%A0-1-150x150.png" alt="https://www.itopening.com" alt="HTML5 시작 소개 이미지">

</body>
</html>

※alt 속성은 이미지가 없거나 찾을수 없을때 대체되어 사용될 수 있다.

예제(이미지를 찾을수 없거나 존재하지 않을경우)

<!DOCTYPE html>
<html>
<body>

<img src="itopening-log.jpg" alt="IT Opening 이미지 입니다.">

<p>위 사진에 이미지가 나타나야 되지만 실제론 보이지 않는다. alt 속성을 사용하여 이미지를 대체하고 있다. </p>

</body>
</html>

style 속성

style 속성은 다양한 특성, 색상, 폰트 크기와 같은 요소의 스타일을 지정하는데 사용된다.

예제

<!DOCTYPE html>
<html>
<body>

<h2>style 속성</h2>
<p>스타일 속성을 사용하여 글씨나 배경 등 다양한 특성을 부여할 수 있다.</p>

<p style="color:red">빨간색으로 표현한 글씨</p>

</body>
</html>

lang 속성

문서의 언어를 지정하고 싶다면 <html> 태그안에 lang 속성을 넣어서 선언할 수 있다. 접근성 응용 프로그램이나 검색 엔진에서 언어를 선언하는 것이 중요하기 때문이다.

예제

<!DOCTYPE html>
<html lang="ko-KR">
<body>

...

</body>
</html>

처음 ko 두글자는 언어를 지정하는 것이고, 뒤에 KR은 국가코드를 지정한 것이다.

제목(title) 속성

제목에 속성을 지정하는 것인데, title속성은 <p> 요소에 추가되게 된다. 이렇게 설정하게되면 마우스를 제목에 올려놓게 되면 툴팁이 나타나면서 제목에 대한 타이틀 정보가 보여지게 된다.

예제

<!DOCTYPE html>
<html>
<body>

<h2 title="큰제목">제목 속성</h2>

<p title="단락제목">
단락의 제목을 지정해봤다.
</p>

</body>
</html>

※속성(Attributes) 사용시 주의사항

  • html5 표준은 소문자로 작성하는것을 요구하지 않고 있으며, 대 소문자 구문 또한 없다. 하지만 일반적으로 소문자를 사용할 것을 권장한다. XHTML같은 경우 소문자 사용을 요구하는 경우도 있다.
  • html5에서는 속성안에 큰따옴표(” “)사용을 안해도 정상적으로 html 결과값이 출력된다. 하지만 속성안에 값을 넣을때에 <a href=”링크주소”> 와 같이 큰따옴표를 하는것을 권장한다.
  • 큰따옴표와 작은따옴표를 어느것을 사용해도 상관없다. 2개의 따옴표를 모두 함께 사용해도 된다.

예제

<p title='IT "최강" Opening'>
<p title="IT '최강' Opening">

포스팅 내용 요약 정리

  • 모든 HTML 요소는 속성을 가질 수 있다.
  • title 속성은 추가로 툴팁 정보를 제공하고 있다.
  • href 속성은 링크에 대한 정보를 제공하고 있다.
  • width및 height 속성은 이미지 크기에 대한 정보를 제공한다.
  • alt 속성은 대체 텍스트를 제공한다.
  • html5에서는 큰따옴표, 작은따옴표 모두 사용해도 상관없다.

HTML 기본 속성

다음은 html에서 자주 사용 되는 속성에 대해 일부 정리한 것이다.

속성내용
alt이미지를 표시 할 수 없을 때 이미지의 대체 텍스트를 지정한다.
disabled입력 요소를 사용하지 않도록 지정한다.
href링크 URL (웹 주소)을 지정한다.
id요소의 고유 ID를 지정한다.
src이미지 URL (웹 주소)을 지정한다.
style요소에 대한 인라인 CSS 스타일을 지정한다.
title요소에 대한 추가 정보를 지정한다. (도구 설명으로 표시됨).