문단 꾸미기
text-align :문단 정렬 방식을 정하는 속성이다.
text-align 의 속성값
left : 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데 정렬
justify : 양쪽 정렬
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속
박스안의 텍스트를 정렬할 때 사용하면 용이하다.
line-height : 줄 높이를 정한 속성
normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2
length : 길이로 줄 높이를 정한다.
number : 글자 크기의 몇 배인지로 줄 높이를 정한다.
percentage : 글자 크기의 몇 %로 줄 높이로 정한다.
initial : 기본값으로 설정.
inherit : 부모 요소의 속성값을 상속.
예제
.name {
font-size: 30px;
line-height: 2; /*line-hight를 1로 지정하게되면 폰트사이즈 30px이 한줄높이가 된다.*/
}list-style
list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있다
list-style-image: none | url | initial | inherit
none : 이미지 없음.
url : 사용할 이미지의 URL을 입력.
initial : 기본값으로 설정.
inherit : 부모 요소의 속성값을 상속.
이미지는 원본 크기 그대로 나오기 때문에 사용전 이미지크기를 미리 글자크기에 맞게 만들어야 한다.
list-style-type를 사용하여 마커를 다른 모양으로 선택할 수 있다.
속성값은 다음과 같습니다.
<ul> : disc, circle, square
<ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
공통 : none
box model
문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.
CSS의 각 태그의 영역은 Box Model로 구성된다.
content : 글씨가 삽입되는 영역
border : 테두리 영역
padding : content와 border 사이
margin : border와 다른 태그 영역 사이
margin과padding값을 주는 방법
padding과 margin 속성에 값을 부여하는 방법은 다음과 같이
시계방향으로 순서대로 정의할 수 있다.
padding: 위쪽 오른쪽 아래쪽 왼쪽;
margin:위쪽 오른쪽 아래쪽 왼쪽;
속성값을 두개만 주는 경우 첫번째 값은 위아래, 두번째 값은 좌우 여백을 의미한다.
padding: 위아래 좌우 ;
margin: 위아래 좌우;
만약 한방향에만 속성값을 주고 싶은경우 다음과 같이 작성한다.
padding-top: xx;
padding-right: xx;
padding-bottom: xx;
padding-left: xx;
margin-top: xx;
margin-right: xx;
margin-bottom: xx;
margin-left: xx;
box-sizing: 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성
content-box : 콘텐트 영역을 기준으로 크기를 정한다.
border-box : 테두리를 기준으로 크기를 정한다.
initial : 기본값으로 설정.
inherit : 부모 요소의 속성값을 상속.
content-box를 사용하여width값을 100px을 주었을때 테두리를 포함하면 전체적인 크기는 100px이 넘는다
border-box사용하여width값을 100px을 주었을때 테두리를 포함한 전체적 크기는 정확히 100px이 된다.
