맨 처음 원했던 스타일은 다음과 같았다. top top top right right right main html은 위와같이 짰다. 가장 먼저 생각한 난관은 grid_left_section 클래스 안에있는 글자를 돌리는 부분이었다. 하지만 transform을 활용하면 가볍게 구현할 수 있을 것 같아 별로 크게 신경쓰지 않았다. 분명 span이 찌그러질 것 같아서 span의 width는 max-content를 줬다. 근데... grid_left_section 안에있는 span을 rotateZ로 돌려도.. width가 전혀 줄어들지 않았다... 혹시나 하는 마음에 grid_right 컨테이너의 너비를 더 줘도 요지부동이었다. 너무 화가난 나머지 개발자 도구를 키고 알아보기로 했다. 수상한 점을 눈치채셨나요? ..

이게 뭔말이지? absolute로 가운데에 놓는다니.. 위와 같이 flex container에서 가운데에 놓는건 누워서 침 삼키기보다 쉽다. 애초에 이걸 말하는거면 position: absolute라고 시작하지도 않았다. 작성자가 원하는 건 다음과 같은 모습이다. 위와같은 디자인을 구현하려면, 회색테두리 container의 position을 absolute로 만들어야한다. 검정테두리 container의 사이즈가 변할 때마다 회색테두리 container의 위치를 바꿔줄건가? 그건 요즘같은 반응형 웹시대에 맞지 않는 대응이다. 따라서 '%'를 써서 회색테두리 container를 가운데에 놓아보자. 그럼 top, left속성을 써서 위치를 조절해야하는데, 문제가 생긴다. position: absolute는 위..

https://canalstreet.market/ About | Canal Street Market Canal Street Market is a curated retail market, food hall & community space open year-round, located in downtown New York between Soho and Chinatown. canalstreet.market 위 사이트를 클론하던 중 재미있는 디자인들을 보았다. 1. 점선으로 된 위 아래 테두리가 있다. 2. 점선으로 된 테두리가 상하좌우 있다. 3. 비스듬하게 선이 그어져있는 테두리가 위 아래로 있다. 위 3개의 디자인을 이해하기 위해서는 다음 6개의 css를 알아야한다. 1. background-image 2...