【Nuxt.js】Nuxt 실천편:Flexbox를 사용하자!

🎈 이 기사는 WP 전용입니다
htps //wp. 메 / pc9 HC-TP

전치





CSS에서 자주 사용
flex 속성을 사용해 봅시다 🌟
가로 줄과 중앙 정렬
쉽게 할 수있는 것입니다 💡

시간과 경우에 따라
float보다 편리하고 높은 빈도로 사용합니다 💕

⬇️ 이런 느낌으로 사용합니다 ❣️

index.vue
display: flex;
justify-content: space-between;
align-items: center;

MDN : CSS 플렉스 박스 레이아웃

Flexbox란, Flexible Box Layout Module로,
그 이름대로 유연하고 쉽게 레이아웃이 짜 버리는 멋진 상자입니다.
일본어 대응! CSS Flexbox의 치트 시트를 만들었으므로 배포합니다.

지금까지 Nuxt 메인에서
중요한 HTML, CSS
별로 하지 않았기 때문에
조금씩 갑니다 🌱🙋‍♀️

만드는 것





앞에 놓인 이미지의
카드 부분입니다 🌟

네일 디자인
카드를 이미지합니다 💅❤️
사각형 ◾️에는 이미지가 들어갑니다.
네일 이름과 이미지,
소개문과 태그,
네이리스트의 다른 작품도 일람으로 본다👀
같은 느낌으로하고 있습니다.

⬇️ 링크처
버튼을 누르면 네일리스트의 네일 목록
마찬가지로 카드를 눌러도 네일 목록
태그를 누르면 태그에 해당하는 디자인 목록

구성



그럼 구성을 생각해 봅시다 🤔💭
우선 디렉토리 , 구성 요소에서.

🎈 자세한 내용은 WP에서 확인하세요 👀
htps //wp. 메 / pc9 HC-TP

좋은 웹페이지 즐겨찾기