기초공사 (html,css,javascript)

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

// 발단 application메뉴중 AI VOICE Bot에서 콜봇이미지가 계속 올라온다. 코드를 확인한 결과 그 앞페이지에 '화자분리대면상담'에서 position:relative와 absolute를 썼었는데 ( '화자분리대면상담'에서 position빼도 가운데로 잘간다..왜 내가 이걸 쓴거지...) 그거때문에 이미지가 위로 올라온것이다. 이 예를 보고 postion에대해 더 깊게공부해보자. 아래코드 .little-img_container40 { max-width:50%; width:100%; height:100%; padding:10px; /* border:1px solid red; */ /* position:relative; */ } .little-img_container40 img { width:..

// 발단. grid를 쓰지않고 한줄에 li가 두개씩 배치하고싶을때. .ul-text-box80 li에 대한 width 속성이 calc(50% - 10px);로 설정되어 있기 때문에, 한 줄에 li 요소가 두 개씩 정렬됩니다. 이 코드에서 calc(50% - 10px);는 부모 요소의 너비의 50%에서 10px을 뺀 값을 li 요소의 너비로 설정하라는 의미입니다. 따라서 부모 요소의 너비를 기준으로 li 요소의 너비가 계산되며, 결과적으로 한 줄에 두 개의 li 요소가 들어갈 수 있는 너비가 됩니다. | VOIS# STT | 지속적인 모델학습배포를 통한 인식율 향상, 실시간 또는 배치모드 음성문자변환 지원 | VOIS# dTTS | 딥러닝(E2E)기반의 사람을 닮은 자연스러운 음성합성 | OSSMTM S..

// 좀더 정확히 알고싶어서 해본 예제 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떄문이 아니라....흠..

//이번에 안되는 부분들이 있어서 비슷한 사이트가 있어서 주말에 따라해봤는데. 결국은 똑같은 코드로는 못했지만 비슷하게했다. 1./ 여기에서는 flex-wrap:wrap이라는 개념으로 flex 0 0 65%와 그 아래를 flex 0 0 75%를 둠으로써 flex-direction:column을 쓰지않고..넘치면 넘어와 ~ 라는 flex-wrap:wrap를 써서 자연스레 세로정렬이 된다는점을 배웠고. 2. 잊고있었떤 img부모태그에 text-align:center를 두면 이미지가 가운데로 가는걸 기억했다. 3. align-self:center 텍스트가 단독으로 세로로 가운데로 갔다. 토요일 하루 이거 분석하느라 시간이 가서..속상했다.아직도 모르는게 너무 많아서.. 그래서 홈페이지 진도를 못나갔다..다음주..