[CSS] 16)링크와 버튼 (#title, #hover state)

Codecademy front-end engineer course

DAY16

• Links & Button

---

 

Showing interactivity and clickability through signifiers is a fundamental aspect of user interface design.

 

 

 

- Browser Link Styles [링크 스타일]

However, it’s important to note that maintaining a consistent user experience pattern, like the default behavior applied by browsers, is important for creating a consistent experience.

a{
  color:blue;
  text-decoration: underline;
}

Browsers also style two other link states: clicked (‘active’), and previously visited.

In most user agent stylesheets, clicked (but not yet followed) links appear with red text, and previously visited links are styled with purple text.

 

 

 

-Link Styling [링크 스타일링하기]

Link color should sufficiently contrast the text colors in the rest of the design.

Anchor text, the text itself of a link, should be descriptive of the linked resource.

Although this is not strictly a design problem, it is important for usability, accessibility, and SEO(search engine optimization)

 

 

-Tooltips and Titles [툴팁과 타이틀 이용하기]

Most browsers will display the text of a title attribute as a tooltip, meaning when a user hovers their cursor over an element, the text will appear in a small box near the cursor.

 

 

-Hover States and Cursors [호버상태와 커서]

The CSS pseudo-class :hover can be used to style elements on mouse hover.

1) the text color will revert to certain color.

2) In addition to any text style changes when hovering over a link, the user’s cursor should change from the default appearance to a pointing hand. 

a {
  color: #466995;
  text-decoration: underline;
  cursor:pointer;
}
a:hover{
  text-decoration:none;
}

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

 

 

-Link States [링크의 상태의 종류]

When a user hovers and then clicks a link, those styles should always override the static styling surrounding a user’s history with the link (unvisited :link and :visited). The proper order of these rules is:

 

링크 상태의 오버라이드 순서는 아래와 같다.

1. :link
2. :visited
3. :hover
4. :active

 

a {
  color: #466995;
  text-decoration: underline;
  cursor: pointer;
}

.question-link:visited{
  color:#ffffff;
}
a:hover {
  text-decoration: none;
}
a:visited{
  color:#466995;
}
a:active, .question-link:active{
  color:#DBE9EE;
}

-> 이 경우 어느 태그와 클래스가 우선순위에 있는지를 보고 잘 설정해줘야 한다.

 

 

 

- Skeuomorphism and Flat Design [스큐어모피즘과 플랫 디자인]

Skeuomorphism	- The concept of UI elements that replicate or imitate real-life counterparts - if a web button appears similar to a real-life button on a physical interface, users can reliably figure out that the way to interact with the button is to press it.
Flat Design	- an alternative approach to skeuomorphism which embraces the fact that computer interfaces do not necessarily need to model real-life interfaces - flat design uses simplicity and lack of clutter for its UI elements.

*Styled buttons to be easily recognizable (in both skeuomorphic and flat design styles) using box shapes, border, hover, and active states.

 

 

 

- Buttons: Skeuomorphic styling [스큐어모피즘식 버튼 스타일링]

+ Skeuomorphic button design can be implemented using image files, CSS rules, or a combination of both.

 

 

* 버튼 3D효과 주기

For example, to implement a bare minimum 3-D button design, the following CSS ruleset could be used:

.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;
}

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

( The :hover cursor is added for visual feedback.

When the button is clicked (:active), the box-shadow is removed, and the margin-top moves the button down by 5px, make it appear to be pressed.)

 

 

 

* 버튼 그림자 효과 주기

.answer:active{
  margin-top:24px;
  margin-bottom:16px;
  box-shadow: 0px 0px;
  background-color:#C0D6DF;
  color:#ffffff;
}

.answer {
  border:solid 1px #466995;
  border-radius:10px;
  box-shadow: 0px 4px;

}

(->Set the margin-top to 24px and the margin-bottom to 16px. This will make the button appear to move downward. &Set the box-shadow to 0px 0px. This will make the box-shadow disappear.)

 

 

-Buttons: Flat Design [버튼 플랫 디자인]

Elements appear flat on the screen, and designers must rely on other styling and signifiers to indicate clickability.

A button with ‘Click here’ leaves many more open questions than a button that reads ‘Submit form’.

 

 

-Buttons: Hover States [버튼의 호버 상태]

buttons should make use of hover states and the cursor: pointer declaration. 

answer {
  color: #61bff9;
  border: 1px solid #466995;
  cursor: pointer;
  text-decoration: none;
}
.answer:hover{
  background-color:#C0D6DF;
}
.answer:active {
  color: #ffffff;
}

 

 

 

 

*[Affordance] Potentials for interaction are collectively called the affordances of an object.

 

*[Signifiers] aspects of an object that a designer uses to indicate potential and intended affordances of an object.

 

*[Clickability] To this day, users navigate the web largely through mouse clicks (and finger taps on mobile and tablet devices).

 

 

 

*버튼 스타일링 예제코드

a{
  color:#2176FF;
  text-decoration:underline;
  cursor:pointer;
}
a:hover{
 text-decoration:none;
}
.nav-link{
  text-decoration:none;
}
.nav-link:hover{
  color:#5495ff;
}
.btn {
  background-color: #2176FF;
  border-radius: 2px;
  color: #ffffff;
  font-family: 'Raleway',sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 14px;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.btn:hover {
  background-color: #fff;
  color: #2176FF;
  transition: color .1s ease-in, background-color .1s ease-in;
}
 
.btn:active {
  font-size: 18px;
  transition: font-size .1s ease-in-out;
}