[HTML/CSS] Position, Pseudo Selectors, States

2022. 8. 29. 14:37·HTML, CSS

Position

div에 position:fixed를 취하면 화면이 내려가도 화면상의 box의 위치는 바뀌지 않는다. 또한 fixed를 한 뒤에 top, bottom, left, right 중 어느 하나만 취해도 위에 붙어 있던 레이어는 신경도 안쓰고 위로 올라갈 수 있다. 즉 기존의 레이더가 무엇이건 다른 레이어 위에 위치할 수 있다.

 

position : static은 디폴트 값으로 맨 처음 위치 그대로 유지하는 경우에 해당한다.
position : relative는 원래의 위치에서 top, bottom, left, right 각각을 조금씩 움직이고 싶을 때 사용
ex. top : -10px left : -10px 이면 위로 10px만큼, 왼쪽으로 10px만큼 이동한다.
position : absolute의 경우는 realative부모를 기준으로 움직인다. 부모 box가 relative가 없다면 body를 기준으로 하게 되어 부모 box안에 있는 자식 box여도 부모 box와 상관없이 맨 위, 아래, 오른쪽, 왼쪽을 기준으로 시작한다. 그런데 부모 box에 relative가 있다면 그 부모 box를 기준으로 움직인다.

 

선택자 Combination

div p : 부모인 div아래에 있는 자식인 모든 p를 지칭
div > p : 부모인 div아래에 처음으로 바로 나오는 자식p를 지칭
div + p : div 태그 바로 아래에 있는 p 태그 지칭(부모 X 형제O), 만약 바로 아래가 아니라면 지칭할 수 X
div ~ p : div 태그 바로 아래가 아니더라두 그 이후에 나오는 p태그 지칭

 

Pseudo Selectors

Pseudo Selectors : 클래스나 id 추가없이 지칭하는 방법
div : nth-child(even) { } : 짝수번째에 해당하는 div에 대한 설정을 할 시
input : required { } : input중에 required 속성이 있는 input에 대한 설정을 할 시
input[placeholder~="name"] { } : input중에 placeholder에 name이 포함된 input에 대한 설정을 할 시

 

States

activate : 클릭을 했을 때의 상태
hover : 마우스를 갖다 댔을 때의 상태
focus : 클릭이나 키보드로 선택하거나 이동할 시의 상태
visited : 해당 링크를 방문했을 때의 상태
focus-within : 자식이 focus 됐을 때의 부모의 상태를 설정할 때
form : hover input : focus { } : form이 hover상태가 되고, input이 focus인 상태일 때 input에 적용할 설정

input::placeholder { } : placeholder만 꾸미고 싶을 때
p::selection { } : 텍스트를 클릭해서 선택했을 때의 설정
p::first-letter { } : 텍스트에서 맨 첫글자만 설정하고 싶을 때

input[type = "password"] { } :  input중에 type이 password인 input을 설정할 때

'HTML, CSS' 카테고리의 다른 글

[HTML/CSS] Media Queries  (0) 2022.08.30
[HTML/CSS] Transition, Transformation, Animation  (0) 2022.08.29
[HTML/CSS] Flexbox  (0) 2022.08.27
[HTML/CSS] id, class  (0) 2022.08.26
[HTML/CSS] margin, padding, border  (0) 2022.08.26
'HTML, CSS' 카테고리의 다른 글
  • [HTML/CSS] Media Queries
  • [HTML/CSS] Transition, Transformation, Animation
  • [HTML/CSS] Flexbox
  • [HTML/CSS] id, class
youjeong_choi
youjeong_choi
  • youjeong_choi
    youjeong
    youjeong_choi
  • 전체
    오늘
    어제
    • 분류 전체보기 (101)
      • HTML, CSS (7)
      • JavaScript (19)
        • 모던 자바스크립트 딥다이브 (4)
      • ReactJS (17)
      • TIL (15)
      • WIL (17)
      • 알고리즘 (17)
      • 네트워크 (5)
      • Vue (4)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    자바스크립트
    혼공스
    모던자바스크립트딥다이브
    항해99
    알고리즘
    알고리즘 문제
    항해99리액트
    항해99리액트숙련주차
    리액트 라우트
    피니아
    항해99주특기리액트
    리액트
    리액트 라이프 사이클
    항해99주특기
    파이썬
    항해99 주특기
    항해99 실전프로젝트
    무한렌더링
    익명 함수
    선언적 함수
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
youjeong_choi
[HTML/CSS] Position, Pseudo Selectors, States
상단으로

티스토리툴바