[2-5] 웹 명함 구축하기 (1) - ul, ol, a태그 , before

Ul 태그
- Unordered list
- 순서가 없는 목록
Ol 태그
- 순서가 있는 목록

바로 자식에는 li 태그들을 사용
- Ordered list

외부 웹사이트 혹은, 같은 페이지 안에서 이동시키기 위해 사용하는 태그
= a 태그
= href 라는 속성 안에 있는 주소로 이동시켜줌.
= a 태그에는 target 이라는 속성 사용
- target 을 통해서 새 탭으로 이동시킬 건지, 한 탭 안에서 이동시킬 건지 결정

Anchor 태그 안에 텍스트를 입력함으로서
텍스트를 눌렀을 때, href 속성 안에 있는 주소로 이동시킴.

---

target="_blank" 하고 target="_self"
이 두 개 쓰임새와 차이를 모르겠음

blank 를 사용해서 외부 사이트로 이동을 시키더라도
그 창을 닫았을 때 다시 우리 웹사이트로 돌아와서
더 서핑을 할 수 있도록 도와주는 것 - target 속성

---

동그라미를 넣거나 혹은 네모 박스 안에 숫자 넣을 때, 커스터마이징 하는 방법
- 리스트 스타일을 별도로 만들기
- li 에 before 생성
- counter-increment: linkTree; 작성
* before = Pseudo 엘리먼트
= HTML 문서에는 직접 작성하지 않았지만, Css가 넣어주는 엘리먼트

counter-increment: linkTree;
content: counter(linkTree);

counter 을 사용하면
counter-increment를
li 에 before 가 왔을 때마다 증가 시켜줄 수 있음

counter-reset / counter-increment 가 하는 기능

counter-increment 를 지워보면 브라우저에는 0, 0, 0, 0 이 나타나게 됨.
content: counter(
linkTree
);
이걸 확인해보면 linkTree 가 counter 에 들어온 것을 확인할 수 있는데,
숫자가 증감이 되지 않았을 때는 0 이라는 속성을 갖고 있는 걸 확인 가능.

increment 가 됐을 땐,
첫 번 째 li에 before 가 왔을 때 +1 증감시켜주고,
그 다음 li 가 왔을 때 또 +1 시켜서 2를 두 번쨰에 넣어주고
같은 방식으로 계속 증감이 되는 형식.

만약, counter-reset이 li에 있었을 경우, 전부 다 1이 되게 됨.

---

before - 가상 엘리먼트
= display 속성 : inline

---

a:hover
a:active 차이

active = 딱 눌렀을 때를 표현
hover = 마우스 올려놓는 상태 포함.