글자에 관련된 속성은 글꼴, 글자 크기, 글자 굵기, 기울임 여부, 줄간격, 대소문자 여부, 글자 색상font-family 글꼴을 인용부호로 감싸 지정한다
font-size px, %, em*
font-weight 두께를 bold또는 수치로 지정(bold, normal)
font-style 기울이거나 바로 세운다(italic, normal)
font-variant small-caps로 작은 대문자로 표현할 수 있다.(small-caps, normal)
line-height 줄간견을 수치로 지정한다(%,em*, px)
font 위의 속성들을 한 줄로 기술하는 선택자
문단
text-align : justify (양쪽 정렬)
vertical-align : 이미지나 폼 요소를 위, 가운데, 아래등의 세로 정렬 top, middle, bottom
text-indent :문단의 첫머리를 들여 쓰기
text-transform :대소문자 변경 uppercase, lowercase, capitalize(첫글자만 대문자)
text-decoration : 글자의 밑줄, 윗줄, 가운데줄을 치거나 원래 있던 밑줄을 없애 줍니다.
underline, overline, line-through, none
letter-spacing:글자와 글자간의 간격 %, px
배경(background)
배경색, 배경이미지, 배경반복여부, 배경위치, 배경 고정 여부
예1)
background : pink url("images/bg.png") no-repeat 10px 30px;
배경이미지는 bg.png 하나만 찍음(no-repeat) 나머지 부분은 pink(pink) 배경이미지 위치는(좌측에서 10 위에서 30px)
***상자(Box)***
컨텐츠가 자리하는 영역.
가로폭, 세로폭, 안 여백, 바깥 여백, 테두리
width - px, %, em 가로폭 많이 사용한다(웹프라우져 오류 처리시 많이 이용)
height - 레이아웃을 설계하는 데 오히려 방해하므로 잘 사용 않함 float을 해제할 때 사용하는 경우가 있음
padding - 박스의 안쪽 여백
padding:10px; 위,아래, 왼쪽, 오른쪽 모두 10px
padding:10px 20px; 위 아래-10 왼쪽 오른쪽 20
padding:10px 20px 30px ; 위 10 왼 오른쪽 20 아래 30
padding:10px 20px 30px 40px; 위 10 오른쪽 20 아래 30 왼쪽 40
padding-top : 10px;
padding-right : 10px;
padding-bottom : 10px;
padding-left : 10px;
marging - 박스의 바깥쪽 여백
marging:10px; 위,아래, 왼쪽, 오른쪽 모두 10px
marging:10px 20px; 위 아래-10 왼쪽 오른쪽 20
marging:10px 20px 30px ; 위 10 왼 오른쪽 20 아래 30
marging:10px 20px 30px 40px; 위 10 오른쪽 20 아래 30 왼쪽 40
marging-top : 10px;
marging-right : 10px;
marging-bottom : 10px;
marging-left : 10px;
팁) margin:0 auto; /* 위 아래는 0 좌우는 양쪽 같이 주는 것 (auto) 블록 요소 가운데 정렬할 때 이용
border - 박스의 테두리
border-color : #00f;
border-width : 2px;
border-style : solid; /*실선 dashed 점선 dotted double none 액자형태의 테두리(groove, ridge, inset, outset)
border-top:1px solid red;