티스토리 뷰

HTML

HTML 번역 05: HTML 속성(attributes)

rewriter751 2016. 2. 11. 23:57

HTML Tutorial

- 속성은 HTML 요소들의 투가 정보를 제공한다.

HTML 속성

    1. HTML 요소는 속성이 있을 수 있다.  
    2. 속성은 한 요소의 부가 정보를 제공한다.  
    3. 속성은 시작·태그 안에서 기술된다.  
    4. 속성은 name=“value”와 같이 이름/값 짝으로 쓰인다.

언어 속성

    1. 문서에 쓰인 언어는 <html> 태그 안에서 선언될 수 있다.  
    2. 특정 언어는 언어 속성에서 선언된다.  
    3. 언어를 선언하는 것은 앱 접근성(screen readers)과 검색 엔진을 위해 중요하다.  
          <!DOCTYPE html>  
          <html lang="en-US">  
          <body>

          <h1>My First Heading</h1>  
          <p>My first paragraph.</p>

          </body>  
          </html>  
    4. 첫 번째 두 개 문자(en)가 언어를 지정한다. 지역어가 있다며, 문자 두 개를 더 사용하라(US).

제목 속성

    1. HTML 문단은 <p> 태그로 선언된다.  
    2. 예에서 <p> 요소는 제목 속성을 가지고 있다. 이 속성의 값은 “About W3Schools”이다.  
        - 예  
              <p title="About W3Schools">  
              W3Schools is a web developer's site.  
              It provides tutorials and references covering  
              many aspects of web programming,  
              including HTML, CSS, JavaScript, XML, SQL, PHP, ASP,  
              etc.  
              </p>  
    팁: 마우스 커서를 이 요소 위로 가져가며 제목이 tooltip(팝업 정보창 정도로 생각하면 됨)으로서 보여질  
      것이다.

href 속성

    1. HTML 링크는 <a> 태그로 정의된다. 링크의 주소는 <href> 속성으로 지정된다.  
        - 예  
              <a href="http://www.w3schools.com">This is a link</a>  
    2. 이후에 링크와 <a> 태그에 대해 자세히 다룰 것이다.

크기 속성

    1. HTML 이미지는 <img> 태그로 정의된다.  
    2. 원 파일명(src), 이미지의 크기(width와 height)는 속성으로써 모두 제공된다.  
        - 예  
             <img src="w3schools.jpg" width="104" height="142">  
    3. 이미지의 크기는 픽셀로 지정된다: width=“104”는 스크린의 픽셀 폭 104를 의미한다.  
    4. 이후에 이미지와 <img> 태그에 대해 더 자세히 다룰 것이다.

대체(alt) 속성

    1. 대체 속성은 HTML 요소가 보이지 않을 때 사용할 대체 텍스트를 지정한다.  
    2. 속성값은 “screen readers”에 의해 준비될 수 있다. 이 방식으로 웹페이지를 “듣는” 맹인과 같은  
      사람은 해당 요소를 “들을” 수 있다.  
        - 예  
              <img src="w3schools.jpg" alt="W3Schools.com"  
              width="104" height="142">

제안: 항상 속성을 소문자로 쓰라

    1. 표준 HTML 5에서 소문자 속성명을 꼭 써야 하는 것은 아니다.  
    2. 제목 속성은 Title이나 TITLE과 같이 대소문자로 쓸 수 있다.  
    3. W3S는 HTML 4에서는 소문자를 권장했고, XHTML과 같이 보다 엄격한 문서 유형에서는 소문자를 요구했다.  
    팁: 소문자가 가장 일반적이다. 소문자는 타이핑하기 쉽다. W3S에서는 항상 소문자 속성명을 쓸 것이다.

제안: 항상 속성값을 인용부호로 싸라

    1. HTML 5에서 속성값을 인용부호로 둘러싸야 하는 것은 아니다.  
    2. 아래와 같이 herf 속성이 쓰일 수 있다.  
        - 예  
              <a href=http://www.w3schools.com>  
    3. W3C는 HTML 4에서 인용부호를 권장했고, XHTML과 같은 엄격한 문서 유형에서는 인용부호를 요구했다.  
    4. 때로 인묭부호로 싸는 것인 필수적일 수 있다. 안에 포함된 공백문자(스페이스) 때문에 정확하게 표시되지 않을  
      수 있다.  
        - 예  
              <p title=About W3Schools>  
    5. 인용부호를 사용하는 것은 매우 일반적이다. 인용부호를 빼먹으면 에러가 발생할 수 있다. W3Schools에서는  
      속성값을 인용부호로 둘러쌀 것이다.

큰따옴표 또는 작은따옴표

    1. HTML에서는 큰따옴표가 가장 일반적이지만 작은따옴표도 쓸 수 있다.  
    2. 특정 상황에서 속성값 자체에 큰따옴표가 있는 경우에는 작은따옴표를 쓰는 것은 필수적이다.  
          <p title='John "ShotGun" Nelson'>  
    3. 또는 반대의 경우  
          <p title="John 'ShotGun' Nelson">

이 장의 요약

    1. 모든 HTML 요소에는 속성이 있을 수 있다.  
    2. HTML title 속성은 부가적인 “tool-tip” 정보를 지정한다.  
    3. HTML href 속성은 링크의 주소를 지정한다.  
    4. HTML width와 height 속성은 이미지의 크기를 지정한다.  
    5. HTML alt 속성은 screen readers를 위한 테스트를 지정한다.  
    6. W3Schools에서는 속성명으로 항상 소문자를 쓴다.  
    7. W3Schools에서는 속성값을 큰따옴표로 둘러싼다.

HTML 속성

    1. 아래는 HTML에서 자주 쓰이는 속성들을 알파벳 순서로 배열한 것이다.  
          Attribue      Description  
          alt           Specifies an alternative text for an image  
          disabled      Specifies that an input element should be disabled  
          href          Specifies the URL (web address) for a link  
          id            Specifies a unique id for an element  
          src           Specifies the URL (web address) for an image  
          style         Specifies an inline CSS style for an element  
          title         Specifies extra information about an element (displayed as a tool tip)

    2. 각 HTML 요소에 쓰이는 모든 속성의 목록은 HTML Tag Reference를 참조하라.

'HTML' 카테고리의 다른 글

HTML 번역 07: HTML 문단(paragraphs)  (0) 2016.02.23
HTML 번역 06: HTML 표제(headings)  (0) 2016.02.14
HTML 번역 04: HTML 요소(elements)  (0) 2016.02.09
HTML 번역 03: HTML 기본 예(basic examples)  (0) 2016.02.09
HTML 번역 02: HTML 편집기(editors)  (0) 2016.02.09
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함