[Front-End] 링크와 버튼
브라우저 링크 스타일
일반적으로 파란색 텍스트와 밑줄을 사용하여 일반 텍스트와 구별하고 사용자의 주의를 끔.
아직 열리지는 않았지만 클릭한 링크는 빨간색 텍스트, 이전에 방문한 링크는 보라색 텍스트 스타일로 지정.
+ css 스타일링) 텍스트 밑줄 : text-decoration: underline;
⤷ text-decoration 정보 developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
링크 스타일링
★ 링크를 주변 텍스트와 구별해야 한다!
기본 파란색 텍스트는 밑줄 링크 스타일이 CSS 속성을 사용하여이 차별화를 수행 : color와 text-decoration.
링크의 텍스트 자체인<a> 태그 안에 Anchor text는 링크 된 리소스를 설명함.
}◎ 툴팁
HTML의 title 속성을 사용하여 추가적인 설명을 제공할 수 있음.
→ " Tooltip(툴팁) " : 사용자가 커서를 요소 위에 놓으면 텍스트가 커서 근처의 작은 상자로 나타나는 메시지.
ex) Celebrity에 커서를 놓으면 커서 근처에 툴팁 텍스트가 나타난다.
<p>
<a href="연결 링크" title="툴팁 텍스트">Celebrity</a> is the new song of IU!
</p>⤷ HTML title 속성 정보 developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
◎ 오버 상태
마우스 오버 "hover"를 사용하여 스타일 요소에서 사용자의 상호 작용을 시각적으로 나타낼 수 있음.
ex) 사용자가 커서를 요소 위에 놓으면 텍스트의 색상을 검은색에서 파란색으로 변한다.
a {
color: black;
}
a:hover {
color: blue;
}⤷ hover 정보 developer.mozilla.org/en-US/docs/Web/CSS/:hover
}
◎ 커서
링크 위로 마우스를 가져갈 때 사용자의 커서 "cursor"가 기본 모양에서 가리키는 손 모양으로 변경됨.
ex) cursor를 pointer로 해주면 해당 요소의 부분에서 커서의 모양이 손 모양으로 변한다.
a {
cursor: pointer;
}☆ 모바일 장치에는 일반적으로 커서가 없음을 유의.
⤷ cursor 정보 developer.mozilla.org/en-US/docs/Web/CSS/cursor#examples
링크 상태
링크에는 네 가지 주요 상태가 있음.
• :link → 보통(클릭하지 않음)
• :visited → 방문
• :hover → 마우스 오버
• :active → 활성(클릭)
☆ 순서(link -> visited -> hover -> active)대로 사용해야 함.
⤷ CSS의 Pseudo-class 정보 developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
버튼
- 스큐어모피즘(Skeuomorphism) 디자인 버튼
스큐어모피즘이란? 실제 대응 관계에 있는 것을 복제하거나 모방하는 UI 요소의 개념으로 사용자가 디자인적으로 쉽게 이해하는데 도움이 된다.
→ 스큐어모피즘 버튼 디자인은 실제 버튼의 모양과 상호작용을 모방하는 것을 목표로 함.
이미지 파일, CSS 규칙(선호) 또는 두 가지 모두를 사용하여 구현 가능.
- 플랫 디자인 버튼
플랫 디자인이란? 컴퓨터 인터페이스가 반드시 실제 인터페이스를 모델링할 필요가 없다는 사실을 포함하는 스큐어모피즘의 대안적인 접근 방식. 일반화를 위해 UI 요소에 대한 단순성과 혼잡함을 사용.
→ 2D로 표현되고 일반적으로 직사각형, 둥근 직사각형, 원으로 나타남.
버튼에 대해 알려주는 구체적인 설명의 레이블과 함께 두고 사용자가 혼동하지 않도록 해야 함. ex) 여기를 클릭하세요.
★ 버튼도 링크처럼 오버 상태와 커서 포인터를 사용할 수 있다.