[코드]

[배운내용]

css코드 작성할 때 자기 나름대로이 순서 규칙두기!

▒TIP▒
선생님의 경우,
초반 - overflow, float, display, position등
중간 - 공간과 배치작업
마지막 - 폰트 속성

말줄임표시 하기

(1) 첫번째 줄에서 말줄이기

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

• text-overflow: ellipsis;
  : 말줄임기호(…)를 넣는 속성
• white-space: nowrap;
  : 영역 내에서 문장이 길 때, 자동으로 다음줄로 내려가는 것을 제거하는 속성
• overflow: hidden;
  : 영역에서 넘치는 요소를 숨겨주는 속성

    display: -webkit-box;
    overflow: hidden;
    max-height: 38px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
/* word-break: break-all;
    word-wrap: break-word;*/
    text-overflow: ellipsis;

• display: -webkit-box ;
  : 해당 영역을 box 형태로 관리되도록 하는 속성
• -webkit-line-clamp : (숫자);
  : 지정된 라인 수로만 컨텐츠 내용을 제한하는 속성.(최대 라인 수를 결정)
• -webkit-box-orient: vertical;
  : 영역 박스 내의 정렬을 수직으로 하도록 하는 속성

2줄을 3줄 혹은 그 이상으로 바꾸고자 하면, -webkit-line-clamp값을 원하는 숫자로 바꾸고, max-height값을 조정해주면 된다.

-webkit-line-clamp 속성은 IE(Internet Explorer)에서는 적용되지 않음 !

• word-break
  : 단어의 분리를 어떻게 할 것인지 결정하는 속성. 예를 들어 줄바꿈을 할 때 단어 단위로 분리할 것인지, 음절 단위로 분리할 것인지 결정한다.
  속성값 - normal, break-all, keep-all
  참고 사이트
• word-wrap: 긴 텍스트를 강제로 끊어 줄바꿈을 해주는 속성
  속성값 - normal, break-word

[어려웠던 점]

[학습소감]

아직도 div를 묶는 것이 조금 부족한 것 같다. 이미지가 있고 그 밑에 제목과 내용, 저자가 있는 부분을 할 때, 텍스트들을 묶는 div를 만들어야하는데 자꾸 잊고 바로 h3이렇게 적어버릇한다. 앞으로도 주의해야겠다.