[CSS 정리] 웹요소 위치, 배경 설정, 선택자

 

 

 

 

 

웹 요소의 위치 지정

 

 

position :

 

속성

static	문서 흐름에 따라(기본)
relative	static + 위치값 지정 가능
absolute	relative 값을 사용한 상위 요소 기준으로 지정
fixed	브라우저 창을 기준

속성 지정 후 top, left, right, bottom 을 이용해 세부적인 위치 조정이 가능

 

 

 

 

 

배경색, 배경 범위

 

 

배경색

background-color : 색상

 

 

배경색 범위 지정

background-clip : border-box | padding-box | content-box

 

 

 

 

 

 

 

배경 이미지

 

 

background-image : url(’이미지 파일 경로’)

 

 

이미지의 반복

background-repeat : repeat | repeat-x(너비에 찰때까지)| repeat-y(높이에 찰때까지) | no-repeat (한번만 표시)

 

 

이미지 위치 조정

background-position : <수평위치> <수직위치>

 

 

이미지 적용 범위

background-origin : content-box | padding-box | border-box

 

 

이미지 고정 (스크롤 시 배경이미지는 고정)

background-attachment : scroll | fixed

 

 

이미지 크기 조절 (반복해서 채우지 않고 이미지 하나만으로)

background-size :

 

속성

auto	원래 배경 이미지만큼 표시
margin	요소 안에 배경이미지가 다 들어오도록 확대, 축소
cover	배경이미지로 요소를 모두 덮도록
크기	너비와 높이 지정
%	백분율로 크기 지정

 

 

 

 

 

 

 

연결 선택자

 

 

하위선택자(부모요소의 하위요소를 모두 선택)

section p {…} : section 요소 안 모든 p 요소에 적용

 

 

자식선택자(부모요소의 자식요소만 선택)

section>p {…} : section 요소 안 한단계 밑의 p 요소에 적용

 

 

인접형제선택자

h1 + p {…} : h1의 형제 요소 중 바로 아래 p만 적용

 

 

형제선택자

h1 ~ p {…} : h1의 형제 요소 중 모든 p 요소

 

 

 

 

 

 

속성 선택자

 

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

 

 

 

 

 

가상클래스

 

 

:link 방문하지 않은 링크 스타일

 

:visited 방문한 링크 스타일

 

:hover 마우스 포인터 올려놓으면 적용

 

:active 웹 요소를 활성화했을 때 적용 (클릭한 순간이라던가)

 

:focus 웹 요소에 초점이 맞춰지면 적용

 

:target 앵커 대상에 적용 (앵커는 특정 요소를 클릭하면 그위치로 한번에 이동)

 

:enable / disable 요소의 사용여부에 따라 적용 (사용자가 사용가능/사용불가능)

 

:checked 선택한 항목 적용 (라디오 버튼이나 체크박스)

 

:not 특정요소 제외하고 적용

 

 

 

 

위치에 따른 자식요소 선택

 

:only-child	부모안의 자식요소가 하나면 자식요소 선택
A:only-type-of	부모안의 A요소가 하나면 선택
:first-child	부모안의 첫번째 자식요소 선택
:last-child	부모안의 마지막 자식요소 선택
A:first-of-type	부모안의 A요소 중 첫번째 요소 선택
A:last-of-type	부모안의 A요소 중 마지막 요소 선택
:nth-child(n)	n번째 자식 요소를 선택
:nth-last-child(n)	끝에서 n번째 자식 요소를 선택
A:nth-of-type(n)	n번째 자식 A요소 선택
A:nth-last-of-type(n)	끝에서 n번째 자식 A요소 선택

 

 

 

 

 

 

가상요소

내용 앞뒤에 콘텐츠 추가 ::after ::before

 

<style>
li.new::after {
	content : "New!!";
	font-size : x-small;
	padding : 2px 4px;
	margin : 0 10px;
	border-radius : 2px;
	background : #f00;
	color : #fff;
}
</style>

...
<div class = "new">제품 A</div>
...

결과 : 제품 A [New!!]

 

 

 

 

 

 

 

 

 

 

 

-Doit! HTML+CSS+자바스크립트 웹표준의 정석 책으로 공부하였습니다