[HTML] <a>, <button>, <input> 용도맞게 사용하기

페이지를 코딩해서 링크를 걸 때 아무거나 <a> 링크로 만드는 것이 아니라 용도에 맞게 사용하는 것이 중요하다.

 

• <a> 페이지 링크를 걸 때 문서간의 url을 '연결'하기 위해 주로 사용되는 일반적인 방식
• <button> url을 연결하지않고 단순하게 사용자 인터페이스만을 '조작'하기 위한 버튼. type을 명시하지않으면 submit 으로 실행하기때문에 반드시 type="button"으로 지정해야한다.
• <input> 사용자의 입력을 서버로 '전송' 하기 위한 버튼으로 전달하는값을 받거나 전달할 때 사용하는 마크업

 

 

1. <a> 태그

---

<a> 요소의 어원은 앵커(anchor-닻)으로써 문서간의 url을 '연결'하기 위한 버튼이 목적이다.

기본 링크들은 a 요소로 마크업하고, 기능을 구현하기 위해서 (ex. 팝업창 띄우기, 어떤 요소를 숨기거나 보이게 하기 등등)

클릭함으로써 이벤트가 발생시키는 것은 button을 이용하는 시멘틱한 마크업을 해야한다.

 

 

 

 

2. button 태그

---

폼(form)을 전송 기능을 하는 <button>과 <input type="submit / nutton / reset" />요소와 동일한 기능을 수행한다.

기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행하기때문에 알맞는 속성을 지정한다.

 

• <button type="submit"> 폼(form)을 전송하는 기능을 담당 [default]
• <button type="reset"> 폼(form) 입력한 내용을 초기화하는 기능
• <button type="button"> 자바스크립트의 도움을 받아 기능 구현 인터페이스를 조작하는 기능 

디자인적인 관점에서 input 요소와 달리 button은 매우 자유롭다.

<button>...</button> 사이에 다른 태그들을 삽입 가능하며 최근 라이브러리에서

button 요소들에 대한 꾸밈을 적용한 CSS를 배포로 간단히 클래스명을 이용해 적용할 수 있다.

 

 

 

◈ <button> VS <input type="submit"> ----- 기능적으로 차이가 있을까? ◈

input과 button의 큰 차이점이라면 내용을 가질 수 있다는 점.

button 요소는 텍스트 뿐 아니라 이미지 요소를 자식으로 포함할 수 있다.

그리고 button은 "열고 닫는 태그" 이고 input은 "스스로 닫는 태그" 라는 점 이다.

그렇기 때문에 button 요소는 span, img같은 인라인 요소를 안에 포함할 수 있으며

나중에 CSS로 스타일을 줄 때 다양한 스타일이 가능하다.

 

 

 

 

2-1. Button과 input CSS 초기값 만들기

button 이나 input 요소는 웹 브라우저 기본 값으로 회색 배경과 2px 크기의 outset 스타일이 지정되어있는데

이 값을 다음과 같이 초기화(reset) 할 수 있다.

button {border:0; padding:0; background:transparent; cursor:pointer; *overflow:visible; }
input {border:0; padding:0; background:transparent; cursor:pointer; *overflow:visible; }

*overflow:visible 속성 값을 추가 한 이유는 버튼 텍스트 길이에 비례하여

비정상적으로 버튼의 폭이 커지는 IE 6-7 브라우저의 버그를 해결하기 위한 'hack'이다.

 

 

 

2-2. button 디자인 시 참고사항

• display: inline-block - 부모 요소의 text-align 속성으로 버튼의 정렬 위치를 정할 수 있게 사용한다.
• font-family: inherit - 버튼 요소에 상속되지 않는 글꼴을 강제상속
• vertical-align: middle - 다른 요소를 만날때 수직 가운데 정렬을 대비
• cursor: pointer - 커서에 손가락 표시
• white-space: nowrap - 버튼의 크기가 작을때 줄바꿈 되지 않는다.
• text-decoration: none - 글자의 밑줄 제거
• background : 원하는 디자인 이미지 넣기
• background: transparent - 기본 배경색을 투명화
• border: none - 테두리 속성을 초기화한다.