부스트 코스를 들으며 이번 강의는 스스로 혼자 해봤다.
완전 정확하게는 아니더라도 요구사항을 분석하고 그걸 구현 할 고민을 하고 마크업을 했다. 밑에 서브 이미지리스트 부분은 1개만하고 나머지는 반복이어서 하다가 말았는데 하다가 애매하다 싶은 부분은 나중에 강의에서 해결해야겠다고 생각하고 넘어갔다가 애매한 부분만 모아 놓은 핵심강의가 있어서 이 이 부분은 꼭 정리하고 스스로 마크업해보고 넘어 가야겠다 싶어서 글을 작성하게 됬다.
- 부모요소에
width가 정해진 경우 자식 요소들이float속성을 가지고margin속성으로 리스트들의 간격을 조정해야할때.
이 부분은 항상 고민이 많았는데, display: flex를 이용하면
요소들 간 마진값을 조정하면 요소들의 width는 자동으로 조절이 되어서 쉽게 해결 했는데 float 속성을 가지고 가로 정렬 할 경우 요소들의 마진값을 어떻게 잘 배치해야 갈끔하게 할까 생각을 많이 했다.
이 부분은 좀 간단했는데... 부모 요소의 width에 맞춰서 자식 요소들의 width의 합을 제외 한 후 그것을 margin으로 나눠 준다.
top에서는 width: 300px로 선언을 하고 3개의 요소들의 총 width값이 270이니까 요소 사이의 마진값을 30px로 했다.
bottom에서 역시 width: 300px로 하고 요소들의 총 너비가 240px이므로 나머지 60px을 가지고 요소 사이의 마진값을에 나눴다.
- 여러줄 말 줄임 효과
1줄 말줄임은 지난 강의에서 많이 사용했기때문에 숙지를 했지만 여러줄 말 줄임은 잘 몰랐다. 특히한 점은 웹킷기반 브라우저에서만 작동한다.
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; 위와 같은 css 스타일링을 추가해주어야 하며
1줄의 line-height와 보여지고자 하는 줄의 수에 맞게 max-height을 정해주어야 한다.
- 이미지에 'Dimmed' 효과 주기
처음에는 임의의div요소를 주어서 해결했는데 시멘틱적이지 않아 불필요한 요소를 만들지 않고 dimmed 효과를 주는 방법을 알게되었다.
