나의 첫 웹사이트 만들기_(2)

 코드 🔽

https://github.com/Bluishhot-Star/WEB/tree/master/Firstpage

 

저번에 이어서 웹사이트를 완성해 보았다.

아직 JS는 적용하지 않은 상태로,

HTML과 CSS만으로 만들어졌다!

 

1. 나의 애정하는 리스트

 

오버시 효과

블록이 살짝 올라가서 오버를 했다고 인지하도록

효과를 주었다.

 

만약 내부 내용이 길어졌을 때에는

말줄임을 표시하도록 설정하였다.

.card-title{
    width: 220px; /*설정해주지 않으면 말줄임 속성 X*/
    white-space: nowrap; /*공백에 대해서 감싸지 않기(공간을 넘어서도 줄바꿈 X)*/
    overflow:hidden; /*넘치면 숨기기*/
    text-overflow: ellipsis; /*말줄임 표시*/
}

위의 코드가 모두 있어야

말줄임표시가 적용이 된다.

 

2. 푸터

 

3. 파비콘 설정

직접 파비콘을 그려서 만들어주었다!

---

추후의 계획

리스트를 화살표를 눌러서 좌우로 넘겨 볼 수 있게 만들 예정이다!