기초공사 (html,css,javascript)

// flex: 1 1 25%와 1 0 25% 일떄 비교해보기 // 사용자를 고려한 설계로 만족스러운 체험을 웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다. 우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를 뛰어넘는 사용자 체험을 제공합니다. 퍼소나란? ..

// 좀더 정확히 알고싶어서 해본 예제 parent:400px로 두니 변화를 알수없으니 100%로 두었따. 예시를 보자. flex flex-grow box1 box2 box3 flex-shrink box1 box2 box3 flex-basis box1 box2 box3 flex box1 box2 box3 예시를 보자. flexl-shrink는 기본값이 1이다. 설정을 안해줘도 화면사이즈가 줄어들면 각각 조금씩 축소 되어있다. 1:1:1이 된다. 부모너비가 400px이고 shrink는 200px씩 3개이므로 200px가 넘친다. 그 200px에 대해서 3등분하니 66.66px가 된다. 그래서 각 box1은 200px이니 200px - 66.66px 를 빼서 133.33px가 된다. 여기에서 box3을 fl..

// flex-ex 생활코딩 폴더에서. 예제에서 보면, 컨테이너 너비의 90%만 쓰니 여백이 생긴다. flex-grow:1이여도 여백이 생긴다. max-width가 있어서.. 그래도 삭제하면 다 채워진다. 1. width:160px로 하고, flex-shrink:0 하면 식별이 된다. 하지만 width:80% 퍼센트로 하니 식별이 안된다. 위코드를 보면 max-width를 삭제하고 width:160px는 유지된다. flex-grow:1로 되어있으니 꽉 찬다. flex-shrink를 이해한거같았는데 0을 지워도 똑같네;;;; width:160px px로 고정이 되어있어서 그랬던거네..flex-shrink:0떄문이 아니라....흠..