초보 웹 개발자에게 도움이 되는 10가지 HTML (Attribute) 속성

웹 개발자 특히 프런트 엔드(Front End) 개발자라면 HTML은 필수입니다.

하지만, 제가 경험한 대부분의 초보 개발자는 Javascript, Vue.js, React, JQuery는 열심히 공부한 반면

HTML, CSS는 대충 넘어 거가는 경우를 많이 보았습니다.

 

이번 시간에는 초보 개발자가 꼭 알아야 할 HTML (Attribute) 속성을 알려드릴 테니

끝까지 읽고 레벨업 하시시기 바랍니다.

 

놓치기 쉬운 HTML 속성 알아보기

Accept 속성 :  파일 첨부 시 특정 파일만 선택할 수 있다.

<input> 태그는 로그인 아이디, 이름, 암호 등 사용자에게 입력을 받고자 할 경우 사용하는 태그입니다.

이 중에서 type="file"인 경우에 사용되는 accept라는 속성이 있습니다.

 

이 속성은 파일 첨부 시 특정 확장자만 업로드할 수 있도록 제한하는 역할을 합니다.

 

아래의 예제는 그림 파일만 업로드하기 위해 파일 확장자가. jpg,. jpeg,. png,. gif 만 선택되도록 제한한 것입니다.

<input type="file" accept=".jpg, .jpeg, .png, .gif" />

 

Alt 속성 : 이미지가 안 나타날 경우 대신 보여줄 텍스트 

웹 페이지에서 이미지가 제대로 나타나지 않을 경우, 이미지 대신에 보여줄 텍스트 문구입니다.

시력이 약한 사람들에게 유용한 스크린 리더 (screen reader) 프로그램에서 alt 태그를 읽어 주고,

SEO 최적화에 필요하니 반드시 넣기 바랍니다.

<img src="tree.png" alt="나무" />

 

Autocomplete 속성 : 텍스트 입력 시 자동 완성 기능을 제공한다.

웹 페이지에서 정보를 입력받는 <form>, <input>, <textarea>에서 이미 입력된 글자를 보여주어

입력 쉽게 도와주는 기능이다.

상황에 따라서 편리할 수 도 있고 불편해 할 수 있도 있으니 상황에 맞게 사용하자.  

<input type="text" name="userName" id="userName" autocomplete="on" />

 

Start 속성 : <ol> 태그 사용 시 시작 번호 변경

<ol> 태그는 숫자 1로 시작되는 줄 번호를 자동 넣어 줄 수 있는데 

start 속성을 지정하면 처음 시작되는 번호를 변경할 수 있다.

<ol start="3">
    <li>사과</li>
    <li>배</li>
</ol>

 

Contenteditable 속성: 입력된 내용을 수정할 수 있다.

웹 페이지는 <form>과 관련된 <input>, <select>, <textarea> 외에도 수정 가능하도록 만든다.

해당 속성을 적용 후 클릭 하면 내용을 수정할 수 있다.

잘 활용하면 사용자 입력을 편리하게 개선할 수 있으니 활용해 보자.

<div contenteditable="true">내용을 수정할 수 있습니다.</div>

 

Title 속성: 마우스 오버 시 추가적인 내용을 알려 준다.

앞서 말한 Alt 속성과 비슷하게 사용자가 Mouse Over 했을 경우 간단한 설명 또는 제목을 알려준다.

모든 HTML 태그에 사용할 수 있다.

<a href="download.xlsx" title="회계보고서">다운로드</a>

 

Srcset 속성: 사용자의 화면 크기에 맞는 이미지를 보여준다.

<img>, <source>, <picture> 태그에서 사용하는 이미지를 

모바일, PC, 태블릿 등 화면 크기가 다를 경우 Browser가 알맞은 화면의 이미지를 보여 줄 수 있도록 한다.

<img srcset="image-small-480px.jpg 480w, image-medium-960px.jpg 960w, image-large-1024px.jpg 1024w " src="image-large-1024px.jpg">

 

Placeholder 속성: input 태그 입력 시 설명 또는 안내하려는 글자를 미리 보여 준다.

input type : text, email. phone, tel, password 등에 사용한다.

<input type="text" id="loginid" name="loginid" " placeholder="아이디를 입력해 주세요.">

 

Multiple 속성: 선택 항목을 여러 개 선택할 수 있다.

일반적으로 select, file  태그는 한 번에 하나만 선택할 수 있지만 multiple을 사용할 경우

여러 개를 선택할 수 있다.

<input type="file" multiple />
<select multiple>
    <option value="사과">사과</option>
    <option value="배">배</option>
    <option value="오렌지">오렌지</option>
    <option value="포도">포도</option>
</select>

 

Hidden 속성: 화면에서 감추어서 안 보이게 한다.

HTML 요소를 보이게 안보이게 할 때 많이 사용한다.

해당 속성만 입력하면 CSS, Javascript 보다 아주 쉽게 처리할 수 있다.

<div hidden>안보이게 만들기</div>

 

이번 시간에는 간단하지만 초보 웹 개발자에게 도움이 되는 HTML 속성을 알아보았다.

잘 기억해서 사용하면 사용자에게 더 편하고 개발 기간도 단축될 수 있으니 많이 활용해 보자.