white-space:nowrap : 줄바꿈 방지

overflow:hidden : 글자자름

text-overflow:ellipsis : 말줄임표(...) 표시

title : 말풍선 표시

nobr : 줄을 바꾸지 않음. html 공식 태그가 아님 쓰지 않는것을 추천(하지만 위 속성이 적용안될때가 있음 ㅜ.ㅜ)

 

<div style="width:200px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;" title="문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.">
 문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.
</div>

 

* 결과

문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.

 

<table border="1" style="table-layout:fixed" width="300">
 <tr>
  <td width="100">Start</td>
  <td width="200" style="text-overflow:ellipsis; overflow:hidden; white-space:nowrap;" title="문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.">
   <nobr>문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.</nobr>
  </td>
 </tr>
</table>

 

* 결과

Start 문자열이 길 경우 말줄임표를 사용하여 보여주고 마우스를 글자위에 올리면 title 속성을 이용하여 말풍선으로 전체 문자열을 보여줍니다.
반응형

'개발 > CSS' 카테고리의 다른 글

css 속성 강제적용 important  (0) 2019.02.27
CSS media 쿼리 사용  (0) 2019.02.01

개발을 하다가 태그 style에 속성을 적용했는데 적용이 안되는 경우가 있어 찾아봤다.

 

!important 이것의 기능을 모르다보니 조금 헤맷다.

 

예를 들어 css에 input { color : blue !important; } 이렇게 선언이 되어 있고

 

html에서 <input type="text" value="Good" style="color:red;" /> 코딩을 하였다고하면

 

글자색은 파란색이 나올까? 빨간색이 나올까? 결과는 파란색이 나온다.

 

!important 는 우선적으로 적용이 되고 아래와 같은 형태로 작성이 되어진다.

 

선택자 { 속성: 속성값 !important;}

 

 

 

반응형

'개발 > CSS' 카테고리의 다른 글

테이블 Td나 Div에 문자열이 길 경우 말줄임표 기능 표현  (0) 2019.03.08
CSS media 쿼리 사용  (0) 2019.02.01

CSS media 쿼리를 사용하여 반응형 웹페이지를 구현할 수 있다.

 

아래와 같은 경우 브라우저 화면이 1145px까지는 해당 스타일이 적용된다는 예이고.

 

@media ( max-width : 1145px) {
 .menu-tab li a {font-weight: 600;text-decoration: none;padding: 20px 8px;letter-spacing: -1px;display: block;color: #000;
  transition: all 0.2s ease-in-out 0s;border-top: 1px solid #e6e8e8;font-size: 13px;}
}

 

아래와 같은 경우 브라우저 화면이 480px 이하일 경우 해당 스타일이 적용된다는 것이다.

참고로 media  다음에 디펄트는 all이고 screen이나 print 등을 지정할 수 있다.

 

@media screen and (min-width: 480px) {
 .selct-mom {max-width: 720px;width: 100%;margin: 0 auto;overflow: hidden;font-size: 12px;font-weight: 700;letter-spacing: -1px;}
}

반응형

'개발 > CSS' 카테고리의 다른 글

테이블 Td나 Div에 문자열이 길 경우 말줄임표 기능 표현  (0) 2019.03.08
css 속성 강제적용 important  (0) 2019.02.27

+ Recent posts

티스토리툴바