https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right" target="_blank" rel="noopener" data-mce-href="http:// https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right">http:// https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right  Ignore parent? another child The parent has .parent {..." data-og-host="stackoverflow.com" data-og-s..

오늘은 trello-clone을 하던 중 발생한 에러에 대해서 알아보려고 합니다! 제가 예전에 작업한 프로젝트인 trello-clone입니다. To do list에서 수정 버튼을 추가해줬고, 문자열이 특정 길이가 되면 수정버튼이 아래로 이탈하는 경우가 있었습니다. 위와 같이 이탈하는 경우였습니다. 해결 방법은 간단했습니다. html을 작성할 때, 오른쪽 영역의 코드와 가운데 영역의 코드의 순서를 바꿔주면 해결이 되었습니다. 참고 https://windcjg.blogspot.com/2022/09/align-center.html

☺️ vw와 vh란? CSS 작업을 할 때, 주로 사용하는 단위는 픽셀(px)이다. 하지만, px는 고정 단위이고 이를 대신해 유동 단위인 %를 사용하면 조금 더 유연한 코드를 만들 수 있다. 예를 들어, width: 50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS이다. %말고도 유연한 값을 가지는 단위들 중 vw, vh를 알아보자. v, 뷰포트를 기준으로 하다. 이들의 풀네임은 Viewport Width / Viewport Height 이다. 이름에서 유추할 수 있듯이 뷰포트를 기준으로 한 단위이다. 뷰포트는 ‘보여지는 영역’이라고 했으니, 결국 보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위라 할 수 있다. 1vw = 뷰포트 너비의 1%로 계산된다. 그렇..

Flexbox란? Flexbox는 아이템들을 행 또는 열로 자유자재로 배치시킬 수 있는 정말 정말 유연한 녀석입니다. CSS의 꽃이라고 불리는 Flexbox 녀석을 오늘 자세하게 뜯어보겠습니다. ex) 박스가 커지면 박스 속의 각각의 아이템들이 어떤 식으로 커지면서 박스의 공간을 메워야 하는지 박스가 작아지면 박스 속의 아이템들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 하는지 위의 두 가지를 자유롭게 정의할 수 있고 너무너무 쉽게 이 모든 것들을 가능하게 해주는 것이 바로 “Flexbox”입니다. flexbox만 잘 이해하셔도 웹사이트의 layout을 아주 쉽게 구성할 수 있습니다. 너무나 쉽고 간단한 flexbox… 저와 같이 오늘 부숴버리도록 해보겠습니다. 예전에는 position, floa..

웹사이트를 만들 때, 가장 중요한 것은 무엇일까요? ⇒ 우리가 이전 시간에 정의했던 박스들을 원하는 위치에 원하는 사이즈로 배치할 수 있는 것이 가장 중요합니다. 이것을 하기 위해서는 CSS에서 가장 기본이 되는 display와 position에 대해서 아는 것이 중요합니다. 이것이 사실 간단해 보여서 쉬워 보일 수 있지만, 현업에서는 박스 위에 박스가 올려져 있는 stacking이 많은 상태에서 display와 position을 잘 이해하지 못하면 금방 무너져 내릴 수 있습니다. (라고 현업에 계신 분이 말함.) display와 position은 끝낸다는 마음으로 정리를 시작해 보겠습니다. display 오늘은 실습을 통해서 진행해 보겠습니다. (같이 실습을 하고 싶다면 jsbin.com에서 하실 수 ..

Selectors란? html에 어떤 tag들을 고를 것인지에 대한 규정하는 문법입니다. * : 모든 태그에 적용 Tag : 해당 태그만 적용 #id : 해당 id만 적용 .class : 해당 class만 적용 : :태그 옆에 state 작성 가능 [] : 태그 옆에 attribute 작성 가능 다음과 같은 형식으로 작성하면 끝! CSS 문법은 어려운 것이 없습니다 :) /*selector { property: value; }*/ * { color: green; } li { color: pink; } .red { width: 100px; height: 100px; background: yellow; } button:hover { color: red; background: beige; } a[href^="..

CSS란? Cascading Style Sheet의 약자입니다. Style Sheet은 스타일을 잘 정리한 문서 한 장을 의미합니다. Cascading은 작은 폭포, 연속화 등등 연속해서 떨어지는 느낌을 준다고 생각하면 됩니다. Cascading은 세부적으로 정의된 것이 있다면 그것을 사용하고 정의된 것이 없다면 기본으로 정의된 다음 것으로 넘어가는 것을 얘기합니다. 웹 사이트를 스타일링할 때, 총 크게 3가지로 나뉩니다. Author style 우리가 작성하는 style sheet(.css 파일) User style 사용자의 취향에 맞게 스타일링의 변경하는 것(ex. 다크모드) Browser 브라우저 상에서 기본적으로 지정된 스타일 Cascading은 우리가 지정한 스타일(Author style)이 최..