position 속성

부모의 hight가 설정이 되면 자식의 height를 %로 설정이 가능하다.
컨텐츠를 센터로 배치하기 위해 position : absolute로 설정하고

left:50% 주고 margin-left : -컨텐츠의 가로길이의 반px로 설정

position속성 *****
static : 정적인 (기본설정 생략가능)
relative : 상대적인 (현재 위치에서 왼쪽에서 얼만큼 상대적으로 붙는다)
Absolute : 절대적인 (자기부모를 기준으로 왼쪽 상단에 붙는다)
fixed : 고정된

position : absolute를 갖게되면 부모의 왼쪽 상단을 기준으로 자리를 잡는다.
그런데 부모가 position 속성을 갖지 않고 있다면 body를 기준으로 윈도우 창의 좌측 상단을 기준으로 위치를 잡게된다.
position : static은 기본적으로 position의 default값으로 position을 설정하지 않아도 본래 가지고 있던 속성값으로 좌우로 원하는 만큼 이동수치를 설정해도 전혀 이동하지 않고 가지고 있는 html 구조에 의해서 자리를 잡는다.
position : fixed는 스크롤의 위치와 상관없이 항상 그 위치에 고정되어 있다.

 

sticky의 특징
1)position:sticky는 static 속성값을 가지고 있다가 사용자가 스크롤을 이동하면서 원하는 위치 속성값에 다다르면 position:fixed로 변한다
2)sticky를 주고 top, left, right, bottom 속성명 중에서 하나 이상을 기술하여야 한다.
3)인터넷 익스프로러 하위버전에서는 아직 구현이 안된다.
4)sticky는 부모요소가 있으면 부모요소의 크기 안에서만 동작한다.
5)sticky를 원하는 위치로 이동하려면 부모로 감싸고 부모요소를 이동시킨다.
6)부모요소로 감쌀 때 부모요소를 벗어나면 다시 rixed가 풀린다.
7)sticky를 감싸는 부모가 overflow:hidden을 가지고 있으면 fixed가 동작하지 않는다.

*sticky는 감싸는 부모요소가 overflow:hedden을 가지고 있으면 sticky가 동작하지 않는다.

z-index는 기본값이 0이고 양수의 크기를 크게 줄수록 z-depth (거리)값이 더 위에 배치된다. 그리고 음수도 가능하다.
주의할 점 : z-index는 position 속성값이 있어야 적용이 된다.
단, static 속성값일 때는 적용이 안된다.

 

그리고 부모와 자식관계에서 position을 부여하고 z-index를 아무리 위, 아래 조절하려고 해도 부모요소보다 자식요소가 항상 arrange(레이아웃 개념에서 위아래) 위에 위치하게 된다

CSS Combinators
선택자 간의 관계를 설명하는 것이다. 둘 이상의 단순 선택기를 포함할 수 있다. 단순 선택자 사이에 연결자를 포함한다.
CSS에는 네가지 combinators가 있다
-자손 선택자(공백) : 자손 선택자는 지정된 요소의 자손인 모든 요소를 선택하는것이다.
-하위 선택자(>) : 하위 선택자는 지정된 요소의 바로 아래 자식인 요소를 선택하는것이다. 바로 아래 자식만 가능
-인접한 형제 선택자(+) : 인접한 형제 선택자는 다른 특정 요소 바로 뒤에 있는 요소를 선택할때 사용된다. 형제 요소는 동일한 부모 요소를 가져야 하며 "인접"은 "바로  다음"을 의미한다.
-일반 형제 선택자(~) : 일반 형제 선택자는 지정된 요소의 다음 형제인 모든 요소를 선택한다.

CSS Pseudo-class
요소의 특수한 상태를 정의하는 데 사용된다.
-사용자가 요소 위로 마우스를 가져갈 때 요소 스타일 지정
-방문한 링크와 방문하지 않은 링크의 스타일을 다르게 지정
-포커스를 받을 때 요소 스타일 지정

CSS Pseudo-elements
위에 pseudo-class가 특정 상태의 요소를 선택하는거라면 elements는 특정 상태의 요소의 일부분을 선택하는것이다.
요소의 지정된 부분에 스타일을 지정할때 사용된다.
예를 들어 
-요소의 첫 글자 또는 줄 스타일 지정
-요소 콘텐츠 앞 또는 뒤에 콘텐츠 삽입

::first-line 요소는 텍스트의 첫 줄에 특별한 스타일을 추가하는 데 사용된다.
*참고로 블록 수준 요소에만 적용할 수 있고 글꼴 속성, 색상 속성, 배경 속성, 단어 간격, 문자 간격, 텍스트 방식, 수직 정렬, 텍스트 변환, 선 높이, clear
::first_letter 요소는 텍스트의 첫 글자에 특별한 스타일을 추가하는 데 사용된다.
여러 가상 요소를 결합할 수도 있다.
::before요소는 내용 앞의 일부 내용을 삽입하는데 사용할 수 있다. 즉 선택된 요소 앞에 추가할때 사용된다.
::after 요소는 요소의 내용 뒤에 일부 내용을 삽입하는데 사용할 수 있다. 즉 선택된 요소 뒤에 추가될때 사용한다.
::marker 요소는 목록 항목의 마커를 선택한다. 
::selection 요소는 사용자 드래그하거나 선택을 하게 되면 스타일이 적용된다.

CSS Navigation Bar
사용하기 쉬운 탐색 기능은 모든 웹 사이트에서 중요하다.
CSS를 사용하면 지루한 HTML 메뉴를 보기 좋은 내비게이션 바로 변환할 수 있다.
내비게이션 바는 기본으로 표준 HTML이 필요하다. 기본적으로 링크 목록이므로 <ul> 및 <li>요소를 사용하는것이 좋다.