✓ 2023.02.22 TIL
1. 가상 클래스와 가상 요소
2. CSS position
1️⃣ 가상 클래스와 가상 요소
(1) 가상 클래스
: 가상 클래스는 선택자 뒤에 :(콜론) 가상 이벤트 형식으로 표현되는 것으로, 특정한 이벤트마다 적용할 스타일을 지정할 수 있으며 이를 가상 클래스 혹은 추상 클래스라고 한다.
:hover- 마우스를 오버 했을 때:focus- 포커스 되었을 때:first- 첫 번째 요소:last- 마지막 요소:first-child- 첫 번째 자식:last-child- 마지막 자식- nth 시리즈
:nth-child(숫자)- tag name을 사용할 때:nth-of-type(숫자)- class name을 사용할 때
이 외에도 다양한 가상 클래스가 있는데, 하나하나 다 암기해서 사용하기보다는 필요할 때마다 서치해서 사용하는 것을 추천!
(2) 가상 요소
: 가상 요소는 선택자로서 선택한 요소의 뒤에 표기하는, 미리 약속된 키워드를 말한다.
선택자로 선택한 요소에서 특정한 기능을 할 수 있도록 가상 요소 키워드별로 정의되어 있다.
가상 요소는 가상클래스와는 다르게 ::(콜론 2개) 가상 요소 키워드 형식으로 표현된다.
::before- 요소 내용 앞쪽에 새 컨텐츠를 추가::after- 요소 내용 끝에 새 컨텐츠를 추가::first-letter- 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택
가상 요소 역시 가상 클래스와 같이, 필요할 때마다 찾아서 적용시켜보는 것이 좋다!
✅ 참고
CSS 가상 클래스 선택자 - ofcourse
CSS 가상 요소 "::before"와 "::after" 완벽 정리
2️⃣ CSS position
: CSS position 속성은 문서상에 특정 요소의 위치를 지정하는 방법이다.
position으로 기준을 정한 다음에 top, left, bottom, right으로 위치를 지정하게 된다.
(1) posotion 속성 및 속성 값
static- 일반적인 문서의 흐름으로 위치를 지정하는 방법으로, position을 지정하지 않았을 때를 의미한다.relative- 자기 자신을 기준으로 위치를 지정하는 방법absolute- 부모를 기준으로 위치를 지정하는 방법으로 만약 가장 인접해 있는 부모 태그에 position 값이 지정되지 않았다면 값이 지정되어 있는 부모를 계속 찾게 되고 값이 지정되어 있는 부모 태그를 만나게 되면 해당 부모를 기준으로 위치를 지정하게 된다.fixed- 브라우저 화면을 기준으로 위치를 지정
(2) 위치 속성
top- 위(상단)를 기준으로 숫자만큼 이동해 위치시킨다.bottom- 아래(하단)을 기준으로 숫자만큼 이동해 위치시킨다.left- 왼쪽을 기준으로 숫자만큼 이동해 위치시킨다.right- 오른쪽을 기준으로 숫자만큼 이동해 위치시킨다.
#one {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
-> position: relative으로 설정 = 부모를 기준으로 위치를 지정하겠다!
-> 부모를 기준으로 위에서 20px, 왼쪽으로부터 20px 이동시켜 one 요소를 위치시키겠다!✅ 참고
position - CSS: Cascading Style Sheets | MDN
👉🏻 느낀 점 / 다짐
CSS position의 경우 문서의 흐름에 상관없이 콘텐츠를 특정 위치에 두고 싶을 때 굉장히 유용한 속성이라고 생각한다.
하지만, 아직까지는 언제 position을 사용하는지 감이 잡히지 않기 때문에 클론 코딩을 해보며 사이트 별로 어떤 상황에서 position을 사용했는지 공부해 보는 것이 좋을 것 같다.
