[9주 2일차] CSS 정리

 

블록 요소

 - 줄 바꿈이 일어난다.

 - 텍스트와 인라인 요소를 자식 요소로 포함할 수 있다.

 - 블록 요소는 있는 것과 없는 것이 있다.

 - 크기 조정 가능하다.

 

 

인라인 요소

 - 줄 바꿈이 일어나지 않는다.

 - 텍스트와 인라인 요소를 자식 요소로 포함할 수 있다.

 - 블록 요소는 불가능

 

 

 

 

1. 선택자

 

 

종류	기호	태그 설명 및 특징
타입 선택자	p {}	문서의 태그를 직접 지정하여 사용한다.
id 선택자	#abc	요소 중 id='abc'로 지정된 태그를 적용
class 선택자	.abc	요소 중 class="abc"로 지정된 태그를 적용
전체 선택자	*{}	모든 요소를 지정한다.
하위 선택자	p li	선택자 사이에 공백으로 분리해 p태그 하위 모든 li를 선택
자식 선택자	ul > li	자식 요소를 가르키며 자식 요소의 자식은 해당되지 않는다.
인접 형제 선택자	h1 + p	h1 요소 다음에 위치한 p형제 요소를 지정한다.
형제 선택자	h1 ~ p	h1와 같은 계층에 있는 형제 요소를 지정한다.
그룹 선택자	h1,p	여러 선택자를 한번에 선택한다.
속성 선택자	h1[class]	class 속성을 가진 h1을 지정한다.

 

 

 

 

속성 값	설명
a:link	링크가 걸린 문자에 속성을 부여하는 선택자
a:visited	링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자
a:hover	링크가 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자
a:active	링크 걸린 글자 활성화 되었을 경우의 속성을 부여하는 선택자
a:focus	링크 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자

 

 

 

 

속성 값	설명
:first-letter	요소의 첫 글자
:first-line	요소의 첫 줄
:first-child	같은 요소 중 첫 번째 요소
:last-child	같은 요소 중 마지막 요소
:nth-child(1)	같은 요소 중 n번째 요소
:after	요소 안 맨 뒤에 배치될 요소
:before	요소 안 맨 앞에 배치될 요소

 

 

 

 

 

2. 문자 스타일

 

 

글자체 지정	예시	태그 설명 및 특징
font-family	font-family:'돋은; Arial;	한글 글꼴인 경우 따옴표로 감싸고 여러개의글꼴을 쉼표로 지정

 

 

 

font 단위	value	태그 설명 및 특징
px	16px	해상도에 따라 상대적으로 달라지는 기본단위
%	100%	부모 요소의 글자 크기를 100% 기준으로 계산한다.
em	1.000em	부모 요소의 글자 크기를 100% 기준으로 계샇ㄴ한 100분의 1단위
rem	1.5rem	최상위 요소의 크기를 기준으로 계산한다. html 요소에 지정한 글자 크기가 1rem
vw, vh	10vw	뷰포트 너비값의 100분의 1단위

 

 

 

 

font 굵기	value	태그 설명 및 특징
font-weight	nomal, 700 (bold)	텍스트를 굴게하는 속성(숫자, 문자로 할당 가능)

 

 

 

font 기울기	value	태그 설명 및 특징
font-style	nomal, 700	italic

 

 

 

font 대/소문자	value	태그 설명 및 특징
font-variant	font-variant:smal-caps	문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성

 

 

 

font 간격	value	태그 설명 및 특징
font-height	line-hieght:1,4	줄 간격을 px, %, em 등의 단위로 지정할 수 있다.

 

 

 

font 색상	value	태그 설명 및 특징
color	red, #00000, rgb(255,255,255)	텍스트의 색상을 지정

 

 

 

 

font 간격	value	태그 설명 및 특징
letter-spacing	1px	글자의 간격
word-spacing	1px	단어의 간격

 

 

 

 

font 데코레이션	value	태그 설명 및 특징
text-decoration	underline	밑줄
	overline	윗줄
	lint-through	가운데 줄
	none	줄 없음 (이것만 부모에 쓰고 위의 것들은 특정 텍스트에 적용하므로 자신에 사용)

 

 

 

 

font 변환	value	태그 설명 및 특징
text-transform	uppercaer	대문자
	lowercase	소문자
	capitalize	첫글자만 대문자

 

 

 

 

 

font 그림자	value	태그 설명 및 특징
text-shadow	가로 거리 px	그림자가 원본에서 떨어지는 가로 거리지정
	세로 거리 px	그림자가 원본에서 떨어지는 세로 거리지정
	번지는 정도 px	그림자가 흐릿하게 퍼지는 정도
	그림자 색상 rgba(0,0,0,0.5)	그림자의 색상

 

 

 

 

 

 

 

 

3. 문단 스타일 (<p>태그)

 

 

 

글자 정렬	value	태그 설명 및 특징
text-align	left, center, right, justify	블록 요소에만 정용되는 속성으로 4가지 정렬기능을 제공한다.

 

 

 

 

 

글자 정렬	value	태그 설명 및 특징
word-wrap	break-word	영문자의 경우 박스보다 길 경우 자동으로 줄 바꿈

 

 

 

 

 

글자 정렬	value	태그 설명 및 특징
word-break	normal	기본 값
	break-all	글자가 넘치면 줄바꿈
	keep-all	단어를 끊어 줄바꿈하지 않는다.

 

 

 

 

 

 

글자 정렬	value	태그 설명 및 특징
white-space	설명	마크없한 문자들 사이의 공백을 처리하여 내보내는 속성
	normal	연속 공백들과 줄바꿈이 하나의 공백으로 처리한다. (길면 줄바꿈 일어남)
	nowrap	연속 공백들과 줄바꿈이 하나의 공백으로 처리된다. (길어도 줄 바꿈이 없이 박스 밖으로 나감)
	pre	연속 공백들과 줄바꿈이 소스 그대로 표현된다.
	pre-wrap	연속 공백들과 줄바꿈이 소스 그대로 표현되나, 길면 줄바꿈이 일어난다.
	pre-line	연속 공백들이 하나의공백으로 처리, 줄바꿈은 소스 그대로 표현되나, 길면 줄 바꿈 일어난다.

 

 

 

 

 

 

 

글자 정렬	value	태그 설명 및 특징
text-overflow	ellipsis	텍스트가 길때 (...)와 같이 줄여서 표현하는 기능

 

 

 

 

성질 변환	value	태그 설명 및 특징
display	block	요소의 성격을 block으로 변경 (줄바꿈 일어남)
	inline	요소의 성격을 inline으로 변경 (줄 바꿈이 일어나지 않음)
	inline-block	요소의 성격을 inline과 block의 성격을 동시에 가진다
	none	요소를 보이지 않게 숨기고 흔적도 숨긴다.

 

 

 

 

요소 표시	value	태그 설명 및 특징
visibility (자신)	visible	요소를 보이도록 설정한다.
	hidden	요소를 보이지 않도록 설정한다.

 

 

display:none 과 visibility:hidden은 둘 다 콘텐츠를 숨기는 기능이다.

그래서 스크린 리더기에서도 읽어주지 않는다.

하지만 none은 숨겨진 요소들의 흔적도 없지만 hidden은 숨겨진 요소들이 자리를 차지하고 있다는 차이가 있다.

 

 

 

요소 표시	value	태그 설명 및 특징
overflow	hidden	넘치는 콘텐츠를 숨긴다.
	auto	콘텐츠가 넘칠 경우에만 스크롤바를 생성
	scroll	콘텐츠가 넘치지 않아도 스크롤바를 생성
	visiblw	넘치는 콘텐츠가 그대로 노출된다.

 

 

 

투명도	value	태그 설명 및 특징
opacity (자신)	0~1	요소에 투명도를 부여할 수 있다.

 

 

 

 

 

 

 

4. background

 

 

 

 

배경 색상	value	태그 설명 및 특징
background-color	색상 값	배경색상을 red, #0000, rgba(255,255,255,0)으러 할당 가능 (맨 뒤에 0자리에는 opacity 값)
	transparent	투명

 

 

 

배경 이미지	value	태그 설명 및 특징
backgroun-image	url(img/img.png)	배경에 들어갈 이미지를 지정할 수 있다.

 

* 배경에 이미지를 넣었는데 안보이는 경우 내용이 비어서 안보일 수 있다.

그렇기 때문에 padding으로 값을 넣어주면 이미지를 볼 수 있다.

 

 

 

 

배경 이미지 반복	value	태그 설명 및 특징
bacgkround-repeat	repeat	배경 이미지를 가로세로로 반복해서 배치
	no-repeat	베경 이미지를 한개만 배치한다.
	repeat-x	배경 이미지 가로로만 반복
	repeat-y	배경 이미지를 세로로만 반복
	space	배경 이미지를 반복하다가 마지막 이미지가 가로로 잘리지 않도록 배치(간격발생)
	round	이미지가 세로로 질리지않도록 배치하기 위해 반복배치 (납작하게)

 

 

 

 

 

배경 이미지 포지션	value	태그 설명 및 특징
bacgkround-position	가로위치	left, right, center, px값,%값을이용하여 가로 위치를 지정
	세로위치	top,bottom,center,px값,%값을 이용하여 세로 위치 지정

 

 

 

배경 이미지 포지션	value	태그 설명 및 특징
background-attachment	scroll	배경 이미지가 요소 바닥에 붙은 것처럼 화면을 스크롤하면 따라감(기본)
	fixed	배경 이미지가 화면 바닥에 붙은것처럼 화면을 스크롤해도 따라가지 않음

 

 

 

 

배경 이미지 사이즈	value	태그 설명 및 특징
background-size	80px 60px	가로 세로 크기로 생성 비율이 찌그러즐들 수 있음
	auto	원래 크기로 배치하고 남는 공간은 비움, 비즁
	contain	이미지가 잘리지 않도록 배치하고 남는 공간은 비움, 비율을 유지
	cover	빈공간 없이 요소에 꽉 채우고 나머지는 잘림, 이미지의 원래 비율 유지 (width 기준으로 하고 비율로 늘림)

 

 

 

 

 

 

배경 이미지 시작점	value	태그 설명 및 특징
background-origin	border-box	테두리 좌측 상단 모둥이에서 시작
	padding-box	안여백의 좌측 상단 모퉁이에서 시작(기본)
	content-box	콘텐츠의 좌측 상단부터 시작

 

 

 

 

 

배경 이미지 영역	value	태그 설명 및 특징
background-clip	border-box	배경이 테두리를 포함(기본)
	padding-box	테두리를 제외한 영역에 배치
	content-box	콘텐츠 영역에만 배치

 

 

 

 

배경 색상	value	태그 설명 및 특징
background	linear-gradient(red,blue, green)	배경색을 그라데이션 효과를 줄 수 있다.
	linear-gradient(to top, red,blue,green)	첫번째 속성으로 시작점 저장to top,bottom, right, left등 지정
	linear-gradient(200deg, red, b;ue, green)	각도를 이용하여 시작점 지정