간단한 요약
실질적 웹사이트를 구축해보는 연습이다. javascript를 제외한 html/css의 많은 부분을 연습할 수 있던 강의였다.
배운 내용
1. overflow-x
overflow-x: hidden;은 X축 기준으로 현재 화면을 벗어나는 부분은 hidden처리 함- 즉, 내용이 화면을 X축으로 벗어나더라도 가로 스크롤이 생성되지 않음
2. background-image
- 배경이 아닌 요소를 배치할 때,
background-image사용할 시img원래의 크기에 맞게 사용하는 것이 좋다. 아니라면img를background-repeat으로 조절해야 할 경우가 생기기 때문.
3. float
float으로 요소를 배치할 때, 만약 해당 요소의 float 합이 해당 영역을 초과한다면 layout은 틀어지게 됨.
4. 실무 팁
- img를 사용할 때엔 크기의 경우 짝수/5단위 로 끝나는 크기를 사용하는 것이 일반적
body {overflow-x: hidden;}은 가로 스크롤 방지 기능, default로 종종 사용됨
5. mobile css 제작
- 어떤 요소를 mobile 크기에서는 감추고 싶을 때,
display: none;을 이용할 수 있다.
어려운 내용
역시 앞에서 배웠던 html의 layout 제작 및 css의 속성 부분을 연습하는 과정이라 크게 어려운 부분은 없었다. 다만 position의 및 z-index의 활용이 중요한 것 같다.
소감
강사의 직접 클라이언트에게 외주를 받아 진행한 실제 사이트를 클론해보는 코드라 연습이 꽤 되는 것 같다. 또한 반복되는 부분이 꽤 있어 이런 부분은 확실히 손에 익혀지는 느낌이다.
나의 코드
여기까지 진행한 코드는 역시 github에 업로드했다.
