210630 CSS학습 3일차로 list-style, link(a태그), overflow, border속성에 대해 학습했다.
추가로 Adobe XD를 사용하는법을 배웠다.
Today's Tips
- 네이밍 규칙의 언더스코어(_) 조합은 파일, 폴더, 이미지에 사용한다.
- 네이밍 규칙의 하이픈(-) 조합은CSS 네이밍에 사용하는 것을 권장한다. HTML 문서 안에서 언더스코어(_)의 조합은 form, input 엘리먼트등의 name 어트리뷰트의 값을 사용하는 것을 권장한다. 이유는 클래스 네임이 서버사이드 스크립트의 변수와 자바스크립트의 변수 정의시 혼돈을 방지하기 위함이다.
- naming은 '형태, 의미, 상태' 순서로 조합하며, 3단계를 넘어가지 않도록 권장한다.
ex) btn_apply_on, box_news, box_reply_open 등 - id는 camelcase 방식으로 하며, class는 underscore 방식으로 사용한다.
- 절대주소, 상대주소의 차이... 처음 (/)는 루트폴더를 뜻한다.
Must Remember
- ul에 list-style-image: url(); 속성으로 리스트 스타일을 이미지로 대체할 수 있다.
(그냥 list-style로 가능, 보통은 background 이미지 속성을 사용함.) - a:link, a:visited, a:hover, a:active, a:focus 순서대로 적용해야 함, 우선순위 10점
- a:active = 링크를 마우스로 누르고 있을 때, a:focus = 탭키로 포커스가 갔을 때.
- overflow:scroll; 박스의 크기와 콘텐츠의 내용과 상관없이 박스에 스크롤바를 생성한다.
UI개발자 in Hivelab