포지션 알겠는데 모르겠는 느낌 ㅎ..

Position

위치를 결정하기 위해 필요한 속성

위치 조정 속성

• top: 기준 지점으로부터의 상단 위치(위에서 얼만큼 떨어지게 할 지)
• bottom: 기준 지점으로부터의 하단 위치(아래에서 얼만큼 떨어지게 할 지)
• left: 기준 지점으로부터의 좌측 위치(왼쪽에서 얼만큼 떨어지게 할 지)
• right: 기준 지점으로부터의 우측 위치(오른쪽에서 얼만큼 떨어지게 할 지)
• z-index: 해당 태그를 배치할 z축 위치(몇 층에 배치할 지)

static

• 연관배치
• 앞 요소에 의해 현재 태그 위치가 결정되며 변경 불가(고정)
• 기본적으로 static이라 따로 써주지 않아도 됨
  
  

relative

• 연관배치
• 앞 요소에 의해 현재 태그 위치가 결정되며 변경 가능
• 겹치는 부분에서 어떤 걸 앞에 보여줄 지 결정 가능
• 태그 안쪽 방향으로 이동(바깥쪽으로 이동하게 하고 싶으면 음수 사용)

absolute

• 고정배치
• 특정 영역(없으면 body)을 기준으로 위치를 설정하며 스크롤의 영향을 받음
  • 특정 영역: 자신을 감싸는 가장 가까운 relative, absolute, fixed 영역 (static 제외)
• 문서 상 원래 위치를 잃어버림(아래에 있는 div가 해당 자리를 차지)
• ex. 팝업(모달)

fixed

• 고정배치
• 브라우저 화면(screen)을 기준으로 위치를 설정하므로 스크롤 영향 없음
• ex. 플로팅 버튼

---

full screen 효과

• 사용자가 화면을 클릭하지 못하게 만드는 것을 의미함
  • ex. 결제 중 화면
• position을 fixed로 설정해 화면을 기준으로 위치 설정
  - 모든 위치를 0으로 설정하거나 폭/높이를 100%로 설정
  
  

dimmed 처리 방법

1) opacity를 이용

• 특정 영역을 강조하기 어려움. 내용물까지 투명해짐
  
  

2) background color를 rgba로 설정

• 내용물에는 영향을 주지 않음
  
  

modal 추가

• center 정렬 방법
  • modal이 fixed이므로 그 안에 내용물은 absolute로 position 설정하면 fixed에 따라 위치 설정됨
  • top, left 50% 설정
  • margin을 이용해 좌측 상단으로 이동(크기를 알아야 함)
  • transform 속성을 이용해 영역을 비율로 이동(크기 몰라도 됨)
    

  transform: translate(-50%, -50%);

• 만약 modal만 쓰고 싶다면 modal을 fixed로 만들어야 함

sidebar

• 사이드바 영역에 checkbox를 넣고 checked 상태일 때만 사이드바가 노출되도록 처리

  • 사이드바 숨기기: 브라우저에서만 안보이면 됨
    • 영역 밖으로 내보내기(left: -200px)

• 화면에 두 개 이상 나오면 안되는 영역들이므로 class보단 id 부여 권장

  ```css
  #sidebar > .toggle:checked + .view{
    left: -200px;
  }
  ```

  
  

선택자

형제 선택자

• +: 자신의 바로 뒤(형제)에 있는 태그를 선택
  
  

연계 선택자

• ~: 자신의 뒤에 있는 모든 태그를 선택
  * 반드시 같은 영역에 존재하는 태그만 선택 가능(앞은 불가능)

  ```css
  .ck1 + span{
      color: blue;
  }
  
  .ck1:checked + span {
      color: red;
  }
  ```

애니메이션 효과 부여

    /* 스르륵 움직이는 효과(애니메이션 효과) */
    transition: left linear 0.2s;

* css transition timing function

z-index

• 미설정 시, 기본값 1

• 체크박스 > 사이드바 > 내용 순으로 배치

• 체크박스 숨기기
  - label 지정
  - checkbox에 id 부여하고 label의 class를 디자인

  .ck1{
      display:none;
  }

  
  

dropdown menu

• 계층형 구조: <list> 사용
• <ul> <li> 구조 반복
  - depth만큼 ul 사용
  
  

2차 이상 메뉴

• fixed로 2depth 이상의 드롭다운을 구현하기 어려움
  • 스크롤 영향 받아야 하고(스크롤 시 사라짐) 특정 영역을 기준으로 배치되어야 함(ex. file은 file아래에 edit는 edit 아래에)
  • absolute로 구현

위치 기준점 설정

• 문제점: 하위 메뉴 위치 조정이 어려움

  • ex. top:0; left:0; → 메뉴1과 겹침
    

  • 기준 영역이 필요함

• 해결책1: 1차메뉴를 기준으로 정렬될 수 있도록 1차 메뉴를 relative로 설정

  • static 제외하고 아무거나 해도 됨

• 해결책2: 1차 메뉴 아래에 붙을 수 있도록 top 조정

  • top:100% 과 bottom:0은 다름(bottom:0은 항목4가 메뉴1에 붙음)

  
  

하위 메뉴 숨기기

• display: none;

1차메뉴 hover 시 노출

• a 태그가 아닌 li 태그에 hover 시로 설정
  • a 태그로 설정 시, 아래 항목을 선택하려고 하면 hover가 a 태그 밖에서 일어나기 때문에 드롭다운 메뉴가 사라짐
  • 참고) a 태그 뒤에 있는 ul (a:hover + ul)

여백/폭 조정

• a태그는 기본 inline
  • 클릭 영역을 늘리기 위해 display를 block으로 변경하고 width: 100%로 변경

hover 메뉴 강조 효과

• 배경
  • li 태그에 설정
• 폰트
  • a 태그에 폰트색상을 설정하거나
  • a 태그의 폰트색상을 상속으로 바꾸기

---

우측에 붙는 메뉴

• 메뉴 1개만 됨
• 부모가 relative인지 확인
• position: absolute
• right:0(left:100이면 밖으로 나감)
• top:0
  
  

3차 이상 메뉴

메뉴1 항목1 아래에 3depth 메뉴 추가

옆으로 붙게 하려면 top:0 left:100

.dropdown-menu li > ul ul

• right-menu는 드롭다운 리스트가 왼쪽으로 펼쳐져야 함
  - left와 right를 둘 다 줄 수 없음
  - left: auto 원래대로 돌리고
  - right:100%
  
  

sticky menu

• position: fixed
• top, left, right: 0
  • bottom까지 0으로 주면 full screen 됨
• fixed
  - 폭의 영향을 받음