요약
여태까지 배운 css에 대한 기본 지식을 실습하는 시간
배운 내용
1. display: inline-block;
- 메뉴와 같은 list들을 row 정렬하고 싶을 때, inline-block을 사용하면, 고유의 margin 값이 있어 list 사이에 빈 공간이 생길 수밖에 없다.
- 이럴 때엔
float: left;➕ parents에overflow: hidden;으로 해결 가능
2. line-height, y축 정렬
2-1. 선택 영역에 height가 있을 경우
a의 y축 정렬의 경우line-height: height 값;으로 가능
2-2. 선택 영역에 height가 없을 경우
padding-top/bottom: 원하는 값;으로 직접 설정하기
3. a 태그 영역 넓히기
display: block;을 적용 후, 원하는 styling 속성 및 값을 추가하여 가능
4. border 세밀하게 입력하기
Ex) list 사이에 border 값이 겹치지 않도록 입력하고 싶을 때...
border-top, bottom, left: xxxx;입력한 후,- 리스트의 가상 선택자로
li:last-child { border-right: xxx; }으로 마무리 하기
5. 참고 사이트
CSS 레이아웃을 배웁시다라는 사이트에서 레이아웃에 관한 전반적인 리뷰를 할 수 있다. 참고하자!
어려웠던 점
전반적으로 그렇게 어려웠던 것은 없었다. 다만 여러가지를 배우는 중이기에, 리뷰가 상당히 필요한 듯 하다.
해결한 방법
강사님이 소개해준 해당 사이트가 리뷰에 꽤 도움이 된다.
소감
내가 원하는 디자인 및 레이아웃을 css에서 구현하기 위한 방법이 늘 한 가지만 있는 것이 아니라 여러가지 선택지가 있다는 점이 매력적이면서 동시에 어려운 것 같다.
나의 코드
수업에 따라 진행한 나의 코드는 여기에 있다.
