Wecode TIL 1/25

OwlCJ·2022년 1월 26일

125 TIL WeCode

wecode

목록 보기

3/10

오늘은 어제에 이어 html/css 에 대해 더 학습했는데 그 중에서 헷갈리거나 나중에 참고해야 될 내용에 대해 적어보려한다.🤔

css position
css 가상 요소와 가상 클래스
css Z-index
css 과제 학습시에 해결되지 않았던 문제 해결과정

CSS position

css position 은 따로 포스팅으로 정리해두었지만 기준을 무엇으로 정할지가 가장 중요한 포인트 인 것 같다. 쉽게 헷갈릴 수 있는 부분이라 반복 사용해서 적응할 것

CSS 가상 요소 / 클래스 선택자

css 가상 요소와 가상 클래스 선택자는 혼동하기 쉬운 개념처럼 보였는데, 말 그대로 가상 요소 선택자는 실제로는 존재하지 않는 가상의 요소를 부여해서 처리해주고 가상 클래스 선택자는 실제로 존재하지 않는 가상의 클래스를 요소에 부여해 처리해주는 방식이다. 예로 ::before 가상 요소 선택자는 해당 태그들의 앞에 요소를 부여해 원래 작성해놓은 것처럼 만들어준다.

/* 링크 앞에 하트 추가 */
a::before {
  content: "♥";
}
출처 -MDN-

가상 클래스 선택자 중에서는 :hover 가 빈도 높고 자주 사용되는 선택자인데 사용자의 마우스 위치가 해당 태그의 영역에 올라왔을 때 해당 태그에 class를 조정해주어 원하는 스타일을 적용하게 해준다. 상당히 편리하고 유용한 선택자 인듯 없었다면 직접 구현해 써야하지 않았을까 싶은데..🤪

div:hover {
  background-color: blue;
}
/* 해당 div 영역에 사용자의 마우스를 인식할 시 배경을 파란색으로 바꿈*/

css 가상 요소 선택자

가상 요소란 문서의 내용에서 원하는 부분만 선택해서 스타일을 적용시키기 위한 용도로 사용된다. 예로 해당 문서의 첫 번째 글자만/라인만 같은 경우 이다. 가상 요소는 :: 를 앞에 붙여 사용하는데 콜론을 하나만 사용해도 적용은 가능하지만 뒤에 등장할 가상 클래스와 구분 지어주기 위해 두개를 사용하는 것을 강력히 권장한다고 함👍🏼

우선 자주 사용되는 가상 요소의 종류는
::first-letter ::first-line ::before ::after 들이 있다.

::first-letter 해당 태그에 작성된 내용 중 가장 첫번째 글자만 스타일을 적용
::first-line 해당 태그에 작성된 내용 중 첫 번째 줄 전체에 스타일을 적용
(사용하는 기기의 해상도 환경에 따라 줄의 길이가 달라지기 때문에 동적으로 스타일이 적용됨)
::before 해당 태그의 앞에 가상의 요소를 생성해 스타일을 적용
::after 해당 태그의 뒤에 가상의 요소를 생성해 스타일을 적용

css 가상 클래스 선택자

가상 클래스란 위에 hover 예시와 같이 특정 행동이나 이벤트를 추적해서 동적인 스타일 변화를 주기위해 사용되는데 종류가 많고 고루 사용되니 종류만 참고해 두었다가 자주 사용해서 익힐 것
:first-child :nth-child :last-child :checked :hover :active :focus :link :visited 등이 있다.

z-index

포지션을 사용하다보면 요소들이 겹치게 되는 경우가 잦은데 그런 경우에 어떤 대상에 우선순위를 적용해 어떤 순서로 쌓을지를 조절해주는 css옵션이 z-index이다.

div.x {
  background-color: red;
  top: 30px;
  left: 50px;
  z-index: 2;
}
div.y {
  background-color: yellow;
  top: 70px;
  left: 80px;
  z-index: 3;
}
div.z {
  background-color: blue;
  top: 80px;
  left: 50px;
  z-index: 1;
}