728x90

목록분류 전체보기 (36)

디자인과 개발 그 사이

table 기본 셋팅/border-spacing/border-collapse

table를 그냥 만들면 칸마다 공간이 생긴다. 이를 없애기 위해 기본으로 넣어두는 값이 있다. 바로 아래 두가지 이다. border-spacing: 0; border-collapse: collapse; html 제목 제목 제목 가로 합친 제목 세로 합친 내용 내용 내용 가로 합친 내용 내용 내용 내용 내용 css .table { border-spacing: 0; border-collapse: collapse; } .th, .td { padding: 5px; border: solid 1px #000; text-align: center; font-weight: 400; } 결과 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 결정 border-s..
css 2023. 7. 17. 14:18
css 줄바꿈 지정하기 white-space/word-wrap/word-break

가장 많이 사용 가는 코드 / 사용 예제 바로 가기 🚀 white-space 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정 normal : 글자 줄이 자동으로 바뀜, 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀜 (기본 값) nowrap : 줄 바꿈이 실행되지 않음 즉, 콘텐츠가 다음 줄로 바뀌지 않고 한줄로 표현 pre : HTML원본 텍스트 그대로 표시, !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원 pre-wrap : HTML원본 텍스트 그대로 표시하지만, 영역내 줄 바꿈을 인식 pre-line : 문자를 기준으로 줄을 나눔 css .box {width: 200px; padding: 10px; border: solid 1px #000;} .normal {white-spac..
css 2023. 7. 14. 16:51
css로 말줄임 만들기 /ellipsis '...'/ 한줄, 두줄이상

공지사항, 게시판, 댓글 등의 기능 구현할 때 사용하게 되었던 CSS 속성 중 하나인, 넘치는 글 숨기기 한줄 말줄임 html 신사숙녀 여러분 안녕하세요! css .boxStyle{ display: inline-block; width: 200px; padding: 10px; border: solid 1px #000; } .ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 word-break:..
css 2023. 7. 14. 11:36
jQuery 사용한다고 선언하기 - 최신 버전의 jQuery 스크립트 선언

jQuery 사용한다고 선언하기 1. 제이퀴리 사이트 API를 다운받아 경로 설정하여 사용 - 제이퀴리 사이트 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com 2. 에 jQuery에서 제공하는 최신 버전의 jQuery url 스크립트..
jQuery 2023. 7. 11. 11:23
이전 Prev 1 2 3 4 5 Next 다음
728x90