[CSS] 이미지 비율 유지
[CSS] 이미지 비율 유지<img /> 태그로 작업할 때 알아둬야 할 특징이 하나 있다. HTML이나 React 환경 모두에서 <img /> 태그는 기본적으로이미지 원본의 크기를 따라간다.예를 들어보면, 100px x 100px 크기의 이미지가 있다고 가정하자부모 div의 크기를 지정하지 않아도 이미지는 자기가 가진 100px를 유지하고, 부모 div도
관련 게시물
[CSS] 자식의 fouce로 부모의 style을 변경하기
자식의 fouce로 부모의 style을 변경하기기존에 아래와 같은 HTML이 있다고 가정했을 경우,input에 Fouce 된다면 :fouce 선택자를 사용하여 스타일을 변경 할 수 있었다.<div class="parent"> <div class="children"> <input type="text" /> </div> </div> 하
[Css] Vender Prefixs , css 접두사
신입시절, 퍼블리싱을 진행 하면서 가장 궁금했던 부분이었다.굳이 왜 css를 앞에 -webkit- 같은 걸 붙여서 또 선언하는건지..1️⃣ "Vender Prefixs 란?"지금 접두사에 대해 답변 한다면 나는구형 브라우저에서도 동일한 css의 속성을 사용 하기위한 <Cascading> 개념이다라고 이야기 할 것이다.무슨말이냐면,각 브라우저는 개인마다 표준
[Css] Grid
난 보통 레이아웃을 구성할때가장 큰 레이아웃을 하나의 div로 래핑하여 "margin 0 auto"; 하거나 body에 display flex를 애용하는 편이다.정말 이전에는 div에 대한 요소를 반영하기 위해 float을 많이 사용했는데.. 요즘은 정말 거의 쓰질 않는다.이유는 대세인 "flex"와 "gird"가 있기 때문이다.사실 grid도 난 잘 쓰지 않았다. 이유는 분명하게 flex만으로도 충분한 ui가 구성이 되기 때문이었다.근데 요즘 추세가 grid를 굉장히 많이 쓴다고 하니.. 이 또한 파악 하기 위해서 "grid"를 재 복습한다.1️⃣ "Flex와 Grid의 차이"내가 생각하는 grid의 장점은 2차원 적 레이아웃도 div를 생성하지 않고도 만들 수 있게 한다는 것이다.flex의 경우는 1차원 적인 레이아웃을 컨트롤 하기에 우측이나 좌측으로 하나의 기준을 정해두고 정렬을 하는데grid의 경우는 우측 좌측만이 아닌 하나의 섹션내에서도 동일 div에서 컨트롤 이 가능하다.