css 2

[HTML/CSS] 글자 짤림 / 줄바꿈 규칙 정하기

글자 단위/단어 단위로 줄바꿈 설정하기 사이트에서 줄바꿈 되는 단위가 글자로 되어 있으면 가독성이 불편할 뿐만 아니라, 미적으로 신경쓰이게 됩니다. 때문에 단어 단위로 줄바꿈을 하는 것이 권장됩니다. 주로 'keep-all' 혹은 'break-word' 방식을 사용합니다. HTML/CSS 코드 CSS 속성 word-break : 텍스트가 줄 끝에 도달할 때 단어를 자르는 방식을 지정합니다. CSS 값 normal : 디폴트(Default) 줄 바꿈 규칙을 사용합니다. 영역 밖으로 단어가 튀어(overflow)나올 수 있습니다. break-all : 텍스트가 영역 밖으로 튀어 나오는 것을 방지합니다. 글자 단위로 줄 바꿈이 이뤄집니다. keep-all : 한/중/일 텍스트에 대해서는 줄을 바꿀 때 단어를 ..

WEB/WORDPRESS 2022.07.07

요약글/발췌문(Excerpt) 글 길이 맞추기

글자 수를 맞출 필요 없이, CSS로 텍스트 자동 생략 설정하기 글(Post)의 대략적인 내용을 알려주는 '요약글/발췌문(Excerpt)'은 워드프레스에서 기본적으로 적용되어 있는 기능입니다. 요약글이 적용되면 화면의 레이아웃에 맞게 글 끝부분이 [...]으로 생략됩니다. 하지만 자동으로 설정되는 요약글은 제목과 문단 구분 없이 순서대로 내용을 출력하기에, 띄어쓰기가 어색해지거나 요약 내용에 아쉬움이 느껴질 때가 있습니다. 때문에 수동 요약글을 주로 사용하는데, 이때 일부 테마에서는 자동 생략이 적용되지 않습니다. 요약글 자동 생략이 되지 않을 때에는 PHP 코드 수정, 플러그인 설치, CSS 추가 등의 방법을 사용하여 조치합니다. 하지만 PHP 코드 수정은 웹 개발 지식과 각 테마의 파일 구성에 대한 ..

WEB/WORDPRESS 2022.03.14