웹사이트의 기사 부분처럼 만드는 법
white-space
- 요소가 공백 문자를 처리하는 속성이다.
white-space: normal: 기본값, 자동으로 줄 바꿈이 된다.white-space: nowrap: 자동 줄바꿈 안됨 (엔터와 스페이스바 적용 안됨)white-space: pre: 자동 줄바꿈 안됨 (엔터와 스페이스바 적용 됨)white-space: pre-wrap: 자동 줄바꿈 가능, pre 태그처럼 공백이나 엔터 인식white-space: pre-line: 자동 줄바꿈 가능, 엔터 인식 됨(스페이스 인식 안됨)
text-overflow
- 글자가 넘친 것을 인지해서 말 줄임표를 붙여줄지에 대한 속성
overflow
- 요소의 콘텐츠가 넘쳤을 때 어떻게 할 지 정하는 속성
overflow: visible: 기본값. 넘친 요소를 다 보여줌overflow: hidden: 넘친 요소를 숨김overflow: scroll: 요소의 크기만큼만 보이게 해주고, 스크롤바가 생성되어 넘친 요소를 볼 수 있게 해줌
위 사진은 다음 사이트의 게시판인데, 게시판을 보면 헤드라인이 말줄임표가 되어 있는 것을 볼 수 있다. 이런 경우에는 width 값이 정해져 있어야 되고, overflow 속성, text-overflow 속성, white-space 속성이 필요하다.
예시로 만듦
<body>
<div class="container">
<div class="left-box">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
</div>
<div class="right-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
</div>
</div>
</body>.container {
display: flex;
width: 500px;
overflow: hidden;
}
.container .left-box {
flex: 50%;
}
.container .left-box img {
width: 200px;
}
.container .right-box {
flex: 50%;
width: 250px;
}
.container p {
white-space: nowrap;
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
}
- white-space: nowrap, overflow: hidden, text-overflow: ellipsis, width 값이 지정되어 있어야 적용이 된다.
- 그리고 전체적인 상자가 아닌 각각의 요소를 적용해야 된다. (container right-box에 주었더니 overflow:hidden은 되지만 말줄임표가 적용되지 않았다.)
- 그래서 다음 사이트에서 요소 검사를 해봤더니, 각각의 li에 스타일을 적용한 것을 확인할 수 있었다.
flex로 글씨 가운데 정렬하는 방법
text-align: center가 아닌 flex를 이용해서 글씨를 가운데로 정렬할 수 있다.
<div class="container">
<div class="box">center</div>
</div>.container {
background-color: blue; /*구분하기 쉬우려고 백그라운드를 준 것이다.*/
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
background-color: #fff;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}- 글씨 부분을 div로 감싸준 다음에 div에 display: flex; 속성을 적용시키고, justify-content: center;, align-items: center;를 적용시키면 가운데로 정렬할 수 있다.
처음에는 컨테이너 박스에 width 값을 지정하고, overflow를 적용하고 각 문단에다가 text-overflow를 이용해서 말줄임표를 적용할 수 있을 거라고 생각했다. 하지만 각각 적용해줘야 된다는 것을 이번 예제를 혼자 만들어 보면서 깨달았다. 만약 직접 만들어보지 않았더라면, 알지 못했을 거라고 생각한다...!ㅠㅠ
경험한 것을 기록