Anchor Links
link는 text-decoration 뿐만 아니라 모든 스타일이 가질 수 있다.
a {
text-decoration: none;
}
Buttons
많은 디자이너들은 버튼 같이 보이는 링크를 만들려고 한다.
버튼을 사용하고 싶으면 <button> 을 사용하는 게 의미가 맞다.
States
일부 링크는 파랑색이고 일부는 보라색이다.
- a:link – a normal, 방문하지 않은 링크
- a:visited – 방문 했음
- a:hover – 마우스가 링크 위에 있을 때 활성화
- a:focus – 키보드와 함께 활성화
- a:active – 클릭된 상태
Rule의 우선 순위
- a:hover는 a:link 뒤에 와야만 한다.
- a:visited와 a:active는 a:hover뒤에 와야만 한다.
Styling Lists
- font, margin .. 등 초과하는 properties 의 수
- list-style-type
- list-style-image
- list-style-position
- list-style
list-style-type
- ordered lists
ul{
list-style-type: upper-alpha;
}
List styles
- list-style-type
- unordered lists
- list-style-image
- 기본 마커 대신 커스텀 이미지를 사용
Review
- 태그 rule에 맞게 사용하는 것이 포인트
- 디자인 하는데 도움이 되는 많은 도구를 받아들여라
- https://chrispederick.com/work/web-developer/
- http://css3generator.com/
- 개발자 도구를 웹에서 검색
공부 위치 – https://www.coursera.org/learn/introcss/lecture/VVJf3/02-03-styling-links-and-lists
Leave A Comment