Programming/Frontend2 제리책방 개발일기:: Grid Layout 적용기 북스타그램에서 영감을 얻은 제리책방의 메인페이지는 인스타와 비슷하게 격자 형태로 이루어져있다. 처음에는 반응형을 고려하여 격자형 레이아웃을 Flex로 구현하였다. Flex box에 flex-wrap: wrap 이라는 속성을주게되면 하위 콘텐츠들이 상위 콘텐츠의 Width를 벗어나면 바로 줄바꿈이 된다. 하지만 flex-box는 1차원 배치 속성이기 때문에 하위 콘텐츠들을 가운데 정렬한 상태에서 flex-wrap을 주게되면 코드는 다음과 같다. display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; 위와같이 격자가 깨져버린다. 이건 예전에 스타일링할 때도 자주보던 문제인데 이번 기회에 .. 2022. 5. 7. 웹 퍼블리싱할 때 꿀팁 1. inline style 을 피하는 것이 좋습니다. 인라인 스타일은 간단한 내용을 적을 때 태그 자체에 대한 가독성은 좋지만 style 안에 내용이 길어지면 가독성이 급격하게 떨어집니다. 또한 인라인 스타일을 사용하게되면 스타일 코드를 재활용할 수 없게됩니다. ex1) ex2) 2. Semantic Tag 를 활용하는것이 좋습니다. HTML5에서 추가된 Semantic Tag를 활용하면 좀 더 간결하게 작성할 수 있습니다. 또한 브라우저의 코드 인식률도 올라가게됩니다. 3. 가운데 정렬을 위한 여러가지 방법 흔히 center-position-box 를 가운데 정렬하기 위해서 box-wrapper에 display: flex 를 줘서 가운데 정렬을 하곤하는데, box-wrapper 에 display: .. 2021. 3. 25. 이전 1 다음
