[IT] HTML - hidden 속성이란 ? (css 글자수 넘어가면 말줄임표 )

ㅇ hidden

ㅡ hidden 속성을 넣어주면 브라우저 상에서 숨기는 기능

ㅡ 개발자 도구로 열어보면 코드는 남아 있다.

ㅡ 스크린 리더로 읽을 때에도 숨겨지게 된다.

 

ㅇ input 태그의  hidden 속성

ㅡ 브라우저에는 보이지 않지만 결과값을 넘겨주어서 값의 정보가 확인 가능 하다.

 

ㅇ css의 overflow: hidden 속성

ㅡ 넘쳐흐르는 부분을 숨긴다 .

 

< 요소를 없애는 방법 2가지>

* display: none

ㅡ 코드는 존재, 레이아웃에서 사라짐

* visbility: hidden

ㅡ 문서의 레이아웃을 변경하지 않고 , 숨김

ㅡ 레이아웃에서 숨기지 않고 나옴 ( 요소의 빈 부분만 나옴)

---

< css 글자수가 넘어가면 말줄임 >

ㅡ white-space : nowrap; 속성은 줄바꿈을 방지하고, 너비를 넘어선 글자는 overflow:hidden을 적용하여 숨겨준다.

ㅡ  text-overflow:elipsis ; 한문장에서만 사용가능하며 , 영역의 끝부분에 말줄임표가 생긴다.

 

ㅇ 여러줄을 보이게 하려면

ㅡ white-space: nowrap; 속성을 해제하고 첫줄 높이를 line-height:1.2지정한다

ㅡ word-wrap : break-word ; 단어 단위로 줄바꿈

ㅡ text-align : left;  텍스트 왼쪽 정렬

ㅡ display:-webkit-box; 높이를 유연하게 증감시켜서 플레스 박스형태로 변환한다

ㅡ webkit-line-clap:숫자;  숫자줄에 말줄임표가 생긴다.

ㅡ webkit-box-orient: vertical;  플렉스 박스의 방향 설정(가로)