본문 바로가기

'.' Programs/CSS

 (101)
Line - Height Line - Height 개요 : 이 속성은 요소의 줄높이(행간, 글자 높이)를 지정한다. line-height와 font-size 값의 차이는 리딩(leading)이하고 하며, 리딩의 절반은 요소의 내용 영역이나 글자 줄의 위와 아래에 동일하게 적용된다. 정의 line-height 설명 값 normal | | | | inherit 기본값 normal 적용대상 모든 요소 상속 됨 백분율 자신의 글꼴 크기 참조 미디어 visual 값 값 설명 normal 기본 크기(1.0~1.2) 를 지정한다. 단위를 포함하지 않은 수치를 지정한다. 수치에 글꼴 크기 곱해서 line-height가 지정된다. 길이를 지정한다. 백분율 (%) 값을 지정한다. 부모 요소를 기준으로 계산된다. inherit 부모 요소의 값을 상..
Text-Indent Text-Indent 개요 : 이 속성은 요소의 첫 번째 행의 들여쓰기를 지정한다. 음수 값을 사용하면, 내어쓰기(hanging indent)와 같은 다양한 글자 효과를 줄 수 있다. text-indent 설명 값 | | inherit 기본값 0 적용대상 블럭 레벨 요소 상속 됨 백분율 용기 블럭의 크기를 참조 미디어 visual 값 값 설명 길이를 지정한다. 음수를 지정하면 내어쓰기가 된다. 백분율(%)값을 지정한다. 부모 요소를 기준으로 계산된다. inherit 부모 요소의 값을 상속하도록 지정한다. ------------------------------------------------------------------------------------------------------- 예제 View S..
Text-Align Text-Align 개요 : 이 속성은 요소가 포함한 인라인 요소의 수평 정렬을 지정한다. 주로 글자의 수평 정렬을 지정할 때 사용하며, 요소 안에 포함한 이미지나 인풋 박스나 라디오 버튼 같은 폼 요소와 같은 인라인 요소의 수평 졍렬도 지정할 수 있다. 블록 요소의 수평 정렬은 margin-left, margin-right 속성으로 지정한다. 정의 text-align 설명 값 left | right | center | justify | | inherit 기본값 화면 표시 장치의 기본 스타일 참조 적용대상 블럭 레벨 요소 상속 됨 백분율 사용 불가 미디어 visual 값 값 설명 left 왼쪽으로 정렬하도록 지정한다. right 오른쪽으로 정렬하도록 지정한다. center 가운데로 정렬하도록 지정한다. ..
White-Space White-Space 개요 : 이 속성은 요소의 공백문자를 어떻게 다룰지 지정한다. HTML은 연속된 공백문자와 줄바꿈 및 탭을 무시하므로, 소스코드나 ASCII 아트(그림문자)를 표현하기 위한 목적으로 사용한다. 정의 white-space 설명 값 normal | pre | nowrap | inherit 기본값 normal 적용대상 블럭 레벨 요소 상속 됨 백분율 사용 불가 미디어 visual 값 값 설명 normal 정상적으로 출력하도록 지정한다. 연속 공백과 줄바꿈을 통합한다. pre 연속 공백와 줄바꿈을 통합하지 않고, 원본 그대로 출력하도록 지정한다. nowrap 연속 공백은 통합하지만 줄바꿈은 통합하지 않도록 지정한다. inherit 부모 요소의 값을 상속하도록 지정한다. -----------..
Vertical-Align Vertical-Align 개요 : 이 속성은 요소의 베이스라인을 행 높이를 기준으로 수직 정렬한다. 정의 vertical - align 설명 값 baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit 기본값 baseline 적용대상 인라인 요소와 테이블 셀 요소 상속 안됨 백분율 자신의 line-height 를 참조 미디어 visual 값 값 설명 길이를 지정한다. '0'은 'baseline'과 같다 백분율(%)값을 지정한다. 'line-height'를 기준으로 계산되며, '0(%)'는 'baseline' 과 같다. baseline 기준선에 정렬하도록 지정한다. middle 가운데 정렬하도록 지정한다. s..
Word-Spacing Word-Spacing 개요 : 이 속성은 요소에 포함된 단어 사이의 공백의 크기(단어간/어간)를 지정한다. 단어란 공백문자(white space)에 둘러싸인 문자열을 의미한다. (예: "word spacing"의 단어는 "word"와 "spacing" 2개며, "word-spacing"의 단어는 "word-spacing" 1개다.) 공백문자의 출력 방식은 white-space 속성으로 지정할 수 있다. 정의 word-spacing 설명 값 normal | | inherit 기본값 normal 적용대상 모든 요소 상속 됨 백분율 사용 불가 미디어 visual 값 값 설명 normal 기본 간격을 지정한다. 길이를 지정한다. 이 길이는 단어 사이의 간격을 추가되며, 글자를 양쪽정렬(justify) 하려면 ..
Letter-Spacing Letter-Spacing 개요 : 이 속성은 요소의 글자 사이의 공백의 크기(자간)를 지정한다. 글자나 단어 사이의 공백도 하나의 글자로 보기에, "나는 너를"에선 "나,는, ,너,를" 5개의 글자에 사이의 공백에 영향을 준다. 음수 길이값을 지정할 수 있으나, 텍스트를 인식하는데 장애를 줄 수 있기 때문에 사용에 신중해야 한다. 정의 letter-spacing 설명 값 normal | | inherit 기본값 normal 적용대상 모든 요소 상속 됨 백분율 사용 불가 미디어 visual 값 값 설명 normal 기본 간격을 지정한다. 길이를 지정한다. 이 길이는 글자 사이의 간격에 추가되며, 글자를 양쪽정렬(justify)하려면 크기를 지정할 수 없다. inherit 부모 요소의 값을 상속하도록 지정..
Text-Decoration Text-Decoration 개요 : 이 속성은 요소의 글자에 밑줄(underline)이나 윗줄(overline), 취소선(line-through) 등의 꾸밈을 지정합니다. 줄을 그어 꾸미는 효과는 글자를 읽기 어렵게 할 수 있습니다. 영어와 달리, 한글은 글자가 밑줄과 윗줄과 겹칠 수 있기 때문입니다. "잘"이라는 글자를 예를 들면, 자음 "ㅈ"과 윗줄(overline)이 겹치고, 받침글자 "ㄹ"과 밑줄이 겹칩니다. 또한, 취소선(line-through)은 del 태그를 사용하는 게 바람직합니다. 정의 text-decoration 설명 값 none | [underline || overline || line-through || blink ] | inherit 기본값 none 적용대상 모든 요소 상속 안됨..

티스토리툴바