<SWF> 반응형 웹페이지 만들기 (5)

프로젝트를 완성시키기 위해 다시 코드를 짜보려고 한다.

먼저 해결하지 못했던 문제들부터 고친 다음, 부수적인 부분을 발전시켜나가야겠다.

 

 

문제 1. 튀어나온 글자 집어 넣기

 

 

 

 

변경 전 CSS

.choreo-info{
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    max-width: 240px;
}

 

 

변경 후 CSS

.choreo-info{
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
}

 

 

해결방법

 

white-space 의 속성을 nowrap으로 설정해 줄바꿈을 하지않고,

크루이름 옆에 안무가의 이름이 나올 수 있도록 설정해주었다.

 

 

 

결과

 

 

 

 

보완사항

줄이 길어져서 안무가들의 이름이 제대로 보이지 않는다.

따라서 html을 활용해 해당 문구를 움직이도록 만들어주려고 한다.

 

 

 

🌟POINT🌟

 

1. white-space 속성

 

2. 흐르는 텍스트 구현하기

https://gyurisinzorba.tistory.com/98

[CSS] 흐르는 텍스트 구현하기