CSS3

• 

  레이아웃 - Grid 완벽 이해 출처 https://nykim.work/59 프롤로그 레이아웃을 구현할 때 flexbox를 쓰면 참 편합니다. 플박만으로 레이아웃을 구현하는 데 큰 문제는 없지만, 보다 정교하고 복잡한 레이아웃에는 그리드가 좋다는 소문(?)을 들었거든요. 그래서 이번에는 grid를 배워서 좀 더 업그레이드를 해보려고 합니다. 아, 당연하지만 구 버전 IE에 대한 지원은 눈물을 머금고 포기해야 합니다. caniuse에 따르면 IE 11부터 부분 지원하고 있는데요, 그냥 Edge부터 잘 먹겠구나~ 라고 보면 될 것 같아요. 파이어폭스(특히 Developer Edition)는 개발자도구에서 CSS 그리드를 더 잘 나타내주고 있으니 학습에 참고하시면 좋겠습니다. 그리드, 일단 써봅시다 display 플렉스박스를 display:.. CSS/레이아웃 2022. 8. 28.

• 

  레이아웃 - Flex 완벽 이해 출처 https://velog.io/@bining/css-Flex-Box%EB%A1%9C-layout-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0 [css] Flex Box로 layout 구성하기 기본적으로 콘텐츠의 흐름은 좌에서 우로, 위에서 아래로 흐른다. 먼저 수직으로 분할하고, 수직으로 분할된 div에서 height 속성을 이용해 수평 분할을 하는 것이 좋다. Flexbox로 레이아웃 잡기 flex velog.io 기본적으로 콘텐츠의 흐름은 좌에서 우로, 위에서 아래로 흐른다. 먼저 수직으로 분할하고, 수직으로 분할된 div에서 height 속성을 이용해 수평 분할을 하는 것이 좋다. Flexbox로 레이아웃 잡기 flexbox 레이아웃은, 말 그대로 박스를 유연하게 늘리고 .. CSS/레이아웃 2022. 8. 28.

• 레이아웃은 어떻게 만들지? HTML,CSS 공부를 마치고 여러가지를 만들면서 느꼈던 어려움, 레이아웃 만들기 이다. 제일 기본적인 부분을 어려워 하다니... 구글링이나 공식문서 등을 통해 다시한번 되짚고 가보자 한다. 레이아웃의 구성 요소 시멘틱 마크업을 위해 기본적인 것을 익혀두도록 하자 레이아웃을 만드는 방법 float flexbox position 값으로 "이동" Grid inlin-block CSS/레이아웃 2022. 8. 28.