[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) 여기를 클릭하세요.

 

★ 버튼도 링크처럼 오버 상태와 커서 포인터를 사용할 수 있다.