예방이의 개발일기

내가 헷갈려하는 flex에 대한 부분을 정리해봤다. inline-flex CSS display: flex 그리고 inline-flex 인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정 rgy0409.tistory.com flex-flow .item { display: flex; /* flex-direction flex-wrap */ flex-flow: flex-col wrap; } align-self 교차축 방향으로 박스를 개별적 배치할 수 있게 해주는 속성 속성명 속성값 적용요소 align-self auto stretch flex-start..

CSS의 grid와 flex를 사용하면 크게 사용하지 않는 편인 것 같다. 하지만 크로스브라우징을 해야할 수도 있으니까... 알아두는 것도 좋을 것 같다. (flex와 grid를 사용못할 수 있기 때문에... 거의 그 경우는 없지만 ㅎㅎ, can I use 에서 확인해보면됨! ) 근데 주로 사파리, 사파리 mobile, 갤럭시 브라우저에서 말썽이 많이 나는 듯 (아마 내 기억에 사파리 ios14?인가에서 flex gap을 못사용했다. 근데 grid gap은 또 사용가능 ㅎㅎ) 🍎 가변 그리드 공식 (박스의 가로 너비) ➗ (박스를 감싸고 있는 부모박스의 너비) ✖️ 100 = 가변크기의 % 값 작업 할 때 부모 박스를 잘 사용해야하는 것 같다. (부모 박스를 적재적소에 잘 사용하는 눈은 경력 차인듯.....

반응형 웹에 필요한 4가지 기본 개념 🍎 가변 그리드 Fluid Layout / Flexible Layout / Flexible Grid 반응형은 px로 작업할 수 없다. 대신 퍼센트(%)로 작업해야한다. 퍼센트(%)로 작업해야지 가변 폭에 따라 내용들도 가변적으로 늘어났다 줄어들었다 할 수 있다. 💡 가변, 가변적이다 "어떠한 객체/물체 또는 사물이 늘어나거나 줄어들거나 성질이 변하는 것" 💡 그리드, 그리드 작업 그리드란 격자, 눈금을 말함 웹 디자인에서는 웹페이지의 가로크기, 세로크기, 여백, 단 수 등 웹사이트의 구조 설계를 위한 의미로 사용 🍎 미디어쿼리 & 뷰포트 퍼센트로만 css를 작업한다고해서 반응형 웹이 되는 것은 아니다. 비율로 제작 시 가변적으로 작동하긴 하나 기기나 환경에 따라 구조..

반응형 웹에 등장 모바일 기기가 나오고 모바일 웹이 등장하고, 그 뒤에 계속해서 태블릿, 패블릿 기기 등 여러 사이즈의 기기들이 나오면서 다양한 화면에 최적화된 웹사이트를 제공하기 위해 반응형 웹이 등장하게 되었다. - 2015년 10월 반응형웹이란? 해당 기기 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹이라고 할 수 있다. 해당 사이트에서 다양한 반응형 웹사이트를 만나볼 수 있다. 반응형으로 작업해야하는 이유는? 유지보수의 간편함 반응형을 구축할 때 작업해봤는데 100% 인정은 할 수 없는 것 같다. 모바일과 웹의 디자인의 갭이 적었을 때 효과가 좋은듯? 적응형 사이트도 해봤는데 확실히 적응형보다는 유지보수가 쉬운 건 맞다. (적응형은 pc, mo 다 각자 수정해야하고 다 별도로 테스트 해야..