label / font-size와 점점점(...)점으로 처리하기 / white-space: nowrap,overflow: hidden, text-overflow:ellipsis

인스타그램의 로그인페이지를 따라하다가 작은 화면에서 페이지에서는 ...으로 처리하는 효과가 필요했습니다.

부트스트랩의 Input과 labal을 사용하게 되면 label의 폰트의 사이즈를 줄이는 방법과
input의 넓이가 줄어들었을 경우 label이 input 밖으로 나가지 않도록 설정하고 ...으로 처리되는 효과를 적용하는 방법입니다.

---

 

---

 

1. label font size 수정하기 / 라벨 폰트 크기 수정하기.

라벨태그의 폰트를 수정하는 것은 아주 간단하다. lable의 스타일에서 font-size를 사용하면됩니다.
여기서의 라벨태그는 input 박스 안에서 출력되는 글씨들입니다.

이렇게 간단한 것도...30분 넘게 헤매는 사람이 있다..

rem을 사용해도 되고 pt단위를 사용해도 된다.

label{
    font-size: 10pt;
}

rem은 크기의 단위입니다. 상대 단위로 부모 요소나 다른 요소의 크기에 영향을 받아 크기가 상대적으로 변합니다.
em은 부모태그의 폰트사이즈가 16pt라면 1em은 16pt와 동일합니다. 또한 부모태그의 폰트가 10pt라면 1.5em은 15(10*1.5) pt가 되는것입니다. 그러면 rem은 부모태그가 아닌 최상의 태그 html 또는 body의 폰트크기에 상대적으로 크기를 변경하는 방법입니다. rem과 em의 사용방법을 알고 있다면 반응형 웹사이트를 제작할 때 유용합니다.
반면 pt는 절대 크기고 정해진 값이 절대 편하지 않습니다.
상대단위와 절대단위를 알고 있다면 반응형 웹페이지를 제작하는데 도움이 될 것 같습니다.

CSS 단위 px pt em rem % 란 무엇이며 차이점은?

 

 

2. label ellipsis(생략) 적용하기
input영역을 넘어가는 label 점점점(...)점으로 처리하기

...으로 처리하는 방법은 정말 많이 사용했었는데 공부를 다시 하다보니 기억이 나지 않아서 다시 찾아보았습니다.
text-overflow:ellipsis 속성을 사용하면 바로 될 줄 알았는데 그렇지 않아서 고생했습니다....

label{
    font-size: 0.8rem;
    width:100%;	
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

영역을 벗어나는 label을 ...으로 처리하는 text-overflow:ellipsis 속성을 적용하면 ...으로 처리되는 될 줄 알았는데 적용이 되지 않아서 찾아본 결과 꼭 같이 사용되는 속성이 필요합니다. 

1. label의 width가 존재해야 한다.
2. white-space: nowrap이 적용되야 한다. nowrap은 텍스트가 미디어에 따라서 줄바꿈이 생길때 이를 방지하는 속성이다.
3. overflow: hidden 영역을 벗어난 텍스트를 안보이게 해주는 역할을 한다.
4. text-overflow:ellipsis 영역을 벗어난 텍스트들을 ...으로 표시 해줍니다.

위의 4개의 속성을 적용해주면 ...으로 표시되는 label을 확인 할 수 있습니다.

 

이렇게 적당하게 폰트사이즈와 폰트가 영역에서 줄이 바뀌거나 영역을 벗어나지 않게 만든다면 아무지 작은 크기의 화면에서도 깔끔한 화면을 제작 할 수 있습니다.

 

참고한 사이트 입니다.

[WEB]글자 길어지면 점으로 표시

 

How to use "text-overflow: ellipsis" with a label element?