CSS라는게 공부하면 공부할 수록 어렵다.
접근성은 좋은데, 자신이 의도한 바를 정확하게 이루기가 너무 어렵다.
오늘 공부한 내용은 CSS를 직접 작성하는 실질적인 내용에 대한 것들이여서 헷깔리는 용어들 정리를 하겠다.
1. 후손 셀렉터, 자손 셀렉터
이렇게 한 번에 이해가 안되는 용어는 처음봤다. 영어로 봐야지 오히려 쉬운 단어들인데, 원문 용어와 셀렉터 표현법을 아래에 쓰겠다.
후손 셀렉터 (descendant selector)
a b{}자식 셀렉터 (child selector)
a>b{}
후손 셀렉터는 위와같이 사이에 space를 만들어 줘야한다.
후손 셀렉터는 자식 셀렉터 + 자식 셀렉터의 자식셀렉터들을 포함하는 것이다.
자식 셀렉터는 쉽게 말하면 직계 자식만 포함한다.
2. justify-content, align-items
이 두 정렬들은 그냥 보고서는 어떻게 정렬하는지 알수가 없다.
둘 다 부모 박스에 적용한다는 공통점이 있다.
justify-content는 자식 박스를 수평 정렬
align-items는 자식 박스를 수직정렬 한다.
3. Flex
flex는 부모 요소에
display : flex;를 적용하는 것으로 시작된다.
자식 요소에 flex를 적용하지않으면
flex : 0 1 auto;라는 값이 기본값으로 자동으로 적용되는데
좌측부터 차례대로 grow, shink, basis 이다.
설계
건물을 만들때, BluePrint를 만드는 것처럼 웹이나 앱을 만들 때도 BluePrint가 필요하다.
WireFrame
WireFrame은 화면 단위의 레이아웃을 설계하는 것이다. 배치도를 작성한다고 보면 된다.
위에서 말한 BLuePrint랑 매우 흡사하도고 볼 수 있다.
Mock - up
프론트엔드에서는 Mock - up은 실제와 매우 흡사한 웹이나 앱을 시각적으로 볼 수 있게 만드는 것이다. JS를 통한 기능을 구현할 필요는 없고, 하드코딩으로 시제품을 만들어 본다고 생각하면 된다.
