너와 나의 프로그래밍

요즘 프론트엔드 개발을 하면서 “display: flex” 속성을 활용해서 퍼블리싱을 하는 경우가 굉장히 많다. flex가 나오면서 정말 어려웠던 가로/세로 가운데 정렬도 쉽고 Element의 배치도 굉장히 쉬워지고 정말 많이 좋아졌지만 이놈의 “height: 100%”의 고질적인 문제를 참 해결하기 힘들었다. 개발을 하면서 부모 flex-container에서 height값을 주지 않고 자식의 height 값으로 부모의 height값을 자동으로 조절해주는 기능을 만들게 되었는데 이번에 찾아본 결과 “flex-grow: 1”이라는 속성을 찾아냈고 그 속성으로 height: 100% 문제를 해결했다. 문제 😳 child에 height: 100% 속성을 부여해줘도 전혀 움직이지 않고 높이가 제각각인 문제가 발..

[CSS] 여러개의 Span태그에 깔끔하게 Border 만들기. span태그에 mouseover/mouseout을 해서 빨간색 border상자가 생기고 없어지는 스크립트를 구현하고 있었다. 하지만 여러개의 Span에서 mouseover를 하면 뭔가 흔들리면서 border가 나와 멀미가 나올 지경이였다. Hi. Hello. Span태그에 존재하지 않던 border가 생겨서 1px씩 밀리는 현상이 있어, 맨 처음 Span 태그에 margin:1px을 줘서 해결하였지만, 모든 Span들의 margin값이 1씩 늘어나 내가 의도하는 구현과는 달랐다. 그래서 나온 결론이 처음으로 설정한 margin값을 지우고 border가 생길 때 마다 margin에 -1px씩 주었다. 이렇게 하면 border가 생기면서 Spa..

[HTML] span 태그에서 onblur 적용하기. 사실 span은 일반적으로 onblur를 사용할 수가 없다. 마찬가지로 div도 onblur를 사용할 수가 없다. onblur나 focus는 "입력요소"(예를들어 input)만 적용할 수 있다. 하지만 꼭! 써야되는 상황이 있었다. TEST span 태그에 "tabindex"를 0으로 설정하여 focus를 주는 방식이 있었다. tabindex 관련 자료는 구글 검색에서도 많이 볼 수 있다. tabindex를 0으로 줬을 시 focus가 생기는데 이때 선택된 엘리먼트에 테두리가 생기는 현상이 생겼다. span { outline: none;/* 선택을 했을 때 테두리가 보이는 현상을 처리 */ } tabindex를 설정 할 시 Chrome 브라우저에서만 ..

TD안의 이미지를 자동으로 셀 높이에 맞게 채우기 TD안에 있는 이미지를 어떻게 하면 꽉 채우면서 TD의 높이값이 변경되면 자동적으로 이미지의 높이값도 바뀔지 정말 고민을 많이 했다. 당연히 TD의 높이값을 100%를 주거나 이미지의 높이값을 100%를 준다면 될 줄 알았는데 역시나 실패였다. 구글링을 아무리 해도 제대로 나오지 않았고... 단순 유동적인 이미지의 속성값이 전부였다. (물론 내가 잘 못찾았을 수도 있음 ㅎㅎ;;) 안녕하세요 처음에는 이런식으로 구현을 해봤지만 옆 "안녕하세요" TD값의 높이가 변경이 되도 "이미지의 TD값의 높이가 변경되지 않고 꽉 채워지지도 않은" 그대로였다. 그래서 해결한 방안이... 안녕하세요 이미지가 들어있는 TD안에 로 이미지를 감쌌더니 해결됬다. 이걸 javas..