Position

• reference: https://developer.mozilla.org/ko/docs/Web/CSS/position
• 문서 상에 요소를 배치하는 방법
• 종류
  • static
  • relative
  • absolute
  • fixed
  • sticky

Static Position

• position의 default
• 일반적인 문서 흐름을 따라 배치
• 현재 Tag의 위치는 앞 Tag의 위치에 영향을 받는다
• top, right, bottom, left 속성 영향 X

pop up

• modal dialog
• 광고
  • 스크롤을 내리면 화면에서 사라진다
• 웹툰 리모컨
  • 스크롤을 내려도 화면을 계속 따라온다.

Relative Position

• element를 일반적인 문서 흐름에 따라 배치
• 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 offset 적용
• z-index가 auto가 아니라면 staacking context(쌓임 맥락) 생성

> Z-index

relative부터는 겹침 현상이 발생한다.

• z-index는 겹쳤을 때 누가 먼저 나와야 하는 지를 정하는 속성
• z-index:1이면 1순위가 아니라 1층에 배치한다는 뜻

Absolute Position

• element를 일반적인 문서 흐름에서 제거하고, page rayout에 공간 배정 X
• 가장 가까운 위치 지정 조상요소(relative, absolute, fixed)에 대해 상대적으로 배치
• 위치 설정과 배치 순서 keyword(top, left, right, bottom,z-index) 사용 가능

fixed position

• element를 일반적인 문서 흐름에서 제거하고, page rayout에 공간 배정 X
• viewport의 초기 containing block을 기준으로 삼아 배치
• fixed에선 inline개념이 없어서 자동으로 display가 block으로 바뀐다
  
  
  

배치 유형

> 위치 지정 요소

• position이 relative, absolute, fixed, sticky 중 하나인 요소

> 상대 위치 지정 요소

• position이 relative인 요소

> 절대 위치 지정 요소

• position이 absolute, fixed
• height와 width가 auto로 지정되면 자신의 content에 맞춰크기가 바뀐다.
• 반면 비대체 절대 위치 지정 요소는 top (en-US)과 bottom (en-US)을 지정하고 height는 지정하지 않으면 (즉, auto로 두면) 사용 가능한 수직 공간을 가득 채웁니다. 마찬가지로 left (en-US)와 right (en-US)을 지정하고, width는 auto로 두면 사용 가능한 수평 공간을 가득 채웁니다.
• 위에서 설명한 경우(공간을 꽉 채우는 경우)가 아니라면 다음 규칙을 따릅니다.
  • top과 bottom을 지정한 경우(auto가 아닌 경우), top이 우선 적용됩니다.
  • left와 right를 지정한 경우, direction (en-US)이 ltr(영어, 한국어 등)이면 left를 우선 적용하고, direction (en-US)이 rtl(페르시아어, 아랍어, 히브리어 등)이면 right를 우선 적용합니다.

+ 대체 요소(replaced element) +

• reference: https://developer.mozilla.org/ko/docs/Web/CSS/Replaced_element
• 자신의 표현 결과가 CSS의 범위를 벗어나는 요소
• CSS 서식 모델과는 분리된 외부 객체 요소
• 대체 요소는 자신의 컨텐츠가 현재 문서 스타일의 영향 받지 않는 요소
• CSS가 대체 요소에 영향을 줄 수 있는 방법은, 일련의 속성을 통해 element box에서 content의 위치 제어
• 종류
  • <iframe>
  • <video>
  • <embed>
  • <img>

sticky

• element를 일반적인 문서 흐름에 따라 배치하고, table 관련 element를 포함해 가장 가까운 스크롤 되는 조상과, 표 관련 요소를 포함한 containing block을 기준으로 top, right, bottom, left 값에 따라 offset 적용

화면 보호기

> 가운데 배치

크기의 절반만큼 반대 방향으로 이동시킨다
1. margin 사용

• 장점: 안되는 브라우저가 없음
• 단점: 크기를 알아야 함

2. transform 함수 사용(위치, 각도, 기울기, 확대 등을 처리하는 함수)

Menu(nav bar)

Combinators

• A combinator is something that explains the relationship between the selectors

descendant selector (space)

• The descendant selector matches all elements that are descendants of a specified element

child selector (>)

• The child selector selects all elements that are the children of a specified element

adjacent sibling selector (+)

• The adjacent sibling selector is used to select an element that is directly after another specific element.
• Sibling elements must have the same parent element, and "adjacent" means "immediately following".

general sibling selector(~)

• The general sibling selector selects all elements that are next siblings of a specified element.

semantic tag(시멘틱 태그)

• div와 같이 하나의 태그가 너무 다양한 용도로 사용되는 것을 방지하기 위해 만든 Tag
• 기능이 같더라도 용도별로 태그를 구분하여 생성
• 웹 표준에서 권장하는 사항인데 잘 안 지켜진다.
• main 홈페이지 전체
• aside 사이드 메뉴
• section 본문

메뉴 숨기는 법

• width: 30px;
• overflow: hidden;
• margin-left: -225px;
• transform: translate(-100%, 0);

transition

• 특정 항목의 변화를 부드럽게 처리
• transition: 항목 지속시간 타이밍함수

타이밍 함수

• linear: gksrufrkxdms threh
• ease-in: accelerando(시작을 느리게)
• ease-out: morendo(끝을 느리게)
• ease-in-out: 시작과 끝을 느리게

계층형 구조

• 메뉴
• 중첩구조
  • ul, ol

Drop down menu

drop down menu 만들기

• 계층형 구조(Tree 구조)이므로 list tage로 만든다.
• 가장 중요한 스킬은 원하는 차수의 메뉴를 선택하는 것

1차 메뉴 선택자: .menu > li
2차 메뉴 선택자: .menu > li > ul > li
3차 메뉴 선택자: .menu > li > ul > li > ul > li

1차 이상 메뉴:: menu li
2차 이상 메뉴:: menu > li > li
3차 이상 메뉴:: menu > li > ul > li li

(1) 리스트의 모든 스타일을 제거(여백, 표시방식)

      .menu,
      .menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }

(2) 모든 a태그의 스타일 제거

      .menu a {
        display: block;
        width: 100%;
        color: black;
        text-decoration: none;
      }

(3) 1차 메뉴의 항목들의 표시 방식(display)을 inline-block으로 변경

      .menu > li {
        display: inline-block;
        width: 120px;
      }

(4)2차 이상의 메뉴(ul)들 배치 방식(position)을 absolute로 변경
모든 메뉴(li)는 기준점 설정을 위해 배치 방식을 relative로 변경

      .menu > li ul {
        position: absolute;
        left: 0px;
        top: 100%;
      }
      .menu,
      .menu li {
        position: relative;
      }

(5) 2차 이상의 메뉴(ul)를 숨김처리

      .menu > li ul {
        display: none;
      }

Reset style

\
a
html

• 모든 browser에서 동일하게 보여주는 방법

HTML 5 Layout