css의 속성

Font

font-weight

글자의 두께(가중치)를 설정
normal:기본 두께
bold:두껍게
bolder:상위(부모)요소보다 더 두껍게
lighter:상위(부모)요소보다 더 얇게

font-size

글자의 크기를 설정
16px:기본 크기
단위:px, em, rem 등 단위로 지정
%: 보모 요소의 폰트 크기에 대한 비율
smaller:상위(부모)요소보다 작은 크기
larger:상위(부모)요소보다 큰 크기

line-height

normal:브라우저의 기본 정의를 사용
숫자:요소의 글꼴 크기의 배수로 지정
단위:px, em, rem 등의 단위로 지정
%: 요소의 글꼴 크기의 비율로 지정

color

글자의 색

text-align

문자의 정렬 방식
left:왼쪽 정렬
right:오른쪽 정렬
center:가운데 정렬
justify:양쪽 정렬

text- decoration

문자의 장식선
none:장식없음
underline:밑줄
oberline:윗줄
line-through:중앙선

박스 모델

요소가 화면에 출력되는 특성
인라인(inline)요소: 글자를 만들기 위한 요소들
블록(block)요소: 상자(레이아웃)를 만들기 위한 요소

line요소

<span>Hello</span>
<span>world</span>.      Hello world

대표적인 인라인 요소(요소가 수평으로 쌓임)
본질적으로는 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도

<span stlye="margin: 20px 20px;">Hello</span>
<span stlye="padding: 20px 20px;">world</span>

margin: 요소의 외부 여백을 지정하는 css요소
padding: 요소의 내부 여백을 지정하는 css요소

Block요소

<div>Hello</div>
<div>World</div>     Hello
                     World

< div ></ div > 대표적인 블록 요소!
요소가 수직으로 쌓임

<div style="width:100px;">Hello</div>
<div style="height:100px;">world</div>

width:요소의 가로 너비를 지정하는 css의 요소
height:요소의 세로 너비를 지정하는 css의 요소