html/css 리뷰:
위코드 시작하기 전에 노마드코더스 코코아 클론 완성반을 완료해서 html/css랑 조금 익숙해서 과제를 리뷰 하면서 공부했다. 새로운 개념 몇까지 배우고 아직 익숙하지않은 css속성들 다시 보개돼서 좋았다!
Useful References:
https://learnlayout.com/
https://poiemaweb.com/css3-layout
https://poiemaweb.com/css3-box-model
Float vs Flex:
Before flex was added to html/css, "float" was used to format text around images and create overall webpage designs. There are a few drawbacks to using float. Perhaps most notably, parent elements cannot recognize the height of children elements that have been adjusted using float. You can resolve this problem by applying overflow: hidden; to the parent element containing the children float elements. With flex, it's easier to control the overall layout of html elements. While there's no correct way to write code, using flex instead of float seems to be the way to go!
Position Fixed, Absolute, Relative:
Position Fixed: Anchors elements to one spot on the page. These elements are not affected by other elements on the page and remain in the same spot even when scrolling (sort of like creating a new layer on Photshop)
Position Relative: If this property is applied, you can move elements relative to its original position on the screen (using top, right, bottom, left)
Position Absolute: If you want to use position: absolute;, the element that is using it MUST have a position: relative; parent element or a position: fixed; parent element. The child element moves relative to the position of the parent element (using top, right, bottom, left). It is better to use position absolute; with a position: relative; parent
CSS Specificity:
- inline styling: 1000 points
- id: 100 points
- class: 10 points
- tag: 1 point
Key Points to Remember:
- Don't forget to use box-sizing: border-box using *
is used to represent spaces- CSS stands for Cascading Style Elements, which means that effects are applied in descending order, like a waterfall (hence the name "cascading")
