Links and Buttons

자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.

⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️

---

LINKS AND BUTTONS

Browser Link Styles

기본적으로 브라우저에는 모든 웹 페이지에서 사용할 수 있도록 브라우저("user agnent")에 포함된 기본 스타일 집합인 user agent stylesheet이 포함되며, HTML5 규격은 콘텐츠를 렌더링하기 위한 기본 동작 집합을 정의한다.

이러한 스타일은 raw HTML 파일을 모든 사용자가 쉽게 읽을 수 있도록 스타일링하는 데 사용되며, user agent stylesheet는 headings, tablse, links,및 보다 기본적인 HTML 요소를 위한 스타일링을 포함한다.

대부분의 사용자는 디자이너가 자신의 사용자 지정 디자인으로 이러한 스타일을 재정의하기 때문에 이러한 스타일을 자주 보지 못한다.

그러나 브라우저가 적용하는 기본 동작과 같이 일관된 사용자 환경 패턴을 유지하는 것이 일관된 환경을 만드는 데 중요하다.

 

예전부터 링크는 클릭 가능성에 대한 사용자의 주의를 끌기 위해 파란색 텍스트와 밑줄을 사용하여 일반 텍스트와 구별되어왔다.

많은 웹 사이트와 user agent stylesheet는 여전히 이러한 링크 스타일을 사용한다.

 

브라우저는 또한 두 개의 다른 링크 상태('활성' 클릭)와 이전에 방문한 상태)를 스타일링한다.

대부분의 user agent stylesheet에서 클릭된 링크는 빨간색 텍스트로 표시되고 이전에 방문한 링크는 보라색 텍스트로 스타일링된다.

Link Styling

link styiling의 가장 중요한 것은 링크와 주변 텍스트를 구분하는 것이다.

기본 블루 텍스트와 밑줄 링크 스타일은 두 가지 CSS property인 color와 text-decoration을 사용하여 이러한 차별화를 수행한다. 

이 두 가지 모두 링크를 구별하는 좋은 방법이며, 대부분의 웹 사용자에게 익숙한 표시이다.

background-color, font-weight, border 등의 CSS 속성을 사용할 수 있다.

 

링크 스타일은 다른 페이지 텍스트로 복제하면 안 된다.

링크 색상은 설계의 나머지 부분에 있는 텍스트 색상과 충분히 대조되어야 한다.

예를 들어, 링크가 밑줄 친 경우 다른 텍스트는 밑줄 쳐서는 안된다.

 

링크의 텍스트 자체인 anchor text는 연결된 리소스를 설명해야 한다.

디자인의 문제는 아니지만 사용적합성, 접근성 및 SEO에 중요하다.

예를 들어, 이 paragraph의 시작 부분의 링크는 다음과 같이 다시 작성된다면 화면 판독기로 paragraph를 분석하기가 훨씬 더 어려울 것이다.

Text for links, known as anchor text, should be 
<a href="https://en.wikipedia.org/wiki/Anchor_text" 
rel="noopener noreferrer" target="_blank">descriptive</a>.

Tooltips and Titiles

HTML title attribute을 사용하여 텍스트로 추가 컨텍스트를 제공한다.

title attribute은 HTML 요소에 제공될 수 있지만, 클릭할 수 있는 요소를 위한 추가 컨텍스트 또는 자문 텍스트로 매우 유용하게 사용된다.

 

대부분의 브라우저는 title atrribute 텍스트를 tooltip으로 표시한다.

즉, 사용자가 요소 위에 커서를 놓으면 커서 근처의 작은 상자에 텍스트가 tooltip으로 표시된다.

 

tooltip을 title attribute로 추가하는 방법

<p>
  <a href="https://www.codecademy.com" 
  title="Codecademy is an online learning
  platform">Codecademy</a> is the best place to 
  learn to code!
</p>

Codecademy is the best place to learn to code!

Hover States and Cursors

CSS pseudo-class:hover를 사용하여 마우스 호버의 요소를 스타일링한다.

예를 들어 사용자가 링크 위에 마우스를 놓을 때 링크 앵커 텍스트의 색상을 파란색에서 주황색으로 변경하려면 다음 CSS를 사용한다.

a {
  color: blue;
}
 
a:hover {
  color: orange;
}

첫 번째 규칙은 기본적으로 링크 색상을 파란색으로 설정하며, 사용자가 링크 위에 마우스를 놓으면 두 번째 규칙이 <a> 태그의 color attribute을 재정의하여 텍스트가 주황색으로 바뀐다.

사용자가 커서를 링크에서 멀리 이동하면 텍스트 색상이 파란색으로 되돌아간다.

 

링크 위를 맴돌 때 텍스트 스타일이 변경될 뿐만 아니라 사용자의 커서도 기본 모양에서 포인팅 핸드로 변경해야 합니다. CSS 커서 속성은 이 동작을 제어하는 데 사용됩니다. 예를 들어 이 동작을 모든 a 태그에 추가하려면 다음 규칙을 사용할 수 있습니다.

a {
  cursor: pointer;
}

일반적으로 브라우저 user agent stylesheet에 포함되며 HTML5 default styles에도 존재한다.

 

hover state styling을 링크의 유일한 표시로 사용하면 안된다.

클릭할 수 있는 내용을 알리기 위해 마우스를 전체 문서 위로 이동하도록 강요해서는 안되며, 또한 모바일 브라우저에서는 호버 상태에 액세스할 수 없다.

모바일 장치에는 일반적으로 화면 커서가 없으며 사용자가 실제로 장치를 터치해야(클릭 이벤트 트리거) 상호 작용할 수 있습니다.

Link States

링크에는 normal(클릭되지 않음), hover, active(클릭됨) 및 visited의 네 가지 기본 상태가 있다.

이 네 가지 상태는 CSS pseudo-claasses:link, :hover, :active, :visited 를 연결한 것이다.

이 네 가지 상태를 사용하여 링크 상호 작용의 상태에 대해 사용자에게 시각적 피드백의 전체 범위를 제공할 수 있다.

 

각 상태는 여전히 문제의 요소가 링크임을 명확히 해야 하며, 이는 사용자가 행동을 다르게 인식할 수 있도록 텍스트를 non-link 텍스트와 동일하게 만들거나 링크의 외관을 크게 변경하지 않아야 한다는 것을 의미한다.

 

link state pseudo-class 규칙의 순서는 적절한 정보를 드러내는 데 중요하다.

사용자가 링크를 누른 다음 클릭할 때 이러한 스타일은 항상 사용자의 기록을 둘러싼 static styling(invisited :link 및 :visited)을 링크로 재정의해야 한다.

 

규칙의 적절한 순서

• :link
• :visited
• :hover
• :active

이 순서를 사용하면 규칙 cascade properly와 사용자가 링크 상태에 대한 가장 적절한 시각적 피드백을 받을 수 있다.

Skeuomorphism and Flat Design

버튼은 사용자 상호 작용 및 탐색의 또 다른 기본 요소이다.

실제 상대방을 복제하거나 모방하는 UI 요소의 개념을 스큐어모피즘(skeuomorphism)이라고 한다.

 

사용자가 익숙한 실제 객체와 인터페이스 요소 사이에 은유를 그릴 수 있다면, 훈련 없이 사용할 수 있는 방법을 더 잘 알 수 있다.

버튼에서 웹 버튼이 물리적 인터페이스의 실제 버튼과 유사하게 나타나는 경우 사용자는 버튼과 상호 작용하는 방법이 버튼을 누르는 것임을 신뢰할 수 있다.

 

flat design는 컴퓨터 인터페이스가 실생활 인터페이스를 모델링할 필요가 없다는 사실을 수용하는 스큐어모피즘의 대안적 접근법이다.

사용자가 디지털 표시장치와 인터페이스에 더 친숙해짐에 따라 디자이너들은 물리적 상호작용을 모델링할 필요성을 덜 느끼고 ,대신 대화형 요소를 나타내기 위해 다른 signifire에 의존하게 되었다.

평면 디자인을 일반화하려면 UI 요소에 단순함과 복잡함 부족이 필요하다.

Buttons: Skeumorphis styling

스큐어모프 버튼 디자인은 실제 버튼의 모양과 상호 작용을 모방하는 것을 목표로 하며, 종종 버튼을 누를 때 '상승된(raised)' 모양과 클릭할 때 '압박된(pressed)' 모양을 포함한다.

 

스큐어모프 버튼 설계는 이미지 파일, CSS 규칙 또는 둘의 조합을 사용하여 구현될 수 있다.

CSS 스타일이 이미지 파일보다 로딩 속도가 더 빠르고 파일 크기가 더 작으며 다른 화면 크기와 해상도에서 보다 일관된 스케일링과 외관을 허용하기 때문에 이미지 파일 보다 선호된다.

현대의 CSS3는 많은 2-D 및 3-D 효과와 애니메이션을 지원하며 많은 스큐어모프 버튼 디자인을 자체적으로 만들 수 있다.

 

CSS 규칙을 사용할 경우, 실제 버튼과의 상호 작용을 모델링하기 위해 hover 및/또는 active state를 사용하는 것이 중요하다.

예를 들어, 최소 3-D 버튼 디자인을 구현하기 위해 다음과 같은 CSS 규칙 집합을 사용할 수 있다.

.button {
  padding: 5px;
  border: 1px solid black;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0px 5px;
}
 
.button:hover {
  cursor: pointer;
}
 
.button:active {
  margin-top: 5px;
  color: black;
  box-shadow: 0px 0px;
}

그런 다음 다음 다음 HTML로 버튼 요소를 생성할 수 있습니다.

<div class="button">Click me</div>

.button class의 기본 상태는 테두리(border 과 border-radius property)가 둥근 기본 '버튼' 모양이며 box-shadow를 사용할 때 약간 높게 나타난다.

시각적 피드백을 위해 :hover 커서가 추가된다.

버튼을 클릭하고(:active), box-shadow가 제거되어 margin-top이 버튼을 5px 아래로 이동하면 누른 것처럼 보인다.

Button: Flat Design

요소는 화면에 평평하게 나타나며 디자이너는 클릭 가능성을 나타내기 위해 다른 스타일과 기호에 의존해야 한다.

 

평면 디자인 버튼은 일반적으로 직사각형, 둥근 직사각형 또는 원으로 나타난다.

이러한 모양은 버튼 요소에 널리 사용되므로 사용자는 버튼 요소로 인식하여 클릭이 가능할 것으로 예상하는 경우가 많다.

 

평면 디자인에서 버튼을 둘러싼 명확한 sifnifier이 적기 때문에 다른 페이지 구성요소와 시각적으로 구별되어야 한다.

 

특히 평면 디자인에서 버튼 텍스트는 명확성을 위해 매우 중요하다.

버튼을 특정 설명 라벨과 결합하면 사용자 혼동의 가능성이 줄어든다.

Buttons: Hover States

버튼은 hover state와 cursor: pointer declaration을 사용한다.

모바일 기기의 호버 상태의 단점에 대한 모든 주의 사항은 버튼에 적용되지만 버튼 사용은 여전히 권장된다.

 

사용자는 버튼을 클릭할 수 있을 것으로 예상한다.

버튼은 전체 요소(직사각형/원형 본문, 텍스트, 이미지)중 임의의 수로 구성될 수 있으므로 모든 요소를 클릭할 수 있어야 하며 클릭 가능성을 표시해야 하며 동일한 동작을 해야 한다.

---

참고

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

text-decoration - CSS: Cascading Style Sheets | MDN

• https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

title - HTML: HyperText Markup Language | MDN

• https://html.spec.whatwg.org/multipage/rendering.html

HTML Standard

• https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo-classes - CSS: Cascading Style Sheets | MDN

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Cascade and inheritance - Learn web development | MDN

• https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-improved-styling-with-css/modules/fecp-learn-links-and-buttons/articles/ui-design-affordances-signifiers-clickability

| Codecademy

• https://developer.mozilla.org/en-US/docs/Web/CSS/transition

transition - CSS: Cascading Style Sheets | MDN

• https://getbootstrap.com/docs/4.0/components/buttons/

Buttons