CSS | Position, 연결 선택자, 속성 선택자

 

positon 

static : default, 문서의 흐름에 마줘 배치

realative : 부모요소

absolute : 자식요소 , 상위요소를 기준으로 위치를 지정해 배치

fixed : 브라우저 창을 기준으로 위치를 지정해 배치, 브라우저에서 스크롤 해도 항상 같은 위치

 

자식요소는 부모요소의 범위 안에서만 움직일 수 있다.

부모자식간의 관계를 맺어주는 속성

 

 

연결 선택자

하위 선택자 : 공백 한칸을 두고 씀

section p { }
/*상위요소 하위요소*/

자식 선택자 : '>' 로 구분

section > p { }
/*부모 > 자식 */

인접 형제 선택자 : '+' 다른태그 없이 바로 붙어있는 태그

h1 + p { }
/*h1의 형제인 p요소 중 첫번째 p*/

형제 선택자 : '~' 모든 형제 요소에 적용 됨

h1 ~ p { }
/*h1의 형제인 모든 p요소*/

 

 

속성 선택자

종류	선택 요소	예시
[속성]	해당 속성이 있는 요소	[required]
[속성 = 값]	지정한 값이 있는 요소	[target = _blank]
[속성 ~= 값]	지정한 값이 포함된 요소(단어별)	[class ~= button]
[속성 |= 값]	지정한 값이 포함된 요소('-'포함,단어별)	[title |=us]
[속성 ^= 값]	지정 값으로 시작하는 요소	title ^= eng]
[속성 $= 값]	지정 값으로 끝나는 요소	[href $= xls]
[속성 *= 값]	지정값의 일부가 일치하는 요소	[href *= w3]

 

 

가상요소

before, after를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다.