CSS 주요 속성

width

선택한 요소의 넓이 설정
고정값 (%), 가변값(px)

height

선택한 요소의 높이 설정

font

• font-family: 글꼴
• font-weight: 글자 두께
• font-size: 글자 크기
• font-style: 글자 기울기

text-align

텍스트를 정렬하는 속성

• left : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 가운데 정렬
• justify : 양쪽 정렬
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속 받음

border

• border-style: 테두리 스타일(solid, dotted)
• border-width: 테두리 두께
• border-color: 테두리 색상

box{
	border-style:solid;
    border-width:1px;
    border-color:blue;
}

한줄로 작성

box{
	border: solid 1px blue;
}

background

• background-color: 배경색
• background-image: 배경 이미지 -> 속성값 url(이미지 경로)
• background-repeat: 배경 반복 (repeat-x,repeat-y,no-repeat)
• background-position: 공간의 이미지 좌표 변경

box{
	background-color: yellow;
    background-image: url(img/01.png);
    background-repeat: no-repeat;
    background-position: left;
}

한줄로 작성

box{
	background: yellow url(img/01.png) no-repeat left;
}

display

• block과 inline요소의 성격을 바꿀때 사용

• 요소를 보이지 않게 할때 사용

  inline, blcok,inline-block,none,flex

position

요소를 배치하는 방법을 지정

• static: 기본값 왼쪽 상단에 위치
• relative: 자기 자신을 기준으로 배치
• absolute: 부모 요소를 기준으로 배치
• fixed: 뷰포트 기준으로 배치
• sticky: 스크롤 영역 기준으로 배치, 어떤 시점 이후 위치 고정

float

선택된 요소를 왼쪽 혹은 오른쪽 끝에 정렬할때 사용
선택자를 띄워 새로운 레이어층을 만드는것

속성해제 : float를 사용한 다음 요소에 clear:both 속성을 넣어줌

text-decoration:none

a태그의 디폴트 값인 밑줄 제거

list-style:none;

ul태그의 동그라미 기호 제거
ol태그의 숫자 기호 제거