[css] 텍스트 문장 구성 관련 속성 (overflow , text-overflow, visibility, display...)

overflow 

 

속성	설명
visible	오버플로우된 항목을 잘라내지 않는다
hidden	오버플로우된 부분을 감춘다
scroll	오버플로우 속성에 강제로 스크롤 바를 생성한다
auto	오버플로우되면 자동적으로 스크롤 바가 생성된다
inherit	속성이 상속된다

 

---

 

visible 

default 값이다 

 

.container{
    width: 300px;          //박스 크기 설정
    height: 500px;
    
    overflow: visible;
}

 

 

 

꾸역꾸역 넣어서 삐져나감을 볼 수 있다

 

 

---

scroll

강제 스크롤 생성

.container{
    width: 300px;
    height: 500px;
    

    overflow: scroll;
}

---

text-overflow

 

속성	설명
clip	기본값으로서, 단순하게 텍스트틀 자른다
ellipsis	잘린부분에 ... 표시
string	예) text-overflow: " ///" 하면  잘린부분에 /// 표시가 된다  ---- 지원 브라우저 확인할 것

 

.container{
    width: 300px;
    height: 500px;
    
    overflow: hidden;         // 가려진 부분 안보기
    text-overflow: ellipsis;  // ...으로 처리하기
    white-space: nowrap;      // 빈여백을 처리 해준다 길어도 다음 라인으로 보내지 마세요! 라는뜻
}

 

 

 

---

word-wrap

 

 

영문 페이지에서 한 단어의 크기가 너무 크면 정렬할 수 가 없다. 단어를 분리하여 다음 행으로 보낸다

한글은 필요없음!

속성	설명
normal	단어 안 쪼갠다
break-word	길이가 길면 강제로 다음 행으로 보낸다

 

 

.container{
    width: 300px;
    height: 500px;
     
    word-wrap: break-word;
}

↑하게 되면

 

 

요롷게 잘려서 안으로 들어 간다

 

---

visibility

 

HTML요소들을 감출 수 있게 해 준다

단, 감춰진 부분에 대한 공간은 여전히 존재한다

 

속성	설명
visible	기본적 속성 요소들이 보인다
hidden	안보인다. 그 공간은 차지한다
collapse	테이블 태그에만 적용할 수 있다 테이블을 감춘다
inherit	부모로부터 속성을 상속한다

 

 

                         ↓결과

.box2{
     visibility: hidden; 
}

 

 

---

display

 

박스 모델 중 블록 요소를 inline으로 변경하거나 인라인 요소를 블록으로 바꿀때,

박스 모델 없앨 때 사용된다

 

속성	설명
none	HTML 감춘다 공간차지 x
block	HTML 요소 블록처리
inline	HTML 요소 인라인 처리
list-item	HTML 요소 리스트와 동일하게 처리 해당요소앞에 불릿이 생긴다 ※텍스트 앞에 붙이는 특수 문자
inline-block	HTML 요소 인라인 블록 처리

 

 

 

윗 그림의 파란색(box2)에 none속성을 적용해 주면 공간을 차지하지않고 숨김이 가능하다

 

                      ↓결과

.box2{
     display: none;
}

 

 

 

 

 

HTML 속성에서 인라인 태그와 블록 태그가 있다

보통 인라인 태그는 img, string, b , a태그처럼 텍스트와 같이 한 줄에 표기할 수 있다

블록태그는 크기만큼 그 줄을 다 차지하게 된다 (div)

 

---

 

 

인지해두고

 

활용을 잘하자 

 

 

 

 

 

 

 

 

참조: '백견불여일타HTML5&CSS3'