반응형 study/CSS13 [IR] text-indent 이미지 교체하기 image-replacement 강의14 2020. 2. 2. [텍스트 스타일]04. 줄넘김 white-space *white-space white-space: normal nowrap pre pre-wrap pre-line initial inherit 스페이스와 탭 줄바꿈 자동 줄바꿈 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O initial : 기본값으로 설정함 inherit : 부모 요소의 속성값을 상속받음 2020. 2. 2. [텍스트 스타일]03. vertical-align, text-align, word-break *vertical-align - 홈페이지를 만들다가 border 안에 이미지를 넣는데 이미지 아래쪽에 공백이 생길경우 그럴때 vertical-align: top; 사용 공백 없어짐 *text-align justify: 양쪽 정렬을 해준다. 하지만 이때 단어나 문단의 간격이 넓어지거나 떨어지게 된다. *word-break justify로 정돈 되지 않은 문장들을 정돈 시켜준다. word-break: break-all; 2020. 2. 2. [텍스트 스타일]02. 간격 letter-spacing, word-spacing, line-height *letter-spacing (자간) - 글자 사이의 간격 - 값이 커지면 간격도 커진다 - 음수 사용 가능 (음수 사용시 글자 겹칠 수 있다) *word-spacing - 단어와 단어 사이의 간격 - 값이 커지면 간격도 커진다 - 음수 사용 가능 (음수 사용시 글자 겹칠 수 있다) *line-height - 줄 높이 - 기본값: normal - 상속 가능 - 애니메이션 가능 line-height : normal length number percentage initial inherit normal : 웹브라우저에서 정한 기본값. 보통 1.2 length : 길이로 줄 높이를 정함 number : 글자 크기의 몇 배인지로 줄 높이를 정함 percentage : 글자 크기의 몇 %로 줄 높이로 정함 init.. 2020. 2. 2. 이전 1 2 3 4 다음 반응형
