< display >

display 속성에 지정할 수 있는 대표적인 설정

속성명	설명
none	요소를 화면에 표시하지 않음
block	요소를 블록 레벨 요소로 만듬
inline	요소를 인라인 요소로 만듬
inline-block	요소를 인라인 요소로 표시하되, 블록 레벨의 특성 추가

< float >

요소를 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소 기준으로 위치 변경

선택된 요소가 문서의 흐름에서 제외되어 상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치되도록 하는 특징을 가지고 있음

float 속성을 적용한 요소를 '부동 요소'라 부르기도 하는데 이는 위치를 이동하면서 다른 요소의 공간에까지 영향을 주며, 이를 잘 활용하면 유용하나 float을 적용하지 않는 요소의 공간에 영향을 주어 때론 역효과를 가져옴

이를 해결하기 위한 속성으로 'clear'가 있음

< position >

문서 상에 요소를 배치하는 방법 정의

최종 위치 결정 - top, bottom, right, left

속성값	설명
static	기본값으로, 요소를 일반적인 문서의 흐름에 맞게 배치
relative	문서의 흐름에 맞춰 배치된 자리를 기준으로 요소 이동
absolute	Position이 지정된 상위 요소를 기준으로 요소이동 이때 요소는 문서의 흐름에서 제외
fixed	화면을 기준으로 요소의 위치 고정

z-index

요소의 쌓임 순서(stack order) 정의

정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용, 위치 지정 요소에 대해 적용할 수 있는 속성

위치 지정 요소 - Position 속성이 정의되어 있는 요소

z-index 기본값 - auto

높은 값을 가질 수록 윗층에 위치

overflow

속성값	설명
visible	기본값, 영역을 벗어난 콘텐츠를 그대로 보여줌
hidden	영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 함
scroll	영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 하고, 잘려진 콘텐츠 진행 방향으로 스크롤을 만듬
auto	웹 브라우저의 설정 값을 따름 데스크톱 브라우저에서는 주로 scroll로 처리

선택자

선택자 유형

선택자	의미	사용 기호
속성 선택자	특정 속성을 명시하여 요소를 선택	[속성명]
하위 요소 선택자	상위 요소에 포함된 하위 요소를 선택	공백
자식 요소 선택자	상위 요소의 바로 한 단계 하위 요소를 선택	>
인접 형제 선택자	형제 요소 중 첫 번째 형제 요소를 선택	+
형제 요소 선택자	형제 요소를 선택 유의사항 : 뒤이어 등장하는 형제 대상	~

기호와 함께 사용하는 속성 선택자

• * : 값의 포함 여부
• ^ : 값의 시작 여부
• & : 값의 끝 여부

의사요소와 의사클래스

의사클래스

의사클래스(가상클래스)는 선택자에 추가하는 키워드로,
요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미

선택자 : 의사클래스{
	속성명: 속성값;
}

속성값	설명
hover	마우스 포인터가 요소에 올라가 있다
active	사용자가 요소를 활성화했다 (ex - 마우스 누르기)
focus	요소가 포커스 받고 있다
disabled	비활성 상태의 요소이다
nth-child()	형제 사이에서의 순서에 따라 요소를 선택한다

의사요소

의사요소(pseudo-elements)는 선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의 할 수 있음

선택자 :: 의사요소{
	속성명: 속성값;
}

속성값	설명
after	요소의 앞에 의사 요소르 생성 및 추가
before	요소의 뒤에 의사 요소를 생성 및 추가
first-line	블록 레벨 요소의 첫 번째 선에 스타일 적용
marker	목록 기호의 스타일 적용
placeholder	입력 요소의 플레이스홀더(자리표시자) 스타일 적용