CSS 심화 / FED 코드카데미 프론트엔드 디벨로퍼 코스 / title의 문제

 

Text-decoration 

 밑줄, 취소줄, 윗줄을 표시할 수 있는 Text decoration, 줄의 굵기 , 색깔 등을 바꿀 수 있다. 

 dotted : 점선 , wavy ; 구불거리는 선 

 

text-decoration-line, 

text-decoration-color, 

text-decoration-style,

 text-decoration-thickness

text-decoration-thickness - CSS: Cascading Style Sheets | MDN

 

Tool tip으로 활용되는 title attribute

 툴팁으로 기본적용되어있는 브라우저가 대부분이지만, title의 활용에는 단점이 있다. 

 

1) 터치만 가능한 기기 사용자

2) 키보드를 이용하여 화면을 조작하는 사용자

3) 스크린 리더나 확대기를 사용하는 사용자

4) 미세운동조작에 불편함이 있는 사용자

5) 인지적인 장애가 있는 사용자

 

위와 같이 접근성의 측면에서 보았을 때 Tool tip / title을 활용하는 것은 문제가 될 소지가 많다. 

 

 

Link의 4가지 상태

 

anchor를 활용하여 링크를 표시할 때, css 를 통해서 링크의 클릭 및 호버상태에서 어떠한 변화를 줄 지 바꿀 수 있다. 보통 기본적으로는 파란색으로 링크를 표시하고, 밑줄 underline(text-decoration 활용)으로 표시되어있다. hover시에는 underline을 제거하고 파란색을 유지한다.

 

또한 pointer를 사용하여(pointer의 경우 a에 적용, a:hover에 적용할 경우 문제가 될 수 있음) 커서의 모양을 바꾸는 것이 기본적이다. 아래는 Link의 네가지 상태의 종류이다. 

 

css pseudo - class 라고 한다.

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

일반(클릭되지 않은 상태), hover, active(클릭된 상태), visited

 

연관된 pseudo class는 

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

위 네가지이다. 위 순서대로 배열되어야 위계를 깨지않고, 쉽게 파악할 수 있다고 한다. 

 

class를 특정하여 이용하고자 하면

psedu class.class

형식으로 표현한다.

ex) .class-name:link

이런식으로. 

 

 예제가 조금 이해가 안되는 부분이 있어서(class와 일반 element의 특이도 차이에 관한 내용) 추후 보강 필요

 

Skeuomorphism and Flat Design

 

 skeumorphism의경우 버튼 같은 디자인들을 보다 현실과 비슷하게 재현하는 것을 말한다. 반면에 flat design은 이미 사람들이 skeumorphism 스러운 디자인에 익숙할 뿐더러 오히려 번잡하게 느껴지는 디자인이므로 , 간단하게 구현하는 것을 말한다.