TIL_ CSS문법 & React

해달·2021년 8월 10일

TIL

목록 보기

29/80

Today 공부

Position
z-index
display : grid
자식 엘리먼트

Position

HTML에서 element를 배치하는 방법을 지정하는 속성
* 요소를 겹치게 놓을 수 있음
이때 요소들의 수직 위치를 z-index로 정함

static element가 문서(HTML)에서 일반적인 흐름을 따라 배치, position 지정 하지 않을 시 기본으로 적용

relative html일반적인 흐름으로 배치 후 자신의 static위치에서 (상,하,좌,우) 상대적 위치 배치, 다른요소들의 위치에 영향을 주지 않음

absolute 일반적인 흐름 따르지 않음, 조상 element 위치에 따라서 결정, 없으면 body

fixed element가 일반적인 흐름에서 제거 됨, 스크린의 뷰포트를 기준으로 한 위치에서 배치 (스크롤 관계x)

sticky top,right,left bottom 속성 없으면 static과 같다
다른요소 영향X
참고한 블로그

z-index

어느것이 앞으로 나오고 뒤에 나올지 배치 순서를 정함
숫자가 클수록 위, 작을수록 아래
자식 엘리먼트들의 z-index 속성 값은 오로지 부모 안에서만 의미를 가짐
MDN : 다시한번 경고! z-index는 position 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.

display : grid

두 방향 (가로-세로) 레이아웃 시스템(2차원)

부모 : div.container를 Grid Container (grid 영향을 받는 전체 공간)

자식 : div.item들을 Grid Item(설정된 속성에 따라 어떠한 형태로 배치)참고한 글

place-items

place-itemsCSS 의 속성은 align-items및 justify-items속성의 줄임말로 이들을 단일 선언으로 결합합니다.
일반적인 사용법은 Grid 를 사용 하여 수평 및 수직 센터링을 수행하는 것입니다 .

속성은 이중 값을 허용합니다.
첫 번째는 align-items이고 두 번째는 justify-items입니다.
  place-items: start center;
값이 하나만 제공되면 두 속성이 모두 설정됩니다.

참고한 글

이벤트버블링

부모element에 onClick을 주면 자식element에도 적용이 됨

onClick ={(e) => e.stopPropagation()} 멈출때

CSS '>' 부등호 의미

CSS에서 > 기호는 자식 선택자를 의미합니다. 자식 선택자는 태그의 바로 밑에 위치하는 태그를 선택자로 지정하는 기능입니다.

클래스 선택자

> div.close_btn div태그 안에서 close_btn 클래스

export const ModalView = styled.div.attrs(props => ({
  role: 'dialog',
}))
  border-radius: 10px;
--------------------------------------------
`  > div.close_btn {   // 
    margin-top : 5px;
  }
(백틱생략)