21-04-29 웹 css 선택자 정리

선택자 (중요한 것들만 정리 함 너무 많아 )

전체 선택자	*	*
태그 선택자	태그	h1
아이디 선택자	#아이디	#header ( 앞에 # 붙임)
글래스선택자	.클래스	.header ( 앞에 . 붙임)
후손 선택자	선택자 선택자	header h1
부정 선택자	선택자 :not(선택자)	li:not(.item)

스타일속성

크기단위 

단위	설명
%	백분율 단위
em	배수단위 (예 ; 1배 1em = 100% , 1.5배 1.5em = 150%)
px	픽셀단위

색상단위

#000000	HEX 코드 단위
rgb	rgb 색상 단위

가시속성(중요함) 화면에 보이는 방식 

none	태그를 화면에 보이지 않게
block	태그를 블럭 형식으로
inline	태그를 인라인 형식으로
inline-block	태그를 인라인과 블럭 형식으로

visibility

visible	태그를 보이게 만듬
hidden	태그를 보이지 않게 만듬
collapse	table 태그를 보이지 않게 만듬

태두리속성 border

입력방법 border: 크기 선모양 선색상

border-radius : (선의 굴곡 ) 10px , 10px , 10px , 10px 이렇게 각각 줄수도 있음 (왼쪽위 부터 시계방향 )

 

Bcakground 속성

background-image	이미지 불러오기
background-position	위지 지정
background-size	크기 지정
background-repeat	패턴생김   ( x . y 축으로 가능하고 no-repeat 으로 제거도 가능
background-attachment	어떠한 방식으로 화면에 붙일 것인지 (기본 scroll 속성 , fixed 주면 고정
background-color	배경색

 

폰트속성

font-family : 텍스트 변경

color: 색상변경

font-size : 크기 변경 

font-Style : 폰트 기울이기 속성

font-weight : 폰트 굵기 속성 

 

line-height : (중요함 !!!) 글자의 수직정렬을 할때 많이 사용함 감싸고 있는 부모크기만큼 주면 중앙 정렬 text-align : 수평 정렬 (인라인 속성에서 사용됨) 

 

text-decoration : none   a 태그 아래 및줄을 제거 하고 싶을때 사용 ( 색상도 줘야 파란색 안나옴)